#nav-sidebar a.active {
  background-color: color-mix(in oklab, var(--color-primary-500) 10%, transparent);
}

:is(a[href], button:not(:disabled), select:not(:disabled), [role="button"]:not([aria-disabled="true"]), summary),
input:is([type="button"], [type="submit"], [type="reset"], [type="checkbox"], [type="radio"]):not(:disabled),
label:has(input:is([type="checkbox"], [type="radio"])) {
  cursor: pointer;
}

:is(button, input, select, [role="button"]):disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
}

body table tbody tr:hover > :is(th, td),
body table tr.selected > :is(th, td) {
  background-color: color-mix(in oklab, var(--color-primary-500) 4%, var(--color-base-50)) !important;
}

.dark body table tbody tr:hover > :is(th, td),
.dark body table tr.selected > :is(th, td) {
  background-color: color-mix(in oklab, var(--color-primary-500) 6%, var(--color-base-900)) !important;
}

table::selection,
table *::selection {
  background-color: color-mix(in oklab, var(--color-primary-500) 18%, var(--color-base-50));
  color: var(--color-font-default-light);
}

.dark table::selection,
.dark table *::selection {
  background-color: color-mix(in oklab, var(--color-primary-500) 18%, var(--color-base-900));
  color: var(--color-font-default-dark);
}

.ql-parameter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.75rem;
}

.ql-parameter-field {
  min-width: 0;
  padding: 0.75rem;
  border: 1px solid var(--color-base-200);
  border-radius: 0.375rem;
  background: var(--color-base-50);
}

.dark .ql-parameter-field {
  border-color: var(--color-base-700);
  background: var(--color-base-900);
}

.ql-parameter-field label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
}

.ql-parameter-field code,
.ql-parameter-field p {
  color: var(--color-base-500);
  font-size: 0.75rem;
}

.ql-parameter-field p {
  margin-top: 0.375rem;
}

.ql-parameter-field :is(input, select, textarea) {
  width: 100%;
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-base-300);
  border-radius: 0.375rem;
  background: white;
}

.dark .ql-parameter-field :is(input, select, textarea) {
  border-color: var(--color-base-700);
  background: var(--color-base-900);
  color: var(--color-font-default-dark);
}

/* Query-page alerts: explicit colours in both themes (Unfold's Tailwind build does not ship
   every red-* utility, which left the error text white on a pale background). */
.ql-alert-error {
  border: 1px solid #fca5a5;
  background: #fef2f2;
  color: #7f1d1d;
}
.dark .ql-alert-error, [data-theme="dark"] .ql-alert-error {
  border-color: #7f1d1d;
  background: #450a0a;
  color: #fecaca;
}
.ql-alert-warning {
  border: 1px solid #fcd34d;
  background: #fffbeb;
  color: #78350f;
}
.dark .ql-alert-warning, [data-theme="dark"] .ql-alert-warning {
  border-color: #78350f;
  background: #451a03;
  color: #fde68a;
}

/* ── Catalogue service page: one anatomy for every service kind ─────────────────────
   Header (identity + facts + one context action) · workspace = sticky query console |
   results tabs · members · about. Colours come from Unfold's palette variables so the
   page follows the theme; utilities Unfold does not ship are defined here, not inlined. */
.ql-page { display: flex; flex-direction: column; gap: 1.25rem; padding-bottom: 2rem; }
.ql-head { display: flex; flex-direction: column; gap: .45rem; }
.ql-crumb { font-size: .8125rem; color: var(--color-primary-600); width: fit-content; }
.dark .ql-crumb { color: var(--color-primary-400); }
.ql-crumb:hover { text-decoration: underline; }
.ql-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .75rem; }
.ql-title-row h1 { font-size: 1.5rem; font-weight: 600; margin: 0; line-height: 1.2; }
.ql-kind { border-radius: 999px; padding: .2rem .6rem; font-size: .75rem; font-weight: 500;
  background: color-mix(in oklab, var(--color-primary-500) 12%, transparent); color: var(--color-primary-700); }
.dark .ql-kind { color: var(--color-primary-300); }
.ql-actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.ql-lead { margin: 0; max-width: 64rem; color: var(--color-base-500); font-size: .9375rem; }
.dark .ql-lead { color: var(--color-base-400); }
.ql-btn { display: inline-flex; align-items: center; gap: .4rem; height: 2.25rem; padding: 0 .85rem; border-radius: .5rem;
  font-size: .8125rem; font-weight: 500; border: 1px solid var(--color-base-300); background: transparent; color: inherit;
  white-space: nowrap; text-decoration: none; }
.dark .ql-btn { border-color: var(--color-base-700); }
.ql-btn:hover { border-color: var(--color-primary-500); color: var(--color-primary-700); }
.dark .ql-btn:hover { color: var(--color-primary-300); }
.ql-btn-primary, .ql-btn-primary:hover { background: var(--color-primary-600); border-color: var(--color-primary-600); color: #fff; }
.ql-btn-primary:hover { background: var(--color-primary-700); border-color: var(--color-primary-700); }
.ql-btn-primary:disabled { opacity: .6; }
.ql-btn-star { border-color: var(--color-primary-500); color: var(--color-primary-700); }
.dark .ql-btn-star { color: var(--color-primary-300); }
.ql-btn-star[data-on="true"] { background: color-mix(in oklab, var(--color-primary-500) 14%, transparent); }
.ql-favorite { display: inline-flex; align-items: center; gap: .4rem; }
.ql-favorite-name { flex: 0 1 14rem; width: 14rem; font-size: .85rem; }
.ql-more { position: relative; }
.ql-more > summary { list-style: none; }
.ql-more > summary::-webkit-details-marker { display: none; }
.ql-more-menu { position: absolute; right: 0; top: calc(100% + .35rem); z-index: 40; min-width: 15rem; display: flex; flex-direction: column;
  border: 1px solid var(--color-base-200); border-radius: .6rem; background: #fff; padding: .35rem; box-shadow: 0 10px 30px rgba(0,0,0,.14); }
.dark .ql-more-menu { background: var(--color-base-900); border-color: var(--color-base-700); }
.ql-more-menu a, .ql-more-menu span { display: block; padding: .5rem .65rem; border-radius: .4rem; font-size: .8125rem; color: inherit; text-decoration: none; }
.ql-more-menu a:hover { background: color-mix(in oklab, var(--color-primary-500) 10%, transparent); }
.ql-more-menu code { display: block; font-size: .6875rem; color: var(--color-base-500); word-break: break-all; }
.ql-facts { display: flex; flex-wrap: wrap; gap: .3rem 1.25rem; margin: .2rem 0 0; font-size: .8125rem; align-items: center; }
.ql-facts div { display: flex; gap: .4rem; align-items: baseline; }
.ql-facts dt { color: var(--color-base-500); }
.ql-facts dd { margin: 0; font-weight: 500; }
.ql-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 999px; background: var(--color-base-400); margin-right: .35rem; vertical-align: middle; }
.ql-dot[data-state="healthy"] { background: #16a34a; }
.ql-dot[data-state="degraded"], .ql-dot[data-state="stale"] { background: #d97706; }
.ql-dot[data-state="failing"], .ql-dot[data-state="unhealthy"], .ql-dot[data-state="unavailable"] { background: #dc2626; }
/* A series that answers for time not yet ingested — fetched on demand from a live source. */
.ql-live { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; color: #16a34a; }
.ql-live::before { content: ""; width: .45rem; height: .45rem; border-radius: 999px; background: currentColor; }
.dark .ql-live { color: #4ade80; }
/* A standing statement about what is on the page, not a transient message. */
.ql-note { margin: 0; padding: .6rem .8rem; border-left: 3px solid var(--color-base-300); background: var(--color-base-50); font-size: .8125rem; line-height: 1.5; }
.dark .ql-note { border-left-color: var(--color-base-600); background: var(--color-base-800); }
.ql-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.ql-tag { border-radius: 999px; padding: .2rem .6rem; font-size: .75rem; border: 1px solid var(--color-base-200); }
.dark .ql-tag { border-color: var(--color-base-700); }
.ql-tag-path { border-color: transparent; background: color-mix(in oklab, var(--color-primary-500) 12%, transparent); color: var(--color-primary-700); font-weight: 500; }
.dark .ql-tag-path { color: var(--color-primary-300); }

.ql-workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (min-width: 1100px) {
  .ql-workspace { grid-template-columns: minmax(20rem, 23rem) minmax(0, 1fr); }
  /* No `overflow: auto` here. It existed because the panels used to expand INLINE and made
     the console taller than the screen; now they float, the console is a handful of
     triggers, and any clipping ancestor cuts a floating panel off mid-chip. */
  .ql-console { position: sticky; top: 1rem; }
}
.ql-console { border: 1px solid var(--color-base-200); border-radius: .75rem; background: var(--color-base-50); display: flex; flex-direction: column; }
.dark .ql-console { border-color: var(--color-base-800); background: color-mix(in oklab, var(--color-base-900) 70%, transparent); }
.ql-console-head { padding: .85rem 1rem .65rem; border-bottom: 1px solid var(--color-base-200); display: flex; flex-direction: column; gap: .4rem; }
.dark .ql-console-head { border-color: var(--color-base-800); }
.ql-console-head h2 { font-size: 1rem; font-weight: 600; margin: 0; }
.ql-console form { display: flex; flex-direction: column; margin: 0; }
.ql-group { padding: .8rem 1rem; border-bottom: 1px solid var(--color-base-200); display: flex; flex-direction: column; gap: .55rem; }
.dark .ql-group { border-color: var(--color-base-800); }
.ql-group-title { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; font-size: .6875rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--color-base-500); }
.ql-group-title .ql-count { font-weight: 500; letter-spacing: 0; text-transform: none; }
.ql-field { display: flex; flex-direction: column; gap: .25rem; font-size: .8125rem; position: relative; }
/* A label reads as a label: its name on one line, the field's key quietly beneath, so a long
   name and a long key never compete for the same row. `.ql-inline` keeps the old single row. */
.ql-field > .ql-label { font-weight: 500; display: flex; flex-direction: column; gap: .05rem; line-height: 1.3; min-width: 0; }
.ql-label-row { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.ql-field:focus-within > .ql-label { color: var(--color-primary-700); }
.dark .ql-field:focus-within > .ql-label { color: var(--color-primary-300); }
.ql-field code, .ql-hint { font-size: .6875rem; color: var(--color-base-500); font-weight: 400; }
.ql-input { width: 100%; height: 2.375rem; border: 1px solid var(--color-base-300); border-radius: .5rem; background: #fff; padding: 0 .65rem; font-size: .875rem; color: inherit; }
.ql-input[type="date"], .ql-input[type="datetime-local"] { appearance: auto; min-width: 11rem; }
.ql-input[type="date"]::-webkit-calendar-picker-indicator,
.ql-input[type="datetime-local"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 1; }
.dark .ql-input { background: var(--color-base-950); border-color: var(--color-base-700); }
.dark .ql-input[type="date"], .dark .ql-input[type="datetime-local"] { color-scheme: dark; }
.ql-input:focus { outline: 2px solid color-mix(in oklab, var(--color-primary-500) 55%, transparent); outline-offset: 0; border-color: var(--color-primary-500); }
textarea.ql-input { height: auto; padding: .45rem .65rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; }
select.ql-input { padding-right: 1.6rem; }
.ql-segmented { display: flex; flex-wrap: wrap; gap: .2rem; padding: .2rem; border-radius: .55rem; background: color-mix(in oklab, var(--color-base-500) 12%, transparent); }
.ql-segmented button { flex: 1 1 auto; height: 1.85rem; padding: 0 .55rem; border-radius: .4rem; font-size: .75rem; font-weight: 500; border: 0; background: transparent; color: inherit; }
.ql-segmented button[aria-pressed="true"] { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.14); color: var(--color-primary-700); }
.dark .ql-segmented button[aria-pressed="true"] { background: var(--color-base-800); color: var(--color-primary-300); }
.ql-range { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.ql-chip { display: inline-flex; align-items: center; gap: .35rem; min-height: 1.9rem; padding: .2rem .6rem; border-radius: 999px; border: 1px solid var(--color-base-300); font-size: .75rem; user-select: none; position: relative; }
.dark .ql-chip { border-color: var(--color-base-700); }
.ql-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ql-chip:has(input:checked) { border-color: var(--color-primary-500); background: color-mix(in oklab, var(--color-primary-500) 14%, transparent); color: var(--color-primary-700); }
.dark .ql-chip:has(input:checked) { color: var(--color-primary-200); }
.ql-chip:has(input:checked)::before { content: "✓"; font-size: .6875rem; }
.ql-chip:has(input:focus-visible) { outline: 2px solid var(--color-primary-500); }
.ql-chip code { font-size: .625rem; opacity: .65; color: inherit; }
.ql-linkbtn { border: 0; background: none; padding: 0; font-size: .75rem; color: var(--color-primary-600); font-weight: 500; }
.dark .ql-linkbtn { color: var(--color-primary-400); }
.ql-linkbtn:hover { text-decoration: underline; }
.ql-toolbar { display: flex; flex-wrap: wrap; gap: .35rem .8rem; align-items: center; }
.ql-console-foot { padding: .8rem 1rem .9rem; display: flex; flex-direction: column; gap: .55rem; position: sticky; bottom: 0;
  background: var(--color-base-50); border-top: 1px solid var(--color-base-200); }
.dark .ql-console-foot { background: var(--color-base-900); border-color: var(--color-base-800); }
.ql-foot-row { display: grid; grid-template-columns: minmax(0, 1fr) 5.5rem; gap: .5rem; }
.ql-run { width: 100%; height: 2.5rem; font-size: .9375rem; font-weight: 600; justify-content: center; }
.ql-kbd { font-size: .6875rem; opacity: .7; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ql-examples { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; font-size: .75rem; color: var(--color-base-500); }
.ql-examples a { border-radius: 999px; border: 1px solid var(--color-base-300); padding: .15rem .55rem; font-size: .75rem; color: inherit; text-decoration: none; }
.dark .ql-examples a { border-color: var(--color-base-700); }
.ql-examples a[aria-current="true"] { border-color: var(--color-primary-500); color: var(--color-primary-700); background: color-mix(in oklab, var(--color-primary-500) 12%, transparent); }
.dark .ql-examples a[aria-current="true"] { color: var(--color-primary-300); }
.ql-method { display: flex; gap: .4rem; align-items: center; font-size: .75rem; }
.ql-method select { height: 1.9rem; font-size: .75rem; }

.ql-results { min-width: 0; display: flex; flex-direction: column; gap: .75rem; }
.ql-tabs { display: flex; gap: .15rem; border-bottom: 1px solid var(--color-base-200); overflow-x: auto; }
.dark .ql-tabs { border-color: var(--color-base-800); }
.ql-tabs button { border: 0; background: none; padding: .55rem .75rem; font-size: .8125rem; font-weight: 500; color: var(--color-base-500);
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.ql-tabs button:hover { color: inherit; }
.ql-tabs button[aria-selected="true"] { color: var(--color-primary-700); border-bottom-color: var(--color-primary-600); }
.dark .ql-tabs button[aria-selected="true"] { color: var(--color-primary-300); }
.ql-tabs .ql-count { margin-left: .3rem; font-size: .6875rem; opacity: .7; font-weight: 400; }
[data-tab-panel][hidden] { display: none !important; }
.ql-panel { border: 1px solid var(--color-base-200); border-radius: .75rem; overflow: hidden; background: #fff; }
.dark .ql-panel { border-color: var(--color-base-800); background: transparent; }
.ql-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .75rem; padding: .65rem 1rem;
  border-bottom: 1px solid var(--color-base-200); background: var(--color-base-50); font-size: .8125rem; }
.dark .ql-panel-head { border-color: var(--color-base-800); background: color-mix(in oklab, var(--color-base-900) 70%, transparent); }
.ql-panel-head strong { font-weight: 600; }
.ql-meta { display: flex; flex-wrap: wrap; gap: .2rem .7rem; color: var(--color-base-500); font-size: .75rem; }
.ql-table-wrap { max-height: 42rem; overflow: auto; }
.ql-table { width: 100%; font-size: .75rem; border-collapse: collapse; }
.ql-table th { position: sticky; top: 0; background: #fff; text-align: left; padding: .5rem .75rem; font-weight: 600; border-bottom: 1px solid var(--color-base-200); white-space: nowrap; z-index: 1; }
.dark .ql-table th { background: var(--color-base-900); border-color: var(--color-base-800); }
.ql-table th code { display: block; font-size: .625rem; font-weight: 400; color: var(--color-base-500); }
.ql-table td { padding: .38rem .75rem; border-bottom: 1px solid var(--color-base-100); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; vertical-align: top; max-width: 32rem; overflow-wrap: anywhere; }
.dark .ql-table td { border-color: var(--color-base-800); }
.ql-table td[data-kind="number"] { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ql-table tbody tr:hover td { background: color-mix(in oklab, var(--color-primary-500) 6%, transparent); }
/* A served answer that does not cover its whole window says so above its own rows: an
   unread stretch must never read as an empty one. */
.ql-coverage-gap { margin: .75rem 1.5rem 0; padding: .75rem .875rem; border: 1px solid var(--color-amber-300, #fcd34d); border-left-width: 3px; border-radius: .5rem; background: var(--color-amber-50, #fffbeb); color: var(--color-base-700); font-size: .8125rem; line-height: 1.5; }
.ql-coverage-gap strong { font-weight: 600; }
.dark .ql-coverage-gap { background: color-mix(in srgb, #fcd34d 10%, transparent); border-color: color-mix(in srgb, #fcd34d 45%, transparent); color: var(--color-base-200); }
.ql-empty { padding: 3rem 1.5rem; text-align: center; color: var(--color-base-500); font-size: .875rem; }
.ql-empty strong { display: block; color: inherit; font-weight: 600; margin-bottom: .25rem; }
.ql-code { margin: 0; padding: .85rem 1rem; font-size: .75rem; line-height: 1.5; overflow-x: auto; background: var(--color-base-50); white-space: pre-wrap; overflow-wrap: anywhere; }
.dark .ql-code { background: var(--color-base-950); }
.ql-statement + .ql-statement { border-top: 1px solid var(--color-base-200); }
.dark .ql-statement + .ql-statement { border-color: var(--color-base-800); }
.ql-params { width: 100%; font-size: .75rem; }
.ql-params td { padding: .3rem 1rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; border-top: 1px solid var(--color-base-100); overflow-wrap: anywhere; }
.dark .ql-params td { border-color: var(--color-base-800); }
.ql-params td:first-child { color: var(--color-base-500); width: 9rem; white-space: nowrap; }
[aria-busy="true"] > .ql-panel, [aria-busy="true"] > .ql-tabs, [aria-busy="true"] > [data-tab-panel] { opacity: .5; transition: opacity .15s; }
.ql-section { border: 1px solid var(--color-base-200); border-radius: .75rem; }
.dark .ql-section { border-color: var(--color-base-800); }
.ql-section > summary { padding: .75rem 1rem; font-weight: 600; font-size: .875rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.ql-section > summary .ql-hint { font-weight: 400; }
.ql-section > summary::after { content: "›"; font-size: 1.1rem; opacity: .5; transform: rotate(90deg); transition: transform .12s; }
.ql-section[open] > summary::after { transform: rotate(-90deg); }
.ql-section > summary::-webkit-details-marker { display: none; }
.ql-section-body { padding: 0 1rem 1rem; }
.ql-about { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .ql-about { grid-template-columns: 1fr 1fr; } }
.ql-about h3 { font-size: .8125rem; font-weight: 600; margin: 0 0 .35rem; }
.ql-kv { font-size: .8125rem; margin: 0; }
.ql-kv dt { font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-base-500); margin-top: .55rem; }
.ql-kv dd { margin: .1rem 0 0; }
.ql-pill-list { display: flex; flex-wrap: wrap; gap: .3rem; }
.ql-pill-list span { border-radius: .4rem; background: color-mix(in oklab, var(--color-base-500) 10%, transparent); padding: .25rem .5rem; font-size: .75rem; }
.ql-pill-list code { display: block; font-size: .625rem; opacity: .7; }
.ql-cards { display: grid; gap: .75rem; padding: .75rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .ql-cards { grid-template-columns: 1fr 1fr; } }
.ql-card { border: 1px solid var(--color-base-200); border-radius: .6rem; padding: .8rem .9rem; font-size: .8125rem; }
.dark .ql-card { border-color: var(--color-base-800); }
.ql-card h3 { font-size: .9375rem; font-weight: 600; margin: 0; }
.ql-card-meta { display: grid; gap: .5rem; grid-template-columns: 1fr 1fr; margin-top: .55rem; font-size: .75rem; }
.ql-card-meta div > span:first-child { display: block; font-size: .625rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-base-500); }
.ql-members table { font-size: .8125rem; }
.ql-members-filters { display: grid; gap: .5rem; padding: .75rem 1rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); border-bottom: 1px solid var(--color-base-200); }
.dark .ql-members-filters { border-color: var(--color-base-800); }
.ql-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ql-field, .ql-range > * { min-width: 0; }
.ql-range .ql-input { min-width: 0; padding: 0 .45rem; font-size: .8125rem; }
.ql-console-foot .ql-input { min-width: 0; }
/* datetime-local widgets need ~11rem; in the console the two bounds stack */
.ql-console .ql-range { grid-template-columns: 1fr; }
.ql-console .ql-range .ql-input { padding: 0 .65rem; font-size: .875rem; }

/* pass two: fewer labels, tighter console */
.ql-console .ql-method { padding: .7rem 1rem 0; }
.ql-console .ql-examples { padding: .7rem 1rem 0; }
.ql-field.ql-inline { flex-direction: row; align-items: center; gap: .6rem; }
.ql-field.ql-inline > .ql-label { flex: 0 0 2.6rem; flex-direction: row; align-items: baseline; gap: .5rem; color: var(--color-base-500); font-weight: 500; font-size: .75rem; }
.ql-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.ql-row-3 { grid-template-columns: 1fr 1fr 1fr; }
.ql-suffix { position: relative; display: block; min-width: 0; }
.ql-suffix > input { padding-right: 2.6rem; }
.ql-suffix > span { position: absolute; right: .65rem; top: 50%; transform: translateY(-50%); font-size: .75rem; color: var(--color-base-500); pointer-events: none; }
.ql-foot-row { grid-template-columns: minmax(0, 1fr) 6.5rem; }
.ql-menu { position: absolute; z-index: 50; margin-top: .25rem; max-height: 18rem; width: 100%; overflow: auto; border-radius: .6rem; border: 1px solid var(--color-base-200); background: #fff; padding: .25rem; box-shadow: 0 10px 30px rgba(0,0,0,.14); }
.dark .ql-menu { background: var(--color-base-900); border-color: var(--color-base-700); }
.ql-menu [role="option"] { padding: .45rem .6rem; border-radius: .4rem; font-size: .8125rem; }
.ql-menu [role="option"]:hover, .ql-menu [role="option"][aria-selected="true"] { background: color-mix(in oklab, var(--color-primary-500) 12%, transparent); }
.ql-feedback { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ql-feedback.ql-feedback-error { position: static; width: auto; height: auto; clip: auto; overflow: visible; color: #dc2626; font-size: .8125rem; }
.ql-card-when { margin: .25rem 0 0; font-size: .8125rem; }
.ql-card-where { margin: .15rem 0 0; font-size: .8125rem; color: var(--color-base-500); }
.ql-card .ql-chips { margin-top: .5rem; }
.ql-card .ql-hint { margin: .3rem 0 0; }
.ql-table-text td { font-family: inherit; font-size: .8125rem; }
.ql-members-filters { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.ql-members-filters .ql-btn { height: 2.375rem; justify-content: center; }
.ql-section > summary .ql-count { font-weight: 500; color: var(--color-base-500); margin-left: .35rem; }

.ql-segmented-sm { padding: .15rem; }
.ql-segmented-sm button { height: 1.6rem; padding: 0 .55rem; font-size: .7rem; flex: 0 0 auto; }

/* ── Directories (data services, time series, saved context): level switch, one search,
   facets as a quiet side column, a text table with one action per row ─────────────── */
.ql-levels { display: inline-flex; gap: .2rem; padding: .2rem; border-radius: .6rem; background: color-mix(in oklab, var(--color-base-500) 12%, transparent); width: fit-content; }
.ql-levels a { padding: .35rem .8rem; border-radius: .45rem; font-size: .8125rem; font-weight: 500; color: var(--color-base-500); text-decoration: none; }
.ql-levels a[aria-current="page"] { background: #fff; color: var(--color-primary-700); box-shadow: 0 1px 2px rgba(0,0,0,.14); }
.dark .ql-levels a[aria-current="page"] { background: var(--color-base-800); color: var(--color-primary-300); }
.ql-head-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.ql-head-row .ql-actions a { font-size: .8125rem; color: var(--color-primary-600); text-decoration: none; }
.dark .ql-head-row .ql-actions a { color: var(--color-primary-400); }
.ql-head-row .ql-actions a:hover { text-decoration: underline; }
.ql-search { display: flex; align-items: center; gap: .6rem; border: 1px solid var(--color-base-300); border-radius: .75rem; background: #fff; padding: 0 .4rem 0 .9rem; height: 2.9rem; }
.dark .ql-search { background: var(--color-base-950); border-color: var(--color-base-700); }
.ql-search:focus-within { border-color: var(--color-primary-500); outline: 2px solid color-mix(in oklab, var(--color-primary-500) 45%, transparent); }
.ql-search input[type="search"] { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font-size: 1rem; height: 100%; color: inherit; outline: none; }
.ql-search input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
.ql-search select { height: 2.1rem; font-size: .8125rem; border-radius: .5rem; border: 1px solid var(--color-base-300); background: transparent; padding: 0 1.4rem 0 .5rem; color: inherit; }
.dark .ql-search select { border-color: var(--color-base-700); }
.ql-search .ql-status { font-size: .75rem; color: var(--color-base-500); white-space: nowrap; padding-right: .5rem; }
.ql-search .ql-btn { height: 2.1rem; }
.ql-directory { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (min-width: 1100px) { .ql-directory { grid-template-columns: 15rem minmax(0, 1fr); } .ql-facets { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto; } }
.ql-facets { display: flex; flex-direction: column; gap: 1rem; font-size: .8125rem; }
.ql-facets details { border: 0; }
.ql-facets summary { display: flex; align-items: center; justify-content: space-between; padding: .25rem 0; font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-base-500); list-style: none; }
.ql-facets summary::-webkit-details-marker { display: none; }
.ql-facets summary::after { content: "›"; font-size: 1rem; opacity: .5; transform: rotate(90deg); }
.ql-facets details[open] summary::after { transform: rotate(-90deg); }
.ql-facets [data-facet-list] { display: flex; flex-direction: column; gap: .1rem; max-height: 16rem; overflow: auto; padding: .15rem 0; }
.ql-facets [data-facet-list] a, .ql-facets [data-facet-list] a[class] { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .3rem .5rem; border-radius: .4rem; font-size: .8125rem; color: inherit; text-decoration: none; }
.ql-facets [data-facet-list] a:hover { background: color-mix(in oklab, var(--color-primary-500) 8%, transparent); }
.ql-facets [data-facet-list] a[aria-current="true"], .ql-facets [data-facet-list] a.ql-on { background: color-mix(in oklab, var(--color-primary-500) 14%, transparent); color: var(--color-primary-700); font-weight: 600; }
.dark .ql-facets [data-facet-list] a[aria-current="true"], .dark .ql-facets [data-facet-list] a.ql-on { color: var(--color-primary-300); }
.ql-facets [data-facet-list] span:last-child { color: var(--color-base-500); font-size: .75rem; font-weight: 400; }
.ql-facets input[type="search"] { height: 2rem; font-size: .8125rem; margin-bottom: .25rem; }
.ql-facets .ql-hint { padding: .2rem .5rem; }
.ql-active { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; min-height: 1.5rem; }
.ql-active a { display: inline-flex; align-items: center; gap: .3rem; border-radius: 999px; padding: .2rem .35rem .2rem .6rem; font-size: .75rem; font-weight: 500; border: 1px solid var(--color-primary-500); color: var(--color-primary-700); background: color-mix(in oklab, var(--color-primary-500) 10%, transparent); text-decoration: none; }
.dark .ql-active a { color: var(--color-primary-300); }
.ql-active a::after { content: "×"; opacity: .6; font-size: .9rem; line-height: 1; }
.ql-active .ql-status { margin-left: auto; font-size: .75rem; color: var(--color-base-500); }
.ql-table-text .ql-primary { font-weight: 600; color: inherit; text-decoration: none; }
.ql-table-text .ql-primary:hover { color: var(--color-primary-700); text-decoration: underline; }
.ql-table-text td .ql-hint { display: block; margin-top: .1rem; max-width: 40rem; }
.ql-table-text .ql-action { white-space: nowrap; text-align: right; }
.ql-table-text .ql-action a { margin-left: .35rem; }
.ql-more-row { text-align: center; padding: .5rem 0; min-height: 2rem; }
.ql-kind-pill { border-radius: 999px; padding: .15rem .55rem; font-size: .6875rem; font-weight: 500; background: color-mix(in oklab, var(--color-base-500) 12%, transparent); white-space: nowrap; }
.ql-kind-pill[data-kind="timeseries"] { background: color-mix(in oklab, #2563eb 16%, transparent); color: #1d4ed8; }
.dark .ql-kind-pill[data-kind="timeseries"] { color: #93c5fd; }
.ql-kind-pill[data-kind="event"] { background: color-mix(in oklab, #7c3aed 16%, transparent); color: #6d28d9; }
.dark .ql-kind-pill[data-kind="event"] { color: #c4b5fd; }
.ql-kind-pill[data-kind="lookup"] { background: color-mix(in oklab, #d97706 18%, transparent); color: #b45309; }
.dark .ql-kind-pill[data-kind="lookup"] { color: #fcd34d; }
/* saved context cards */
.ql-cardgrid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.ql-cardlink { display: flex; flex-direction: column; gap: .4rem; border: 1px solid var(--color-base-200); border-radius: .75rem; padding: .9rem 1rem; text-decoration: none; color: inherit; background: #fff; transition: border-color .12s; }
.dark .ql-cardlink { border-color: var(--color-base-800); background: transparent; }
.ql-cardlink:hover { border-color: var(--color-primary-500); }
.ql-cardlink h3 { margin: 0; font-size: .9375rem; font-weight: 600; }
.ql-cardlink .ql-cardlink-head { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.ql-cardlink .material-symbols-outlined { font-size: 1.25rem; color: var(--color-primary-600); }
.ql-cardlink .ql-hint { margin: 0; }
.ql-section-title { font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-base-500); margin: .25rem 0 .5rem; }
.ql-empty-dashed { border: 1px dashed var(--color-base-300); border-radius: .75rem; padding: 2rem; text-align: center; font-size: .875rem; color: var(--color-base-500); }
/* family variant bar */
.ql-variant { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .7rem 1rem; }
.ql-variant .ql-input { height: 2rem; font-size: .8125rem; width: auto; min-width: 8rem; }
.ql-variant .ql-btn { height: 2rem; }
.ql-variant-now { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem; font-size: .8125rem; }
.ql-variant-now strong { font-weight: 600; }
.ql-variant-now .ql-hint { font-size: .75rem; }

/* popovers: a trigger styled like an input, and a panel that FLOATS over the page.
   In flow, a panel of twenty controls pushes everything below it down and is as narrow as
   the rail that holds it — so it stacks into one long column and scrolls. Floating, it
   takes the width its content wants and the page underneath stays where it was. */
.ql-pop { position: relative; }
.ql-pop > summary { list-style: none; }
.ql-pop > summary::-webkit-details-marker { display: none; }
.ql-pop-trigger { display: flex; align-items: center; justify-content: space-between; gap: .5rem; cursor: pointer; }
/* a trigger is one line: a long filter summary is cut with an ellipsis, never wrapped over the controls under it */
.ql-pop-trigger > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ql-pop-trigger .ql-caret { font-size: .7rem; opacity: .6; }
.ql-pop[open] > .ql-pop-trigger { border-color: var(--color-primary-500); }
.ql-pop-panel { position: absolute; z-index: 40; left: 0; top: calc(100% + .35rem); min-width: 100%; width: max-content; max-width: min(42rem, 68vw); display: flex; flex-direction: column; gap: .55rem; padding: .75rem; max-height: 72vh; overflow: auto; border-radius: .6rem; border: 1px solid var(--color-base-200); background: var(--color-base-50); box-shadow: 0 14px 34px rgba(0,0,0,.22); }
.dark .ql-pop-panel { background: var(--color-base-900); border-color: var(--color-base-700); box-shadow: 0 14px 34px rgba(0,0,0,.55); }
.ql-checklist { display: grid; grid-template-columns: 1fr; gap: .1rem; }
.ql-checklist label { display: flex; align-items: center; gap: .45rem; padding: .25rem .4rem; border-radius: .4rem; font-size: .8125rem; cursor: pointer; min-width: 0; }
.ql-checklist label > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ql-checklist label:has(input:disabled) { cursor: default; }
.ql-checklist input:disabled { opacity: .5; }
.ql-checklist label:hover { background: color-mix(in oklab, var(--color-primary-500) 8%, transparent); }
.ql-checklist input { width: .9rem; height: .9rem; accent-color: var(--color-primary-600); }
.ql-checklist code { margin-left: auto; flex: none; font-size: .625rem; color: var(--color-base-500); }
#query-response table.ql-table thead th { cursor: pointer; user-select: none; }
#query-response th .ql-th::after { display: inline-block; width: 1em; color: var(--color-primary-600); }
#query-response th[aria-sort="ascending"] .ql-th::after { content: " ↑"; }
#query-response th[aria-sort="descending"] .ql-th::after { content: " ↓"; }
.ql-kv-rows { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .45rem 1rem; margin: 0; font-size: .8125rem; align-items: baseline; }
.ql-kv-rows dt { color: var(--color-base-500); }
.ql-kv-rows dd { margin: 0; min-width: 0; }
.ql-kv-rows code { display: block; font-size: .625rem; color: var(--color-base-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ql-about p { margin: 0 0 .6rem; font-size: .8125rem; }
.ql-metaline a { color: inherit; text-decoration: none; border-bottom: 1px dotted transparent; }
.ql-metaline a:hover { color: var(--color-primary-600); border-bottom-color: currentColor; }
.dark .ql-metaline a:hover { color: var(--color-primary-300); }
.ql-editor { min-height: 7.5rem; padding: .4rem 0; }
.ql-editor .monaco-editor, .ql-editor .monaco-editor-background, .ql-editor .monaco-editor .margin { background: transparent !important; }
pre[data-lang="sql"].monaco-editor { background: transparent; padding: .9rem 1rem; }
#period-summary { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .8125rem; }
.ql-statement .ql-panel-head { background: transparent; }
.ql-statement .ql-meta strong { color: inherit; }
.ql-statement .ql-toolbar form { display: inline; }
/* method prefix: the input method and its first field share one box */
.ql-addon { flex-direction: row; align-items: stretch; border: 1px solid var(--color-base-300); border-radius: .5rem; background: #fff; overflow: hidden; }
.dark .ql-addon { border-color: var(--color-base-700); background: var(--color-base-950); }
.ql-addon:focus-within { border-color: var(--color-primary-500); outline: 2px solid color-mix(in oklab, var(--color-primary-500) 45%, transparent); }
.ql-addon .ql-addon-select { flex: 0 0 auto; max-width: 45%; border: 0; border-right: 1px solid var(--color-base-200); background: color-mix(in oklab, var(--color-base-500) 8%, transparent); color: var(--color-base-500); font-size: .8125rem; font-weight: 500; padding: 0 1.5rem 0 .6rem; border-radius: 0; cursor: pointer; }
.dark .ql-addon .ql-addon-select { border-color: var(--color-base-800); }
.ql-addon .ql-input, .ql-addon #series-picker { flex: 1 1 auto; min-width: 0; }
.ql-addon .ql-input { border: 0; border-radius: 0; background: transparent; }
.ql-addon .ql-input:focus { outline: none; }
.ql-addon > .ql-hint, .ql-addon > #series-search-status { display: none; }

.ql-metaline { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 0; margin: 0; font-size: .8125rem; color: var(--color-base-500); }
.ql-metaline > * + *::before { content: "·"; margin: 0 .5rem; opacity: .6; }
.ql-metaline a { color: var(--color-primary-600); text-decoration: none; }
.dark .ql-metaline a { color: var(--color-primary-400); }
.ql-metaline a:hover { text-decoration: underline; }
.ql-metaline .ql-dot { margin-right: .3rem; }

/* ── dashboard, diff, import report (pass five: every custom page on the shared anatomy) */
.ql-h1 .material-symbols-outlined { font-size: 1.35rem; color: var(--color-primary-600); vertical-align: -.2rem; margin-right: .35rem; }
.ql-kpis { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.ql-kpi { display: flex; flex-direction: column; gap: .15rem; border: 1px solid var(--color-base-200); border-radius: .75rem; padding: .8rem 1rem; text-decoration: none; color: inherit; background: #fff; min-width: 0; }
.dark .ql-kpi { border-color: var(--color-base-800); background: var(--color-base-900); }
.ql-kpi:hover { border-color: var(--color-primary-500); }
.ql-kpi-title { font-size: .75rem; color: var(--color-base-500); }
.ql-kpi-value { font-size: 1.6rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
.ql-kpi-danger .ql-kpi-value { color: #b91c1c; }
.dark .ql-kpi-danger .ql-kpi-value { color: #f87171; }
.ql-kpi .ql-hint { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ql-kpis-inline { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); padding: .75rem 1rem 1rem; }
.ql-kpis-inline .ql-kpi { padding: .55rem .8rem; }
.ql-kpis-inline .ql-kpi-value { font-size: 1.25rem; }
.ql-dash-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 1280px) { .ql-dash-grid { grid-template-columns: 1fr 1fr; } }
.ql-diff span { display: block; }
.ql-diff-add { background: color-mix(in oklab, #16a34a 14%, transparent); }
.ql-diff-del { background: color-mix(in oklab, #dc2626 14%, transparent); }
.ql-diff-hunk { color: var(--color-base-500); }
.ql-tag-create { border-color: #16a34a; color: #15803d; }
.ql-tag-update { border-color: var(--color-primary-500); color: var(--color-primary-700); }
.ql-tag-skip { border-color: #d97706; color: #b45309; }
.ql-tag-error { border-color: #dc2626; color: #b91c1c; }
.ql-tag-published { background: color-mix(in oklab, var(--color-primary-500) 12%, transparent); border-color: transparent; color: var(--color-primary-700); }
.dark .ql-tag-create { color: #4ade80; } .dark .ql-tag-skip { color: #fbbf24; } .dark .ql-tag-error { color: #f87171; } .dark .ql-tag-update, .dark .ql-tag-published { color: var(--color-primary-300); }
.ql-finding-blocking { font-size: .75rem; color: #b91c1c; }
.dark .ql-finding-blocking { color: #f87171; }
.ql-table a.ql-primary { font-weight: 600; color: inherit; text-decoration: none; }
.ql-table a.ql-primary:hover { color: var(--color-primary-600); }
.ql-table td.ql-action { text-align: right; white-space: nowrap; }
.ql-table td.ql-action .ql-btn + .ql-btn { margin-left: .35rem; }
.ql-table td > .ql-hint { display: block; }
.ql-dash-grid .ql-table td, .ql-dash-grid .ql-table th { white-space: nowrap; }
.ql-dash-grid .ql-table td:nth-child(2) { white-space: normal; min-width: 12rem; }

/* member browser as a side panel (wide screens); the same <details> stays in flow on narrow ones */
html.ql-panel-open { overflow: hidden; }
html.ql-panel-open::after { content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, .28); z-index: 50; }
@media (min-width: 900px) {
  .ql-members[open] { position: fixed; top: 0; right: 0; bottom: 0; width: min(46rem, 100vw); z-index: 60; display: flex; flex-direction: column; border-radius: 0; border: 0; border-left: 1px solid var(--color-base-200); background: #fff; box-shadow: -16px 0 40px rgba(0, 0, 0, .18); }
  .dark .ql-members[open] { background: var(--color-base-900); border-color: var(--color-base-800); }
  .ql-members[open] > summary { border-bottom: 1px solid var(--color-base-200); padding: .9rem 1.1rem; flex: none; }
  .dark .ql-members[open] > summary { border-color: var(--color-base-800); }
  .ql-members[open] > summary::after { content: "✕"; transform: none; font-size: .9rem; opacity: .7; }
  .ql-members[open] > .ql-members-filters { flex: none; }
  .ql-members[open] { overflow: auto; }
  .ql-members[open] > summary { position: sticky; top: 0; z-index: 1; background: #fff; }
  .dark .ql-members[open] > summary { background: var(--color-base-900); }
  .ql-members[open] #member-scroll { max-height: none !important; overflow: visible !important; }
  .ql-members[open] #member-more, .ql-members[open] #member-status { flex: none; }
}

/* result tables: one line per cell, numbers right-aligned in head and body, long values clipped with the full text on hover */
.ql-table th { vertical-align: bottom; }
.ql-table th .ql-th { display: inline-block; white-space: nowrap; }
.ql-table th[data-type="number"], .ql-table th[data-type="int"], .ql-table th[data-type="float"], .ql-table th[data-type="decimal"] { text-align: right; }
.ql-table td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22rem; }
.ql-table-text td { white-space: normal; overflow: visible; text-overflow: clip; max-width: none; }
.ql-card-meta { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); margin: .55rem 0 0; }
.ql-card-meta div { min-width: 0; }
.ql-card-meta dt { font-size: .625rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-base-500); }
.ql-card-meta dd { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
/* co-branding: credited source and publication */
.ql-attribution { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; margin: 0; font-size: .8125rem; }
.ql-attribution-role { color: var(--color-base-500); }
.ql-attribution a, .ql-attribution-name { display: inline-flex; align-items: center; gap: .4rem; color: inherit; text-decoration: none; font-weight: 500; }
.ql-attribution a:hover { color: var(--color-primary-600); }
.ql-attribution img, .ql-logo { height: 1.25rem; width: auto; max-width: 6rem; object-fit: contain; vertical-align: middle; }
.ql-kv-rows .ql-logo { margin-right: .4rem; }
/* member browser: hidden in flow on wide screens (the meta line and Browse all open the panel); scrolls inside the panel */
@media (min-width: 900px) {
  .ql-members:not([open]) { display: none; }
}
.ql-credit { display: inline-flex; align-items: center; gap: .35rem; color: inherit; text-decoration: none; }
.ql-credit:hover { color: var(--color-primary-600); }
.ql-credit img { height: 1rem; width: auto; max-width: 5rem; object-fit: contain; }
.ql-search .ql-status { margin-left: auto; }

/* saved context cards: everything edits where it stands */
.ql-ctxcard { display: flex; flex-direction: column; gap: .35rem; border: 1px solid var(--color-base-200); border-radius: .9rem; padding: .85rem .95rem .8rem; background: #fff; transition: border-color .12s, box-shadow .12s, opacity .12s; }
.dark .ql-ctxcard { border-color: var(--color-base-800); background: color-mix(in oklab, var(--color-base-900) 60%, transparent); }
.ql-ctxcard:hover, .ql-ctxcard:focus-within { border-color: var(--color-primary-500); box-shadow: 0 6px 20px rgba(0, 0, 0, .06); }
.ql-ctxcard.ql-dragging { opacity: .4; border-style: dashed; box-shadow: none; }
.ql-ctxcard-head { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.ql-ctxcard-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: .55rem; border: 0; background: color-mix(in oklab, var(--color-primary-500) 10%, transparent); color: var(--color-primary-600); cursor: pointer; flex: none; padding: 0; }
.ql-ctxcard-icon .material-symbols-outlined { font-size: 1.15rem; }
.ql-ctxcard-icon-lg { width: 2.4rem; height: 2.4rem; }
.ql-ctxcard-icon-lg .material-symbols-outlined { font-size: 1.4rem; }
button.ql-ctxcard-icon:hover { background: color-mix(in oklab, var(--color-primary-500) 18%, transparent); }
.ql-inline { flex: 1 1 auto; min-width: 0; border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: transparent; color: inherit; padding: .1rem 0; font: inherit; outline: 0; }
.ql-inline:hover { border-bottom-color: var(--color-base-300); }
.ql-inline:focus { border-bottom-color: var(--color-primary-500); }
.ql-inline::placeholder { color: var(--color-base-400); }
.ql-inline-title { font-size: .9375rem; font-weight: 600; margin: 0; }
.ql-inline-description { font-size: .8125rem; color: var(--color-base-500); }
.ql-inline-h1 { font-size: 1.5rem; font-weight: 600; }
.ql-inline-lead { font-size: .9375rem; color: var(--color-base-500); max-width: 64rem; }
.ql-ctxcard-description { margin: 0; }
.ql-ctxcard-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .35rem; }
.ql-ctxcard-foot .ql-hint { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.ql-ctxcard-foot .ql-hint:hover { color: var(--color-primary-600); }
.ql-drag-handle { cursor: grab; color: var(--color-base-400); font-size: .9rem; letter-spacing: -.2em; user-select: none; }
.ql-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: .45rem; border: 0; background: transparent; color: var(--color-base-500); cursor: pointer; flex: none; }
.ql-iconbtn .material-symbols-outlined { font-size: 1.1rem; }
.ql-iconbtn:hover { background: color-mix(in oklab, var(--color-primary-500) 10%, transparent); color: var(--color-primary-600); }
.ql-ctxcard .ql-ctxcard-archive { opacity: 0; margin-left: auto; }
.ql-ctxcard:hover .ql-ctxcard-archive, .ql-ctxcard:focus-within .ql-ctxcard-archive, .ql-ctxcard-archive.ql-armed { opacity: 1; }
.ql-ctxcard-archive.ql-armed, .ql-btn.ql-armed { color: #b91c1c; background: color-mix(in oklab, #dc2626 12%, transparent); }
.ql-cardgrid.ql-drop-target { outline: 2px dashed var(--color-primary-500); outline-offset: 6px; border-radius: .75rem; min-height: 4rem; }
.ql-iconrow { display: flex; flex-wrap: wrap; gap: .3rem; }
.ql-iconrow label { position: relative; cursor: pointer; }
.ql-iconrow input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ql-iconrow span { display: inline-flex; width: 2.1rem; height: 2.1rem; align-items: center; justify-content: center; border-radius: .5rem; border: 1px solid var(--color-base-200); color: var(--color-base-500); font-size: 1.2rem; }
.dark .ql-iconrow span { border-color: var(--color-base-700); }
.ql-iconrow input:checked + span { border-color: var(--color-primary-500); color: var(--color-primary-600); background: color-mix(in oklab, var(--color-primary-500) 12%, transparent); }
.ql-iconrow input:focus-visible + span { outline: 2px solid var(--color-primary-500); outline-offset: 1px; }
.dark .ql-seg { position: relative; }
.ql-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ql-seg span { display: inline-flex; align-items: center; height: 1.85rem; padding: 0 .7rem; border-radius: .4rem; font-size: .75rem; font-weight: 500; cursor: pointer; }
.ql-seg input:checked + span { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.14); color: var(--color-primary-700); }
.dark .ql-seg input:checked + span { background: var(--color-base-800); color: var(--color-primary-300); }
.ql-seg input:focus-visible + span { outline: 2px solid var(--color-primary-500); }
.ql-checklist-wide { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
/* the icon picker: anchored under the icon button */
.ql-iconpicker { position: absolute; z-index: 70; width: min(22rem, calc(100vw - 2rem)); padding: .6rem; border: 1px solid var(--color-base-200); border-radius: .75rem; background: #fff; box-shadow: 0 18px 48px rgba(0, 0, 0, .18); display: flex; flex-direction: column; gap: .5rem; }
.dark .ql-iconpicker { background: var(--color-base-900); border-color: var(--color-base-700); }
.ql-icongrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.2rem, 1fr)); gap: .25rem; max-height: 16rem; overflow: auto; }
.ql-icongrid button { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: .5rem; border: 1px solid transparent; background: transparent; color: var(--color-base-600); cursor: pointer; padding: 0; }
.dark .ql-icongrid button { color: var(--color-base-300); }
.ql-icongrid button:hover, .ql-icongrid button:focus-visible { border-color: var(--color-primary-500); color: var(--color-primary-600); background: color-mix(in oklab, var(--color-primary-500) 10%, transparent); }
.ql-icongrid .material-symbols-outlined { font-size: 1.25rem; }
/* ── dashboard: search first, the catalogue at a glance, operations last */
.ql-hero { display: flex; flex-direction: column; gap: .7rem; padding: 1.1rem 1.2rem 1rem; border: 1px solid var(--color-base-200); border-radius: 1rem; background: linear-gradient(135deg, color-mix(in oklab, var(--color-primary-500) 9%, #fff), #fff 70%); }
.dark .ql-hero { border-color: var(--color-base-800); background: linear-gradient(135deg, color-mix(in oklab, var(--color-primary-500) 16%, var(--color-base-900)), var(--color-base-900) 70%); }
.ql-search-hero { height: 3rem; border-radius: .9rem; }
.ql-search-hero > .material-symbols-outlined { color: var(--color-base-500); font-size: 1.35rem; }
.ql-search-hero input[type="search"] { font-size: 1.05rem; }
.ql-hero-line { margin: 0; font-size: .8125rem; color: var(--color-base-600); }
.dark .ql-hero-line { color: var(--color-base-400); }
.ql-hero-line > span:first-child { color: var(--color-base-500); }
.ql-domains .ql-tag { text-decoration: none; color: inherit; background: #fff; }
.dark .ql-domains .ql-tag { background: var(--color-base-900); border-color: var(--color-base-700); }
.ql-domains .ql-tag:hover { border-color: var(--color-primary-500); color: var(--color-primary-700); }
.dark .ql-domains .ql-tag:hover { color: var(--color-primary-300); }
.ql-domains .ql-count { color: var(--color-base-500); font-variant-numeric: tabular-nums; margin-left: .15rem; }
.ql-tiles { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.ql-tile { position: relative; padding: .9rem 1rem .85rem 1rem; }
.ql-tile-icon { position: absolute; top: .8rem; right: .9rem; font-size: 1.35rem; color: var(--color-primary-600); opacity: .8; }
.dark .ql-tile-icon { color: var(--color-primary-400); }
.ql-tile .ql-kpi-value { font-size: 1.9rem; }
.ql-section-row { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.ql-section-row .ql-section-title { margin: .25rem 0 .5rem; }
.ql-ctxtile { display: flex; flex-direction: column; gap: .35rem; border: 1px solid var(--color-base-200); border-radius: .9rem; padding: .8rem .95rem; background: #fff; min-width: 0; }
.dark .ql-ctxtile { border-color: var(--color-base-800); background: var(--color-base-900); }
.ql-ctxtile:hover { border-color: var(--color-primary-500); }
.ql-ctxtile-head { display: flex; align-items: center; gap: .55rem; min-width: 0; color: inherit; text-decoration: none; }
.ql-ctxtile-name { font-weight: 600; font-size: .9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ql-ctxtile .ql-hint { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ql-ctxtile-go { align-self: flex-start; height: 1.9rem; margin-top: .15rem; }
.ql-servicecard h3 { font-size: 1rem; }
.ql-servicecard .ql-cardlink-head { justify-content: space-between; }
.ql-servicecard-source { font-size: .75rem; color: var(--color-base-500); margin-top: auto; }
.ql-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ql-dash-list { list-style: none; margin: 0; padding: .25rem 0; }
.ql-dash-list li { display: flex; align-items: center; gap: .6rem; padding: .5rem 1rem; border-top: 1px solid var(--color-base-100); min-width: 0; font-size: .875rem; }
.dark .ql-dash-list li { border-top-color: var(--color-base-800); }
.ql-dash-list li:first-child { border-top: 0; }
.ql-dash-list-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; text-decoration: none; font-weight: 500; }
a.ql-dash-list-label:hover { color: var(--color-primary-600); }
.ql-dash-list .ql-credit { font-size: .75rem; color: var(--color-base-500); white-space: nowrap; }
.ql-dash-list time { white-space: nowrap; margin: 0; }
.ql-dash-list .ql-num { font-variant-numeric: tabular-nums; color: var(--color-base-600); }
.dark .ql-dash-list .ql-num { color: var(--color-base-300); }
.ql-sources li { justify-content: space-between; }
.ql-ops .ql-panel-head { gap: .5rem 1rem; }
.ql-ops .ql-actions { margin-left: auto; }
.ql-ops-tables { padding: 0 1rem 1rem; }
.ql-ops-tables .ql-panel { box-shadow: none; }
.ql-kpi-warn .ql-kpi-value { color: #b45309; }
.dark .ql-kpi-warn .ql-kpi-value { color: #fbbf24; }
.ql-dash-list li.ql-dash-row { flex-direction: column; align-items: stretch; gap: .15rem; }
.ql-dash-row-main { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.ql-dash-row-sub { margin: 0; padding-left: .1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ql-ops .ql-kpis-inline { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
/* the event filter panel: one field per published filter, two across when there is room */
.ql-filtergrid { display: grid; gap: .5rem .6rem; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); max-height: 24rem; overflow: auto; padding-right: .15rem; }
.ql-filtergrid .ql-field { gap: .2rem; min-width: 0; }
.ql-filtergrid .ql-field:has(.ql-chipset) { grid-column: 1 / -1; }
.ql-filtergrid .ql-label { font-size: .7rem; color: var(--color-base-500); }
.ql-tag-or { border-color: transparent; color: var(--color-base-500); font-weight: 600; font-size: .65rem; letter-spacing: .06em; padding: .2rem .35rem; }
/* alternatives: each group matches on its own, and a row is kept when any of them does */
.ql-fgroup { border: 1px solid var(--color-base-200); border-radius: .55rem; padding: .5rem .55rem; margin: 0; display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.dark .ql-fgroup { border-color: var(--color-base-700); }
.ql-fgroup-head { display: flex; align-items: center; gap: .5rem; padding: 0 .25rem; font-size: .7rem; font-weight: 500; color: var(--color-base-500); text-transform: uppercase; letter-spacing: .04em; }
.ql-fgroup-or { display: flex; align-items: center; gap: .5rem; margin: .1rem 0; color: var(--color-base-500); font-size: .7rem; font-weight: 600; letter-spacing: .06em; }
.ql-fgroup-or::before, .ql-fgroup-or::after { content: ""; flex: 1; height: 1px; background: var(--color-base-200); }
.dark .ql-fgroup-or::before, .dark .ql-fgroup-or::after { background: var(--color-base-700); }
/* a filter with a fixed set of values: tick as many as you mean */
.ql-chipset { display: flex; flex-wrap: wrap; gap: .25rem; max-height: 7rem; overflow: auto; }
.ql-chip { display: inline-flex; align-items: center; border: 1px solid var(--color-base-300); border-radius: 999px; padding: .2rem .55rem; font-size: .75rem; line-height: 1.2; cursor: pointer; background: #fff; white-space: nowrap; }
.dark .ql-chip { background: var(--color-base-950); border-color: var(--color-base-700); }
.ql-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.ql-chip:hover { border-color: var(--color-primary-400); }
.ql-chip:has(input:checked) { border-color: var(--color-primary-500); background: color-mix(in oklab, var(--color-primary-500) 14%, transparent); color: var(--color-primary-700); font-weight: 500; }
.dark .ql-chip:has(input:checked) { color: var(--color-primary-200); }
.ql-chip:has(input:focus-visible) { outline: 2px solid color-mix(in oklab, var(--color-primary-500) 55%, transparent); }

/* A labelled run of related controls inside a panel. Twenty-odd controls in one flat grid
   is a wall whatever order they are in; a reader is only asking one kind of question at a
   time. The PANEL scrolls — a run that scrolls inside a panel that scrolls gives two bars
   and no sense of how much is left. */
.ql-section { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.ql-section-head { font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-base-500); }
.ql-section + .ql-section { margin-top: .3rem; padding-top: .55rem; border-top: 1px solid var(--color-base-200); }
.dark .ql-section + .ql-section { border-color: var(--color-base-700); }
.ql-section .ql-filtergrid { max-height: none; overflow: visible; }
/* a chipset of ACTIONS rather than of checkboxes: the same pill, pressed instead of ticked.
   `.ql-segmented` stretches its buttons to fill the row, which is right for three or four
   and ragged for eight. */
.ql-chipset button { border: 1px solid var(--color-base-300); border-radius: 999px; padding: .2rem .6rem; font-size: .75rem; line-height: 1.2; cursor: pointer; background: #fff; color: inherit; white-space: nowrap; }
.dark .ql-chipset button { background: var(--color-base-950); border-color: var(--color-base-700); }
.ql-chipset button:hover { border-color: var(--color-primary-400); }
.ql-chipset button[aria-pressed="true"] { border-color: var(--color-primary-500); background: color-mix(in oklab, var(--color-primary-500) 14%, transparent); color: var(--color-primary-700); font-weight: 500; }
.dark .ql-chipset button[aria-pressed="true"] { color: var(--color-primary-200); }

/* ── records, fields and menus ────────────────────────────────────────────────
   Generic admin primitives, not tied to any one page:
     .ql-records / .ql-record        a scannable list of records with one primary link
     .ql-overflow                    the quiet "⋯" a record hides its actions behind
     .ql-form / .ql-fields           a form of fields inside a panel
     .ql-label                       a field's name, its key beneath, an optional (i)
     .ql-w-xs|sm|md                  a field is as wide as its content needs
     .ql-formbar                     the actions that stay in reach while a form scrolls   */

.ql-records { gap: .25rem; max-height: 32rem; overflow: auto; }
.ql-record { border: 1px solid transparent; border-radius: .5rem; padding: .35rem .45rem; display: flex; align-items: flex-start; justify-content: space-between; gap: .35rem; }
.ql-record:hover { background: color-mix(in oklab, var(--color-primary-500) 6%, transparent); }
.ql-record.is-current { border-color: var(--color-primary-400); background: color-mix(in oklab, var(--color-primary-500) 10%, transparent); }
.ql-record-main { display: flex; flex-direction: column; gap: .1rem; min-width: 0; flex: 1 1 auto; color: inherit; }
.ql-record-main strong { font-size: .8125rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* One quiet affordance per record: everything it can do lives behind this, so a list of
   records reads as a list of records. Visible on hover, on focus, and while open. */
.ql-overflow { position: relative; flex: none; }
.ql-overflow > summary { list-style: none; cursor: pointer; width: 1.4rem; height: 1.4rem; display: flex; align-items: center; justify-content: center; border-radius: .35rem; color: var(--color-base-400); opacity: 0; transition: opacity .12s; }
.ql-overflow > summary::-webkit-details-marker { display: none; }
.ql-record:hover .ql-overflow > summary, .ql-record.is-current .ql-overflow > summary,
.ql-overflow[open] > summary, .ql-overflow > summary:focus-visible { opacity: 1; }
.ql-overflow > summary:hover { background: var(--color-base-100); color: var(--color-base-600); }
.dark .ql-overflow > summary:hover { background: var(--color-base-800); }
.ql-overflow-panel { position: absolute; right: 0; z-index: 40; min-width: 15rem; padding: .5rem; display: flex; flex-direction: column; gap: .15rem; }
.ql-menu-item { display: block; width: 100%; text-align: left; padding: .3rem .35rem; border-radius: .35rem; font-size: .8125rem; color: inherit; background: none; border: 0; cursor: pointer; }
.ql-menu-item:hover { background: color-mix(in oklab, var(--color-primary-500) 10%, transparent); }
.ql-menu-group { display: flex; flex-direction: column; gap: .25rem; padding: .1rem .35rem .4rem; border-bottom: 1px solid var(--color-base-200); margin-bottom: .25rem; }
.dark .ql-menu-group { border-bottom-color: var(--color-base-700); }

/* Sections inside a form are one stacked sheet, not a stack of boxes: the panel already
   draws the outline, so each section contributes a single rule and never a second border. */
.ql-form { display: flex; flex-direction: column; }
.ql-form > .ql-section { border: 0; border-radius: 0; border-top: 1px solid var(--color-base-200); }
.dark .ql-form > .ql-section { border-top-color: var(--color-base-700); }
.ql-form > .ql-section:first-child { border-top: 0; }
.ql-form > .ql-section > summary { padding: .7rem 1rem .5rem; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--color-base-500); }
.ql-form > .ql-section[open] > summary { color: var(--color-base-600); }
.dark .ql-form > .ql-section[open] > summary { color: var(--color-base-300); }
/* Fields share the gutter their section title sits on, so a form has one left edge. */
.ql-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1.1rem 1.5rem; padding: .35rem 1rem 1.1rem; }
.ql-field-wide { grid-column: 1 / -1; }
.ql-form > .ql-section > .ql-fields + * { padding: 0 1rem 1rem; }

/* What a field means lives behind a small mark, so a form stays a column of fields rather
   than a column of fields and paragraphs. */
.ql-info { display: inline-flex; align-items: center; justify-content: center; width: .95rem; height: .95rem; border-radius: 999px; border: 1px solid var(--color-base-300); color: var(--color-base-500); font-size: .625rem; font-style: normal; font-weight: 600; cursor: help; flex: none; }
.ql-info:hover, .ql-info:focus-visible { border-color: var(--color-primary-500); color: var(--color-primary-600); }
.dark .ql-info { border-color: var(--color-base-600); }

/* A field is as wide as its content needs: a timestamp is not a title. */
.ql-w-xs .ql-input, .ql-w-xs > .ql-input { max-width: 7rem; }
.ql-w-sm .ql-input, .ql-w-sm > .ql-input { max-width: 10rem; }
.ql-w-md .ql-input, .ql-w-md > .ql-input { max-width: 15rem; }
.ql-w-xs > select.ql-input, .ql-w-sm > select.ql-input, .ql-w-md > select.ql-input { width: 100%; }

.ql-formbar { position: sticky; bottom: 0; gap: .75rem; flex-wrap: wrap; background: var(--color-base-50); border-top: 1px solid var(--color-base-200); }
.dark .ql-formbar { background: var(--color-base-900); border-color: var(--color-base-700); }
.ql-check { display: flex; align-items: center; gap: .45rem; font-size: .75rem; color: var(--color-base-500); }
.ql-check input { width: .9rem; height: .9rem; accent-color: var(--color-primary-600); }
.ql-req { color: var(--color-primary-600); margin-left: .15rem; }
.ql-error { font-size: .6875rem; color: #b91c1c; }
.dark .ql-error { color: #fca5a5; }
.ql-field:has(.ql-error) .ql-input { border-color: #b91c1c; }
.ql-danger { color: #b91c1c; }
.ql-btn-danger { background: #b91c1c; color: #fff; border-color: #b91c1c; }
.ql-btn-danger:hover { background: #991b1b; }
.ql-row-2 { grid-template-columns: 1fr 1fr; }

/* Chips: a compact size, a wrapped set, the option worth suggesting, and a pressed state. */
.ql-chipset-sm .ql-chip { padding: .1rem .45rem; font-size: .6875rem; }
.ql-chipset-wrap { max-height: none; gap: .3rem; }
.ql-chip-suggested { border-color: var(--color-primary-400); font-weight: 500; }
.ql-chip[aria-pressed="true"] { border-color: var(--color-primary-500); background: color-mix(in oklab, var(--color-primary-500) 14%, transparent); }

.ql-dialog { border: 1px solid var(--color-base-200); border-radius: .75rem; padding: 1.25rem; max-width: 30rem; font-size: .875rem; color: var(--color-base-700); background: #fff; }
.dark .ql-dialog { background: var(--color-base-900); border-color: var(--color-base-700); color: var(--color-base-200); }
.ql-dialog::backdrop { background: rgb(0 0 0 / .35); }
.ql-dialog .ql-toolbar { margin-top: 1rem; justify-content: flex-end; }
.ql-h2 { font-size: 1rem; font-weight: 600; margin: 0 0 .5rem; }

/* Places of one event: one row per extra site, tight enough that seven fit on a screen. */
/* One place is a small card: a caption line (which place, remove) over labelled cells that
   wrap to the width there is — seven on one line on a wide screen, four then three at 1440px,
   two per line on a phone. Unlabelled cells read as noise once values are in, and a fixed
   two-line grid gave longitude the narrow role column and latitude the widest one. */
.ql-places { display: flex; flex-direction: column; gap: .6rem; }
.ql-place { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .5rem .75rem; align-items: end; padding: .55rem .75rem .75rem; border: 1px solid var(--color-base-200); border-radius: .6rem; }
.dark .ql-place { border-color: var(--color-base-800); }
.ql-place-head { grid-column: 1 / -1; display: flex; align-items: baseline; gap: .75rem; font-size: .75rem; line-height: 1.2; }
.ql-place-title { font-weight: 600; }
.ql-place .ql-field { min-width: 0; }
.ql-place > .ql-error { grid-column: 1 / -1; }

/* ─── Query builder ────────────────────────────────────────────────────────────────────
   React Query Builder with its own stylesheet suppressed, so every control here is one of
   ours and nothing fights Unfold for the theme. One rule is ONE ROW — field, operator,
   value, remove — because a rule that wraps onto three lines with its remove button adrift
   below reads as three things. Dark follows this file's convention: `.dark`. */
/* The query builder. A group is a card like a place card; its rules are rows; its actions are
   the same link buttons the rest of the admin uses; the joiners are small uppercase chips. An
   alternative carries a caption. Nothing here is the library's — it ships no stylesheet. */
.ql-qb { display: flex; flex-direction: column; gap: .5rem; }
.ql-qb-group { display: flex; flex-direction: column; gap: .5rem; }
.ql-qb-body > .ql-qb-group { padding: .6rem .75rem .7rem; border: 1px solid var(--color-base-200); border-radius: .6rem; background: var(--color-base-50); }
.ql-qb-body > .ql-qb-group:only-child { padding: 0; border: 0; background: none; }
.ql-qb-caption { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; font-size: .75rem; line-height: 1.2; }
.ql-qb-caption-title { font-weight: 600; }
.ql-qb-head { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .8rem; }
.ql-qb-body { display: flex; flex-direction: column; gap: .375rem; }
.ql-qb-rule { display: grid; grid-template-columns: minmax(8rem, 1.1fr) minmax(6.5rem, auto) minmax(0, 1.6fr) auto; align-items: center; gap: .375rem; }
.ql-qb-rule > * { min-width: 0; }
.ql-qb-field, .ql-qb-op, .ql-qb-value { height: 2rem; padding: 0 .5rem; font-size: .8125rem; }
.ql-qb-valuewrap { min-width: 0; }
.ql-qb-valuewrap > * { width: 100%; }
.ql-qb-typed { position: relative; display: block; }
.ql-qb-typed[data-unit] .ql-qb-value { padding-right: 3.2rem; }
.ql-qb-typed[data-unit]::after { content: attr(data-unit); position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); font-size: .6875rem; color: var(--color-base-500); pointer-events: none; }
/* several values: the trigger is one control, the list is a popup under it */
.ql-qb-multi { position: relative; }
.ql-qb-multi-trigger { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; text-align: left; cursor: pointer; }
.ql-qb-multi-trigger > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ql-qb-multi-panel { max-height: min(14rem, calc(100vh - 2rem)); overflow: auto; display: flex; flex-direction: column; gap: .0625rem; padding: .375rem; border: 1px solid var(--color-base-200); border-radius: .5rem; background: var(--color-base-50); box-shadow: 0 10px 28px rgb(0 0 0 / .18); }
.ql-qb-option { display: flex; align-items: center; gap: .5rem; padding: .25rem .375rem; border-radius: .375rem; font-size: .8125rem; white-space: nowrap; cursor: pointer; }
.ql-qb-option:hover { background: var(--color-base-100); }
.ql-qb-option > span { flex: 1; }
/* a picker: an input-looking trigger, a popover with a search box and grouped rows */
.ql-qb-pick { position: relative; min-width: 0; }
.ql-qb-pick-trigger { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; height: 2rem; padding: 0 .5rem; font-size: .8125rem; text-align: left; cursor: pointer; }
.ql-qb-pick-trigger > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ql-qb-pick-panel { width: max-content; max-width: min(24rem, calc(100vw - 2rem)); display: flex; flex-direction: column; gap: .375rem; padding: .375rem; border: 1px solid var(--color-base-200); border-radius: .5rem; background: var(--color-base-50); box-shadow: 0 10px 28px rgb(0 0 0 / .18); }
.ql-qb-pick-search { height: 1.9rem; font-size: .8125rem; }
.ql-qb-pick-list { max-height: min(16rem, calc(100vh - 6rem)); overflow: auto; display: flex; flex-direction: column; gap: .125rem; }
.ql-qb-pick-group { display: flex; flex-direction: column; gap: .0625rem; }
.ql-qb-pick-group > .ql-section-head { padding: .3rem .375rem .15rem; }
.ql-qb-pick-option { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; width: 100%; padding: .3rem .45rem; border: 0; border-radius: .375rem; background: none; font-size: .8125rem; text-align: left; color: inherit; cursor: pointer; }
.ql-qb-pick-option > span { white-space: nowrap; }
.ql-qb-pick-option > em { font-style: normal; font-size: .6875rem; color: var(--color-base-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14rem; }
.ql-qb-pick-option:hover, .ql-qb-pick-option[aria-selected="true"] { background: var(--color-base-100); }
.ql-qb-pick-option[aria-selected="true"] > span { font-weight: 600; }
.dark .ql-qb-pick-panel { background: var(--color-base-900); border-color: var(--color-base-700); }
.dark .ql-qb-pick-option:hover, .dark .ql-qb-pick-option[aria-selected="true"] { background: var(--color-base-800); }
/* joiners and actions */
.ql-qb-joiner { justify-self: start; padding: .125rem .5rem; border-radius: .3125rem; background: var(--color-base-100); font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-base-500); }
.ql-qb-remove { width: 1.75rem; height: 1.75rem; padding: 0; border: 1px solid transparent; border-radius: .375rem; background: none; font-size: .875rem; line-height: 1; color: var(--color-base-400); cursor: pointer; }
.ql-qb-remove:hover { border-color: var(--color-base-300); color: var(--color-base-800); }
.ql-qb-remove-group { color: var(--color-base-500); }
.dark .ql-qb-body > .ql-qb-group { border-color: var(--color-base-700); background: color-mix(in srgb, var(--color-base-800) 45%, transparent); }
.dark .ql-qb-body > .ql-qb-group:only-child { background: none; }
.dark .ql-qb-multi-panel { background: var(--color-base-900); border-color: var(--color-base-700); }
.dark .ql-qb-option:hover { background: var(--color-base-800); }
.dark .ql-qb-joiner { background: var(--color-base-800); color: var(--color-base-400); }
.dark .ql-qb-remove { color: var(--color-base-400); }
.dark .ql-qb-remove:hover { border-color: var(--color-base-500); color: var(--color-base-100); }