/* The log explorer (docs/design/LOGS.md, ADR 0050): #/logs, the panels'
   History, Requests and Logs tabs, and the log alerts card and form. Colours
   are tokens from app.css, in both themes; the categorical --series-* are a
   source's identity and only ever a swatch beside its name.

   Order: the page, the frame, the query row, the hits strip, the facets, the
   list, the drawer, the states, the panels, log alerts, narrow screens. */

/* ---- the page ---------------------------------------------------------------
   Full height under the top bar, like the canvas: no context bar, no gutter,
   no page scroll — the list scrolls on its own. */

body.logs-mode { overflow: hidden; }
body.logs-mode .shell { height: 100vh; height: 100dvh; min-height: 0; }
body.logs-mode .ctxbar { display: none; }
body.logs-mode .main { display: flex; flex-direction: column; min-height: 0; }
body.logs-mode .page {
  flex: 1 1 auto;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 0;
  gap: 0;
}
.lx-page { flex: 1 1 auto; min-height: 0; display: flex; }
.lx-page > .lx { flex: 1 1 auto; }

/* ---- the frame -------------------------------------------------------------- */

.lx {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  background: var(--surface);
  container: lx / inline-size;
}
.lx:focus { outline: none; }

.lx-body {
  position: relative;
  display: grid;
  grid-template-areas: "facets main drawer";
  grid-template-columns: 240px minmax(0, 1fr) 0;
  min-height: 0;
}
.lx.drawer-open .lx-body { grid-template-columns: 240px minmax(0, 1fr) 420px; }
.lx.facets-off .lx-body { grid-template-columns: 0 minmax(0, 1fr) 0; }
.lx.facets-off.drawer-open .lx-body { grid-template-columns: 0 minmax(0, 1fr) 420px; }
.lx.facets-off .lf { display: none; }
.lx-main {
  grid-area: main;
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--code-bg);
}

/* Off, or starting: the card says so, and nothing pretends to be a chart. */
.lx.lx-off .lx-strip, .lx.lx-off .lf { display: none; }
.lx.lx-off { grid-template-rows: auto minmax(0, 1fr); }
.lx.lx-off .lr-head { display: none; }
.lx.lx-off .lx-body { grid-template-columns: 0 minmax(0, 1fr) 0; }

/* ---- the query row ------------------------------------------------------------ */

.lx-query {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  min-width: 0;
}
.lx-query > .pop-host { flex: none; }

/* The bar: the input's own text is transparent, and the tokens are drawn in
   an overlay behind it in the same face and size, so it reads like chips and
   edits like text. Nothing in the overlay may change a glyph's width. */
.lq { position: relative; flex: 1 1 360px; min-width: 0; }
.lq-box {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 4px 0 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.lq-box:hover { border-color: var(--ink-3); }
.lq-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.lq-box > .icon { color: var(--ink-3); }
.lq-field { position: relative; flex: 1 1 auto; min-width: 0; height: 38px; }
.lq .lq-input, .lq-overlay {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0 2px;
  font: 400 13px/38px var(--mono);
  letter-spacing: 0;
  white-space: pre;
  font-variant-ligatures: none;
}
.lq .lq-input {
  width: 100%;
  height: 38px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: transparent;
  caret-color: var(--ink);
  box-shadow: none;
}
.lq .lq-input:hover, .lq .lq-input:focus { border: 0; box-shadow: none; outline: none; }
.lq .lq-input::placeholder { color: var(--ink-3); font-family: var(--sans); }
.lq .lq-input::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); color: transparent; }
.lq-overlay { display: block; overflow: hidden; color: var(--ink); pointer-events: none; }
.lq-tok { border-radius: 4px; }
.lq-fieldtok { background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent-soft); }
.lq-fieldtok .lq-key { color: var(--accent); }
.lq-level { background: var(--warn-soft); box-shadow: 0 0 0 2px var(--warn-soft); }
.lq-level .lq-key { color: var(--warn); }
.lq-phrase { background: var(--slate-soft); box-shadow: 0 0 0 2px var(--slate-soft); }
.lq-neg { background: var(--bad-soft); box-shadow: 0 0 0 2px var(--bad-soft); }
.lq-neg .lq-key, .lq-word-neg { color: var(--bad); }
.lq-op { color: var(--accent); }
.lq-err { text-decoration: underline wavy var(--bad); text-decoration-skip-ink: none; text-underline-offset: 4px; }
.lq-err-end { display: inline-block; min-width: 1ch; }
/* The 400's sentence sits in the bar, right of the text, so nothing below
   the bar moves when it comes and goes. */
.lq-errmsg {
  flex: 0 1 auto;
  max-width: 48%;
  overflow: hidden;
  padding-left: var(--sp-2);
  color: var(--bad);
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lq-help {
  flex: none;
  height: 28px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink-3);
  font: 500 12.5px/1 var(--sans);
  cursor: pointer;
}
.lq-help:hover, .lq-help[aria-expanded="true"] { background: var(--surface-2); color: var(--ink); }

.lq-drop {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 45;
  max-height: 340px;
  overflow: auto;
  padding: var(--sp-1);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-pop);
}
.lq-group { padding: 8px 10px 4px; font-size: 12px; font-weight: 500; color: var(--ink-3); }
.lq-item {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  min-width: 0;
}
.lq-item.on { background: var(--accent-soft); }
.lq-item.on .lq-item-label { color: var(--accent); }
.lq-item-label { flex: none; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lq-item-hint { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); font-size: 12px; }
.lq-item-hits { margin-left: auto; color: var(--ink-3); font-size: 12px; }

.lq-syntax { width: 340px; max-width: 100%; padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }
.lq-syntax-head { font-size: 13px; color: var(--ink-2); }
.lq-syntax-list { display: flex; flex-direction: column; }
.lq-ex {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
  width: 100%;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink);
  font: 400 13px/1.4 var(--sans);
  text-align: left;
  cursor: pointer;
}
.lq-ex .muted { font-size: 12.5px; text-align: right; }
.lq-ex .mono { flex: none; white-space: nowrap; }
.lq-ex:hover { background: var(--surface-2); }

/* Sources: the button, then the chosen ones as chips. */
.lq-src { display: flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; max-width: 46%; min-height: 40px; }
.lq-srcbtn, .lq-rangebtn { height: 40px; }
.lq-chips { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.lq-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  max-width: 220px;
  height: 28px;
  padding: 0 3px 0 9px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-tag);
  background: var(--surface-2);
  color: var(--ink);
  font: 500 12.5px/1 var(--sans);
  white-space: nowrap;
}
.lq-chip .icon { width: 13px; height: 13px; color: var(--ink-3); }
.lq-chip-text { overflow: hidden; text-overflow: ellipsis; }
.lq-chip.quiet { padding-right: 10px; border-color: transparent; background: none; color: var(--ink-2); }
.lq-chip-x {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-tag);
  background: none;
  color: var(--ink-3);
  cursor: pointer;
}
.lq-chip-x .icon { width: 12px; height: 12px; }
.lq-chip-x:hover { background: var(--surface-3); color: var(--ink); }

.popover:has(> .lq-srcpop) { width: 400px; max-width: min(440px, calc(100vw - 32px)); }
.lq-srcpop { display: flex; flex-direction: column; max-height: min(520px, 70vh); }
.lq-tree-top { padding: var(--sp-2); border-bottom: 1px solid var(--line); }
.lq-tree-filter { width: 100%; }
.lq-tree { overflow: auto; padding: var(--sp-1) 0; min-height: 60px; }
.lq-tree-empty { padding: var(--sp-3) var(--sp-4); font-size: 13px; }
.lq-tree-head { padding: 10px var(--sp-4) 4px; font-size: 12px; font-weight: 500; color: var(--ink-3); border-top: 1px solid var(--line); margin-top: var(--sp-1); }
.lq-proj { display: flex; align-items: center; }
.lq-proj .lq-node { flex: 1 1 auto; padding-left: 2px; }
.lq-twist { width: 26px; height: 26px; margin-left: 6px; }
.lq-node {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  padding: 5px var(--sp-4) 5px var(--sp-4);
  font-size: 13.5px;
  cursor: pointer;
}
.lq-node:hover { background: var(--surface-2); }
.lq-node .icon { color: var(--ink-3); }
.lq-node.depth-1 { padding-left: 40px; }
.lq-node.sub { padding-left: 62px; }
.lq-node-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lq-node-sub { margin-left: auto; padding-left: var(--sp-2); font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.lq-tree-foot { display: flex; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-2); border-top: 1px solid var(--line); }

/* The range: presets as rows, the custom pair under a rule. */
.popover:has(> .lq-range) { width: 280px; }
.lq-range .menu { padding: var(--sp-1); }
.lq-range .menu-item { justify-content: space-between; }
.lq-range .menu-item.current .icon { color: var(--accent); }
.lq-custom { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); border-top: 1px solid var(--line); }
.lq-custom-head { display: flex; justify-content: space-between; gap: var(--sp-2); font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.lq-custom-now { color: var(--accent); font-weight: 600; white-space: nowrap; }
.lq-custom input { width: 100%; }
.lq-custom .field-label { font-size: 12.5px; }
.lq-custom input { height: 34px; font-size: 13px; }

/* ---- the hits strip ---------------------------------------------------------
   Columns of stacked boxes: errors at the base, warnings over them, the rest
   on top; a 2px surface gap between segments and columns; a rounded data end,
   a square base; no gridlines. */

.lx-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: end;
  gap: var(--sp-4);
  padding: var(--sp-2) var(--sp-4) 10px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.hs { position: relative; min-width: 0; }
/* The strip and the counts change while live; their boxes do not. */
.hs-bars { contain: strict; }
.lx-count { display: inline-block; min-width: 9ch; text-align: right; }
.hs-plot { position: relative; height: 46px; cursor: crosshair; touch-action: none; user-select: none; border-radius: var(--radius-sm); }
.hs-plot:focus-visible { outline-offset: 2px; }
.hs-bars { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 2px; height: 100%; padding-top: 4px; }
.hs-col {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-radius: 3px 3px 0 0;
}
.hs-col.on { background: var(--surface-2); }
.hs-bar { display: flex; flex-direction: column-reverse; gap: 2px; width: 100%; }
.hs-seg { display: block; width: 100%; flex: none; }
.hs-seg.e { background: var(--bad); }
.hs-seg.w { background: var(--warn); }
.hs-seg.o { background: var(--hits-other); }
.hs-bar > :last-child { border-radius: 3px 3px 0 0; }
.hs-col.on .hs-seg.o { background: var(--ink-3); }
.hs.stale .hs-bars { opacity: 0.45; transition: opacity var(--dur) var(--ease); }
.hs-none { margin: auto; align-self: center; font-size: 12.5px; color: var(--ink-3); }
.hs-sel {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 0;
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-line);
  border-radius: 4px;
  pointer-events: none;
}
.hs-tip {
  position: absolute;
  top: calc(100% + 22px);
  z-index: 30;
  transform: translateX(-50%);
  min-width: 140px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  font-size: 12.5px;
  color: var(--ink-2);
  white-space: nowrap;
  pointer-events: none;
}
.hs-tip.flip { transform: translateX(-100%); }
.hs-tip.nudge { transform: none; }
.hs-tip-time { margin-bottom: 3px; color: var(--ink-2); }
.hs-tip-row strong { color: var(--ink); font-weight: 650; }
.hs-key { display: inline-block; width: 10px; height: 2px; margin-right: 6px; vertical-align: middle; border-radius: 1px; }
.hs-key.e { background: var(--bad); }
.hs-key.w { background: var(--warn); }
.hs-key.o { background: var(--hits-other); }
.hs-axis { display: flex; justify-content: space-between; margin-top: 3px; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.lx-stats { display: flex; align-items: baseline; gap: 10px; padding-bottom: 16px; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.lx-count { color: var(--ink); font-weight: 600; }
.lx-took:not(:empty)::before { content: "·"; margin-right: 10px; color: var(--ink-3); }
.lx-livestate { font-size: 12.5px; color: var(--ink-3); }
.lx-livestate.on { color: var(--ok); }
.lx-livestate.warn { color: var(--warn); white-space: normal; }
.lx-levelchip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: center;
  height: 24px;
  padding: 0 6px 0 9px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-tag);
  background: var(--surface-2);
  color: var(--ink);
  font: 500 12.5px/1 var(--sans);
  cursor: pointer;
}
.lx-levelchip .icon { width: 12px; height: 12px; color: var(--ink-3); }
.lx-levelchip.lv-error { background: var(--bad-soft); border-color: transparent; color: var(--bad); }
.lx-levelchip.lv-warn { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.lx-levelchip:hover .icon { color: var(--ink); }
.lx-reset { padding: 0; border: 0; background: none; color: var(--accent); font: 500 13px var(--sans); cursor: pointer; }
.lx-reset:hover { text-decoration: underline; text-underline-offset: 2px; }
.lx-tools { display: flex; align-items: center; gap: 6px; padding-bottom: 12px; }
.lx-tools .btn.toggle { height: 32px; }
.lx-tools .icon-btn.framed { width: 32px; height: 32px; }
.lx-live { gap: 7px; }
.lx-livedot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.lx-live.on .lx-livedot { background: var(--ok); }
/* The pulse is a ring scaled and faded on a layer of its own: animating a
   shadow would repaint the page sixty times a second under a live tail. */
.lx-live.on .lx-livedot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--ok);
  will-change: transform, opacity;
  animation: lx-pulse 1.6s var(--ease) infinite;
}
@keyframes lx-pulse {
  from { transform: scale(1); opacity: 0.5; }
  to { transform: scale(2.4); opacity: 0; }
}
.lx-keys .kbd { min-width: 18px; height: 18px; color: var(--ink-2); border-bottom-width: 1px; }
.lx-keymap { width: 320px; max-width: 100%; padding: var(--sp-3) var(--sp-4); }
.lx-keymap-head { margin-bottom: 6px; font-size: 12.5px; color: var(--ink-2); }
.lx-keymap table { width: 100%; border-collapse: collapse; font-size: 13px; }
.lx-keymap td { padding: 3px 0; vertical-align: middle; }
.lx-keymap td:first-child { width: 98px; white-space: nowrap; }
.lx-keymap .kbd + .kbd { margin-left: 4px; }
.lx-open { height: 32px; }

/* ---- the facets ---------------------------------------------------------------- */

.lf {
  grid-area: facets;
  contain: strict;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border-right: 1px solid var(--line);
  background: var(--surface);
}
.lf-head { position: sticky; top: 0; z-index: 1; padding: var(--sp-3) var(--sp-4) 4px; background: var(--surface); }
.lf-title { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.lf-body { padding: 0 var(--sp-2) var(--sp-4); transition: opacity var(--dur) var(--ease); }
.lf.stale .lf-body { opacity: 0.55; }
.lf-empty { padding: var(--sp-2); font-size: 13px; color: var(--ink-3); }
.lf-group { margin-top: 4px; }
.lf-fold {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink);
  font: 600 13px/1.3 var(--sans);
  text-align: left;
  cursor: pointer;
}
.lf-fold:hover { background: var(--surface-2); }
.lf-fold .icon { width: 13px; height: 13px; color: var(--ink-3); }
.lf-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lf-name.mono { font-size: 12px; font-weight: 500; }
.lf-count { margin-left: auto; font-size: 11.5px; font-weight: 400; color: var(--ink-3); }
.lf-values { display: flex; flex-direction: column; gap: 1px; padding-bottom: 4px; }
.lf-row { position: relative; display: flex; align-items: center; border-radius: var(--radius-sm); }
.lf-row:hover { background: var(--surface-2); }
.lf-row.in { background: var(--accent-soft); }
.lf-val {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  grid-template-rows: auto 3px;
  align-items: center;
  column-gap: 6px;
  row-gap: 3px;
  padding: 4px 4px 5px 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.lf-mark { display: inline-flex; color: var(--accent); }
.lf-mark .icon { width: 12px; height: 12px; }
.lf-row.out .lf-mark { color: var(--bad); }
.lf-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.lf-row.out .lf-text { text-decoration: line-through; color: var(--ink-2); }
.lf-hits { font-size: 11.5px; color: var(--ink-2); }
.lf-bar { grid-column: 2 / -1; grid-row: 2; height: 3px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.lf-fill { display: block; height: 100%; border-radius: 2px; background: var(--ink-3); }
.lf-fill.lv-error { background: var(--bad); }
.lf-fill.lv-warn { background: var(--warn); }
.lf-out {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-right: 2px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink-3);
  cursor: pointer;
  opacity: 0;
}
.lf-out .icon { width: 13px; height: 13px; }
.lf-row:hover .lf-out, .lf-out:focus-visible { opacity: 1; }
.lf-out:hover { background: var(--bad-soft); color: var(--bad); }
.lf-more { padding: 4px 8px 4px 28px; border: 0; background: none; color: var(--accent); font: 500 12.5px var(--sans); text-align: left; cursor: pointer; }
.lf-more:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ---- the list ------------------------------------------------------------------
   Only the rows in view are in the document; each is placed by a transform at
   its distance from the bottom of the list, so a live line put on top moves
   none of them. 22px in one-line mode; measured once with Wrap on. */

.lr { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.lr-stage { position: relative; flex: 1 1 auto; min-height: 0; contain: strict; }
.lr-scroll {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* An opaque, size-contained scroller is scrolled by the compositor, and
     what changes inside it never repaints the page around it. */
  contain: strict;
  background: var(--code-bg);
}
.lr-scroll:focus { outline: none; }
.lr-scroll:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.lr-sizer { position: relative; min-height: 100%; overflow: clip; transition: opacity var(--dur) var(--ease); }
/* The rows' layer (logresults.js): a fixed height, moved by a transform so
   its bottom is the list's — a live line paints that line and moves the
   layer, and no row on screen is painted again. */
.lr-rows { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
.lr-scroll.stale .lr-sizer { opacity: 0.45; }
.lr-row {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: 22px;
  padding: 0 var(--sp-4);
  color: var(--code-ink);
  font: 400 12.5px/22px var(--mono);
  white-space: nowrap;
  cursor: pointer;
  contain: layout style;
}
/* One line, one fixed box: nothing in a row can change the list's layout. */
/* overflow: clip, not hidden, everywhere in a row: a hidden box is a scroll
   container, and a scroll container is a clip and a scroll node for every
   frame to walk. */
.lr:not(.wrap) .lr-row { contain: strict; }
.lr-row:hover { background: var(--code-hover); }
/* The bar down a tinted row's edge is an inset shadow on that row alone: a
   border on every row (even a transparent one) quadruples what a frame
   paints under a live tail. */
.lr-row.lv-error { background: var(--code-fail); box-shadow: inset 2px 0 0 var(--bad); }
.lr-row.lv-warn { background: var(--code-warn); box-shadow: inset 2px 0 0 var(--warn); }
.lr-row.lv-debug .lr-msg { color: var(--code-ink-2); }
.lr-row.sel { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
.lr-t { flex: none; width: 96px; color: var(--code-ink-2); font-size: 11.5px; }
.lr-lv { flex: none; width: 26px; color: var(--code-ink-2); font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; }
.lr-lv.error { color: var(--bad); }
.lr-lv.warn { color: var(--warn); }
.lr-src {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 168px;
  min-width: 0;
  overflow: clip;
  font: 400 12px/22px var(--sans);
  color: var(--ink-2);
}
.lr-sw { flex: none; display: inline-block; width: 3px; height: 12px; border-radius: 2px; background: var(--series-1); }
.lr-sw.c2 { background: var(--series-2); }
.lr-sw.c3 { background: var(--series-3); }
.lr-sw.c4 { background: var(--series-4); }
.lr-sw.c5 { background: var(--series-5); }
.lr-sw.c6 { background: var(--series-6); }
.lr-sw.c7 { background: var(--series-7); }
.lr-sw.c8 { background: var(--series-8); }
.lr-src-name { min-width: 0; overflow: clip; text-overflow: ellipsis; color: var(--ink); }
.lr-pod { flex: none; font: 400 11px/22px var(--mono); color: var(--code-ink-2); }
.lr-msg { flex: 1 1 auto; min-width: 0; overflow: clip; text-overflow: ellipsis; white-space: pre; }
.lr-msg .log-lvl { min-width: 0; margin-right: 2px; }
mark.lr-hit { border-radius: 2px; background: var(--log-hit); color: inherit; box-shadow: 0 0 0 1px var(--log-hit); }
.lr.wrap .lr-row { height: auto; min-height: 22px; align-items: flex-start; white-space: normal; }
.lr.wrap .lr-msg { overflow: visible; white-space: pre-wrap; overflow-wrap: anywhere; text-overflow: clip; }
.lr.wrap .lr-src { align-self: flex-start; }

/* A request line among others: its fields inline, in their columns' colours. */
.lr-msg > .inline + .inline { margin-left: 10px; }
.lr-msg .lr-dur.inline .lr-dur-bar { display: none; }
.lr-method { flex: none; width: 58px; color: var(--code-ink); font-weight: 500; }
.lr-status { flex: none; width: 44px; font-weight: 500; }
.lr-status.s2 { color: var(--ok); }
.lr-status.s3 { color: var(--slate); }
.lr-status.s4 { color: var(--warn); }
.lr-status.s5 { color: var(--bad); font-weight: 650; }
.lr-path { flex: 1 1 auto; min-width: 0; overflow: clip; text-overflow: ellipsis; }
.lr-dur { flex: none; display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; width: 118px; }
.lr-dur-n { min-width: 56px; text-align: right; }
.lr-dur-bar { display: inline-block; width: 44px; height: 4px; border-radius: 2px; background: var(--surface-3); overflow: clip; }
.lr-dur-bar > span { display: block; height: 100%; border-radius: 2px; background: var(--ink-3); }
.lr-row.lv-error .lr-dur-bar > span { background: var(--bad); }
.lr-client { flex: none; width: 128px; overflow: clip; text-overflow: ellipsis; color: var(--code-ink-2); }
.lr-msg .lr-method, .lr-msg .lr-status, .lr-msg .lr-dur, .lr-msg .lr-client, .lr-msg .lr-path { width: auto; flex: none; }
.lr-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: 30px;
  padding: 0 var(--sp-4) 0 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  font: 500 12px/1 var(--sans);
  color: var(--ink-2);
}
.lr-head > span { font-family: var(--sans); color: var(--ink-2); }
.lr-head .lr-dur { justify-content: flex-end; padding-right: 52px; }

/* The day changes between two rows: a rule under the newer one and the older
   day's name on it. The top of the view carries the day it is showing. */
.lr-row.day-edge { z-index: 1; box-shadow: inset 0 -1px 0 var(--accent-line); }
.lr-row.day-edge.lv-error { box-shadow: inset 2px 0 0 var(--bad), inset 0 -1px 0 var(--accent-line); }
.lr-row.day-edge.lv-warn { box-shadow: inset 2px 0 0 var(--warn), inset 0 -1px 0 var(--accent-line); }
.lr-row.day-edge.sel { box-shadow: inset 2px 0 0 var(--accent), inset 0 -1px 0 var(--accent-line); }
.lr-daymark {
  position: absolute;
  right: var(--sp-4);
  top: 100%;
  transform: translateY(-50%);
  padding: 0 7px;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-tag);
  background: var(--code-bg);
  color: var(--accent);
  font: 600 10.5px/16px var(--sans);
}
.lr-day {
  position: absolute;
  top: 8px;
  right: 20px;
  z-index: 3;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-tag);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  color: var(--ink-2);
  font: 600 11px/20px var(--sans);
  pointer-events: none;
}
.lr-foot {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  font: 400 12.5px var(--sans);
  color: var(--ink-3);
}
.lr-foot:empty { display: none; }
.lr-pill {
  position: absolute;
  top: 10px;
  left: 50%;
  z-index: 4;
  transform: translateX(-50%);
  padding: 5px 14px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-tag);
  background: var(--accent);
  color: var(--accent-ink);
  font: 600 12.5px/1.3 var(--sans);
  box-shadow: var(--shadow-pop);
  cursor: pointer;
}
.lr-pill:hover { background: var(--accent-hover); }
/* The pill and the day tag change while live, over the list: layers of
   their own, so their text does not repaint the page. */
.lr-pill, .lr-day { will-change: transform; }
.lr-progress { position: absolute; top: 0; left: 0; right: 0; z-index: 5; height: 2px; overflow: hidden; background: var(--accent-soft); }
.lr-progress::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30%;
  background: var(--accent);
  animation: lr-slide 1.1s var(--ease) infinite;
}
@keyframes lr-slide {
  from { transform: translateX(-100%); }
  to { transform: translateX(340%); }
}
.lr-cover { position: absolute; inset: 0; z-index: 6; overflow: auto; background: var(--code-bg); }
.lr-skel { display: flex; flex-direction: column; gap: 10px; padding: 12px var(--sp-4); }
.lr-skel-row { display: flex; align-items: center; gap: var(--sp-3); height: 12px; }
.lr-skel-row .skel { height: 9px; flex: none; }
.lr-skel-t { width: 84px; }
.lr-skel-s { width: 120px; }

/* ---- the drawer ------------------------------------------------------------------ */

.ld {
  grid-area: drawer;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-left: 1px solid var(--line);
  background: var(--surface);
}
.ld:focus { outline: none; }
.ld-head { display: flex; align-items: center; gap: var(--sp-2); padding: 8px 8px 8px var(--sp-4); border-bottom: 1px solid var(--line); }
.ld-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; flex: 1 1 auto; min-width: 0; font-size: 13px; }
.ld-lv { font-weight: 650; color: var(--ink); }
.ld-lv.error { color: var(--bad); }
.ld-lv.warn { color: var(--warn); }
.ld-when { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ld-src { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.ld-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: var(--sp-3) var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: 18px; }
.ld-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.ld-h { margin: 0 0 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); letter-spacing: 0; }
.ld-h-sub { font-weight: 400; color: var(--ink-3); }
.ld-msg {
  margin: 0;
  max-height: 320px;
  overflow: auto;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--code-bg);
  color: var(--code-ink);
  font: 400 12.5px/1.6 var(--mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ld-fields { width: 100%; border-collapse: collapse; font-size: 12.5px; table-layout: fixed; }
.ld-fields th { width: 34%; padding: 4px 10px 4px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); font-weight: 400; text-align: left; vertical-align: top; }
.ld-fields td { padding: 4px 0; vertical-align: top; }
.ld-fields tr + tr > * { border-top: 1px solid var(--line); }
.ld-val { color: var(--ink); overflow-wrap: anywhere; }
.ld-acts { width: 82px; text-align: right; white-space: nowrap; }
.ld-acts .icon-btn { width: 24px; height: 24px; opacity: 0.4; }
.ld-acts .icon-btn .icon { width: 13px; height: 13px; }
.ld-fields tr:hover .icon-btn, .ld-acts .icon-btn:focus-visible { opacity: 1; }
.ld-ctx-lines {
  position: relative;
  max-height: 360px;
  overflow: auto;
  margin: 4px 0;
  padding: 4px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--code-bg);
  font: 400 12px/1.55 var(--mono);
  color: var(--code-ink);
}
.ld-ctx-row { display: flex; gap: 10px; padding: 1px 10px; border-left: 2px solid transparent; }
.ld-ctx-row.lv-error { color: var(--bad); }
.ld-ctx-row.lv-warn { color: var(--warn); }
.ld-ctx-row.at { background: var(--accent-soft); border-left-color: var(--accent); color: var(--code-ink); }
.ld-ctx-t { flex: none; color: var(--code-ink-2); font-size: 11px; }
.ld-ctx-m { min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ld-ctx-note { font-size: 12.5px; padding: 4px 0; }
.ld-more { font-size: 12.5px; }

/* Narrower than a list, a drawer and the facets side by side: the drawer
   slides over the list instead of taking a column. */
@container lx (max-width: 1240px) {
  .lx.drawer-open .lx-body { grid-template-columns: 240px minmax(0, 1fr) 0; }
  .lx.facets-off.drawer-open .lx-body { grid-template-columns: 0 minmax(0, 1fr) 0; }
  .lx .ld {
    grid-area: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    width: min(420px, 100%);
    box-shadow: var(--overlay-shadow);
  }
}
/* In a panel, or any narrow frame, the strip takes the whole width and the
   counts and the tools sit under it. */
@container lx (max-width: 1100px) {
  .lx-strip { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "hits hits" "stats tools"; align-items: center; row-gap: 6px; }
  .lx-strip > .hs { grid-area: hits; }
  .lx-stats { grid-area: stats; padding-bottom: 0; }
  .lx-tools { grid-area: tools; padding-bottom: 0; }
}
@container lx (max-width: 760px) {
  .lx .lx-body, .lx.drawer-open .lx-body { grid-template-columns: 0 minmax(0, 1fr) 0; }
  .lx .lf { display: none; }
  .lr-src { width: 110px; }
  .lr-client { display: none; }
}

/* ---- the states ------------------------------------------------------------------- */

.lx-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 500px;
  margin: 64px auto;
  padding: 0 var(--sp-5);
  font-family: var(--sans);
  text-align: center;
}
.lx-state h3 { font-size: 17px; font-weight: 650; color: var(--ink); }
.lx-state p { font-size: 13.5px; color: var(--ink-2); }
.lx-state-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--surface-2); color: var(--ink-2); }
.lx-state-icon .icon { width: 20px; height: 20px; }
.lx-state-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-top: 6px; }
.lx-save-q { font-size: 12.5px; color: var(--ink-2); overflow-wrap: anywhere; }

/* ---- in a panel -------------------------------------------------------------------- */

.lx.compact {
  height: max(460px, calc(100dvh - 250px));
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.lx.compact .lx-query { padding: 10px var(--sp-3); }
.lx.compact .lx-strip { padding: 6px var(--sp-3) 8px; }
.lx.compact .ld {
  grid-area: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  width: min(420px, 100%);
  box-shadow: var(--overlay-shadow);
}
.lx.compact.drawer-open .lx-body { grid-template-columns: 240px minmax(0, 1fr) 0; }
.lx.compact.facets-off.drawer-open .lx-body { grid-template-columns: 0 minmax(0, 1fr) 0; }
.lx.compact .lr-src { width: 132px; }
.lx-mode { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.lx-mode-hint { font-size: 13px; color: var(--ink-2); }
.pane-logs .lx-mode-host .svc-log pre.log { height: calc(100dvh - 390px); }
.lx-history .lx.compact { height: max(460px, calc(100dvh - 302px)); }
.cv-logs { gap: 6px; }

/* ---- log alerts ------------------------------------------------------------------- */

.la-name { display: flex; align-items: center; gap: var(--sp-2); font-weight: 500; }
.la-q { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin-top: 2px; font-size: 12.5px; color: var(--ink-2); }
.la-src { display: inline-flex; align-items: center; gap: 4px; }
.la-src .icon { width: 13px; height: 13px; color: var(--ink-3); }
.la-when { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--sp-3); }
.la-num { width: 100%; }
.la-preview {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 52px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  transition: opacity var(--dur) var(--ease);
}
.la-preview.stale { opacity: 0.6; }
.la-verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13.5px; }
.la-count { font-size: 17px; font-weight: 650; color: var(--ink); }
.la-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--code-ink); }
.la-line-t { color: var(--code-ink-2); }
.la-drawer .lq-src { max-width: 100%; }
.field > .lq, .field > .lq-src { flex: none; }
.la-drawer .field > .seg { align-self: flex-start; }

/* ---- narrow screens ----------------------------------------------------------------- */

@media (max-width: 859px) {
  .lx-query { flex-wrap: wrap; }
  .lq { flex-basis: 100%; order: 3; }
  .lq-src { max-width: 100%; }
  .lx-strip { grid-template-columns: minmax(0, 1fr); }
  .lx-stats, .lx-tools { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lx-live.on .lx-livedot::after { animation: none; display: none; }
  .lr-progress::after { animation: none; width: 100%; opacity: 0.6; }
  .lr-sizer, .lf-body, .hs-bars, .la-preview { transition: none; }
}