/* ---------- Data view, Browse (js/datatab.js) ----------
   Every entry in one list, filtered by the app's one filter. Shared here: layout, sizes, motion, touch and the hover kinds
   (Lift by default, Ink in Atlas, Solid in Record, as STYLE-GUIDE.md → Hover). Its parts are the shared ones: chips are
   .lens-chip (the topic lens's), buttons .btn, boxes .search, the switch .seg, pictures .gs-pic in their category's
   shape; so a theme restyles them all at once and sets nothing here. A theme may change the sizes below (theme only). */
.dx {
  --dx-row: 52px;            /* a table row */
  --dx-gh: 42px;             /* a group's heading */
  --dx-card-w: 300px;        /* a card's least width (cards fill the row) */
  --dx-card-h: 108px;
  --dx-gap: 10px;
  --dx-facets-w: 276px;
  --dx-pad: 20px;            /* the view's side margin */
  --dx-cols: minmax(200px, 2.4fr) minmax(120px, 1fr) minmax(140px, 1.1fr) 72px minmax(96px, .9fr) minmax(110px, 1fr) 124px;
  display: none; grid-column: 1 / -1; min-width: 0; min-height: 0; flex-direction: column; position: relative;
}
body[data-view="data"]:not([data-dmode="edit"]) .dx { display: flex; }
/* The panel's picture (--panel-glow) lies on its own still layer: painted on .dx itself, Safari repainted it under the list on every
   scrolled frame (50ms frames at 20,000 entries; 17ms this way) */
.dx { isolation: isolate; background-image: none; }
.dx::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background-image: var(--panel-glow, none); will-change: transform;
}

/* toolbar: the search, then the tools */
.dx-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px var(--dx-pad) 8px; flex: none; }
.dx-q { flex: 1 1 260px; width: auto; max-width: 480px; height: 34px; }
.dx-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }
.dx-tools .btn { height: 32px; }
.dx-menu-btn .dx-lab { color: var(--faint); }
.dx-menu-btn .dx-cur { color: var(--text); font-weight: 600; }
.dx-menu-btn:hover :is(.dx-cur, .dx-lab) { color: inherit; }
.dx-menu-btn .dx-dir { display: inline-grid; place-items: center; margin-left: -2px; }
.dx-menu-btn .dx-dir:empty { display: none; }
.dx-menu-btn .dx-cur:empty { display: none; }
.dx-layout button { height: 26px; padding: 0 9px; }
.dx-filters-btn { display: none; }
.dx-badge {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-ui, 999px);
  background: var(--solid, var(--accent)); color: var(--on-accent); font: 600 11px/1 var(--font-date); font-variant-numeric: tabular-nums;
}
.dx-badge:empty { display: none; }
.dx-say {
  position: absolute; right: var(--dx-pad); top: 54px; z-index: 41; margin: 0; padding: 7px 14px; max-width: min(520px, calc(100% - 40px));
  border-radius: var(--r-ui, 999px); background: var(--solid, var(--accent)); color: var(--on-accent); font-size: var(--t-meta);
  overflow-wrap: anywhere; animation: dx-in .25s cubic-bezier(.2, .9, .25, 1);
}

/* menus: Sort, Group, Views (one sheet each, the theme's surface with one hairline) */
.dx-pop {
  position: absolute; z-index: 40; min-width: 200px; max-width: calc(100% - 24px); padding: 8px; border-radius: var(--r-ui, 14px);
  background: var(--surface); box-shadow: inset 0 0 0 var(--hair) var(--line), var(--shadow-pop, var(--shadow));
  animation: dx-in .2s cubic-bezier(.2, .9, .25, 1);
}
.dx-pop[hidden] { display: none; }
.dx-menu { display: flex; flex-direction: column; gap: 3px; }
.dx-menu .lens-chip { justify-content: flex-start; min-height: 32px; }
.dx-menu .lens-chip .lens-nm { display: inline-flex; align-items: center; gap: 6px; }
.dx-dirbtn { margin-top: 4px; }
.dx-views { width: 300px; }
.dx-view { display: flex; align-items: center; gap: 2px; }
.dx-view .lens-chip { flex: 1; min-width: 0; }
.dx-view .lens-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-save { display: flex; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: var(--hair) solid var(--line); }
.dx-save .search { flex: 1; width: auto; min-width: 0; }
.dx-save .btn { flex: none; }
@keyframes dx-in { from { opacity: 0; transform: translateY(-4px); } }

.dx-body { flex: 1; min-height: 0; display: grid; grid-template-columns: var(--dx-facets-w) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }   /* the row is the window's height: the filters and the list scroll inside it */

/* ---------- the filters (facets) ---------- */
.dx-facets { min-height: 0; display: flex; flex-direction: column; border-right: var(--hair) solid var(--line); }
.dx-facet-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 12px 24px var(--dx-pad); }
.dx-facets-head, .dx-facets-foot { display: none; }
.dx-sec { border-bottom: var(--hair) solid var(--line); }
.dx-sec > summary {
  display: flex; align-items: center; gap: 8px; min-height: 40px; list-style: none; cursor: var(--cur-pointer, pointer);
  font-size: var(--t-label); font-weight: 650; text-transform: var(--label-case); letter-spacing: var(--caps); color: var(--muted);
}
.dx-sec > summary::-webkit-details-marker { display: none; }
.dx-sec > summary::after {
  content: ""; flex: none; width: 6px; height: 6px; margin-right: 4px; border: solid currentColor; border-width: 0 1.5px 1.5px 0;
  rotate: 45deg; translate: 0 -2px; transition: rotate .25s cubic-bezier(.2, .8, .2, 1), translate .25s;
}
.dx-sec[open] > summary::after { rotate: 225deg; translate: 0 2px; }
.dx-sec > summary:hover { color: var(--hover-ink, var(--text)); }
.dx-sec-cur {
  margin-left: auto; min-width: 0; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--accent);
}
.dx-sec-body { padding: 0 0 12px; }
.dx-sub { margin: 8px 0 0; font-size: var(--t-tiny); color: var(--muted); }
.dx-grp + .dx-grp { margin-top: 6px; }
.dx-ghead {
  display: flex; align-items: baseline; gap: 6px; width: 100%; padding: 6px 0 0; border: 0; background: none; text-align: left;
  font: inherit; font-size: var(--t-tiny); font-weight: 600; color: var(--muted); cursor: var(--cur-pointer, pointer);
}
.dx-ghead .lens-n { font: 400 11px/1 var(--font-date); font-variant-numeric: tabular-nums; color: var(--faint); }
.dx-ghead:hover, .dx-ghead[aria-pressed="true"] { color: var(--hover-ink, var(--accent)); }
.dx-chip .lens-nm { display: inline-flex; align-items: center; gap: 5px; }
.dx-chip-ic { display: inline-grid; color: var(--c); }
.dx-chip[aria-checked="true"] .dx-chip-ic, .dx-chip:hover .dx-chip-ic { color: inherit; }
.dx-chip.dx-eyeoff .lens-nm { text-decoration: line-through; text-decoration-thickness: var(--hair); color: var(--muted); }
.dx-picks:empty { display: none; }
.dx-range { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.dx-yr { width: auto; min-width: 0; height: 32px; padding: 0 10px; gap: 6px; }
.dx-yr > span { flex: none; font-size: var(--t-tiny); color: var(--muted); }
.dx-yr input { font-variant-numeric: tabular-nums; }
.dx-yr input[aria-invalid="true"] { color: var(--danger); }

/* ---------- the list ---------- */
.dx-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.dx-active { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-height: 36px; padding: 6px var(--dx-pad) 2px; flex: none; }
.dx-count { margin: 0; font-size: var(--t-meta); color: var(--muted); white-space: nowrap; }
.dx-count b { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; }
.dx-chips { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.dx-on { padding-right: 5px; }
.dx-on .dx-x { display: inline-grid; place-items: center; width: 16px; height: 16px; opacity: .7; }
.dx-on:hover .dx-x { opacity: 1; }
.dx-clear { height: 26px; padding: 0 10px; }

/* the time strip: entries per stretch of history (each stretch the same width), the chosen years lit */
.dx-strip { position: relative; height: 58px; margin: 6px var(--dx-pad) 0; flex: none; }
.dx-bins { position: absolute; inset: 0 0 16px; display: flex; align-items: flex-end; gap: 2px; }
.dx-bin {
  flex: 1; height: var(--h); border-radius: 2px 2px 0 0;
  background: color-mix(in srgb, var(--accent) 20%, transparent); transition: height .35s cubic-bezier(.2, .8, .2, 1), background-color .2s;
}
.dx-bin.lit { background: color-mix(in srgb, var(--accent) 62%, transparent); }
.dx-bins::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: var(--hair) solid var(--line-strong, var(--line)); }
.dx-sel {
  position: absolute; top: -2px; bottom: 14px; pointer-events: none; border-radius: var(--r-ui, 4px);
  box-shadow: inset 0 0 0 var(--hair) var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.dx-strip-hit { position: absolute; inset: -2px 0 14px; cursor: var(--cur-pointer, pointer); touch-action: pan-y; border-radius: var(--r-ui, 4px); }
.dx-ticks { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; overflow: hidden; font: 400 10px/14px var(--font-date); color: var(--faint); font-variant-numeric: tabular-nums; pointer-events: none; }
.dx-ticks span { position: absolute; left: calc(var(--x) * 100%); white-space: nowrap; padding-left: 2px; }

/* column headings (table) */
.dx-head {
  display: grid; grid-template-columns: var(--dx-cols); gap: 0 12px; align-items: center; flex: none;
  margin: 8px var(--dx-pad) 0; padding: 0 6px 6px; border-bottom: var(--hair) solid var(--line-strong, var(--line));
}
.dx-h {
  display: flex; align-items: center; gap: 3px; min-width: 0; padding: 0; border: 0; background: none; text-align: left;
  font: inherit; font-size: var(--t-tiny); font-weight: 600; text-transform: var(--label-case); letter-spacing: var(--caps); color: var(--muted);
}
button.dx-h { cursor: var(--cur-pointer, pointer); }
button.dx-h { margin: -3px -6px; padding: 3px 6px; border-radius: var(--r-ui, 6px); transition: background-color .2s, color .2s; }
.dx-h[aria-sort="ascending"], .dx-h[aria-sort="descending"] { color: var(--accent); }
button.dx-h:hover { color: var(--hover-ink, var(--accent)); background: color-mix(in srgb, var(--accent) 9%, transparent); }   /* a sorted one too: hover always shows */
.dx-h.dx-c-len { justify-content: flex-end; }
.dx-hdir { display: inline-grid; }

.dx-scroll { position: relative; flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 0 var(--dx-pad) 24px; outline: 0; overscroll-behavior: contain; }
.dx-scroll:focus-visible { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent); }
.dx-space { position: relative; will-change: transform; }   /* the list's own layer: scrolling moves it, never repaints it */
/* each line is placed by transform and reused as the list scrolls (js/datatab.js draw) */
.dx-line { position: absolute; left: 0; right: 0; top: 0; display: flex; gap: var(--dx-gap); contain: layout style; }
.dx-line.dx-away { visibility: hidden; }   /* a spare line, kept on the page for reuse (js/datatab.js draw) */
.dx-row {
  flex: 1 1 0; min-width: 0; display: grid; grid-template-columns: var(--dx-cols); gap: 0 12px; align-items: center;
  height: var(--dx-row); padding: 0 6px; border-bottom: var(--hair) solid var(--line); cursor: var(--cur-pointer, pointer);
}
.dx-row:hover { background: color-mix(in srgb, var(--c) 6%, transparent); box-shadow: inset 3px 0 0 var(--c); }
.dx-row.sel { background: color-mix(in srgb, var(--accent) 11%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.dx-c { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-meta); color: var(--muted); }
.dx-c-name { display: flex; align-items: center; gap: 8px; }
.dx-c-name .gs-slot { flex: none; width: 34px; display: grid; place-items: center; }
.dx-c-name .gs-ic { width: 26px; height: 26px; color: var(--muted); }   /* a colour, not opacity (Safari) */
.dx-c-name .gs-pic { transform: scale(.9); }
.dx-nm { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dx-nm b, .dx-nm small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-nm b { font-size: var(--t-name); font-weight: 600; color: var(--text); }
.dx-nm small { font-size: var(--t-tiny); color: var(--faint); }
.dx-cat { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; }
.dx-cat > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.dx-cat-ic { display: inline-grid; flex: none; color: var(--c); }
.dx-row .dx-c-date { display: flex; flex-direction: column; line-height: 1.3; font-variant-numeric: tabular-nums; }
.dx-d1 { color: color-mix(in srgb, var(--text) var(--ink-years, 100%), transparent); overflow: hidden; text-overflow: ellipsis; }
.dx-d2 { font-size: var(--t-tiny); color: var(--faint); overflow: hidden; text-overflow: ellipsis; }
.dx :is(.dx-d1, .dx-d2) .era { font-size: .84em; color: var(--muted); }
.dx :is(.dx-d1, .dx-d2) .to { margin: 0 .3em; color: var(--faint); }
.dx-c-len { text-align: right; font-variant-numeric: tabular-nums; }
.dx-c-tags { display: flex; gap: 4px; align-items: center; }
.dx-tag {
  flex: none; padding: 1px 7px; vertical-align: middle;   /* no clip of its own (a rounded clip on every tag repaints slowly in Safari): the cell clips them */
  border-radius: var(--r-ui, 999px); background: var(--surface-2); box-shadow: inset 0 0 0 var(--hair) var(--cap-ring); font-size: var(--t-tiny); color: var(--muted);
}
.dx-more { flex: none; font-size: var(--t-tiny); color: var(--faint); }
.dx-acts { display: flex; justify-content: flex-end; gap: 2px; visibility: hidden; }   /* visibility, not opacity: Safari paints each element with opacity on its own */
.dx-row:is(:hover, .sel, :focus-within) .dx-acts { visibility: visible; }
.dx-act { flex: none; width: 28px; height: 28px; }
.dx-act {
  display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--r-ui, 999px); background: none; color: var(--muted);
  cursor: var(--cur-pointer, pointer); transition: background-color .2s, color .2s, scale .4s cubic-bezier(.3, 1.5, .4, 1);
}
.dx-act:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.dx-act:active { scale: .9; transition-duration: .2s, .2s, .08s; }

/* a group's heading: a line of its own across the list */
.dx-gh {
  display: flex; align-items: center; gap: 8px; width: 100%; height: var(--dx-gh); padding: 10px 6px 0; border: 0;
  border-bottom: var(--hair) solid var(--line-strong, var(--line)); background: none; font: inherit; text-align: left;
  color: var(--text); cursor: var(--cur-pointer, pointer);
}
.dx-gh-chev { display: inline-grid; color: var(--muted); transition: rotate .25s cubic-bezier(.2, .8, .2, 1); }
.dx-gh[aria-expanded="true"] .dx-gh-chev { rotate: 90deg; }
.dx-gh-ic { display: inline-grid; color: var(--c, var(--accent)); }
.dx-gh-nm { font-size: var(--t-ui); font-weight: 650; text-transform: var(--label-case); letter-spacing: var(--caps-wide); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-gh-sub { font-size: var(--t-tiny); color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-gh-n { margin-left: auto; font: 400 11px/1 var(--font-date); font-variant-numeric: tabular-nums; color: var(--muted); }
.dx-gh:hover :is(.dx-gh-nm, .dx-gh-chev) { color: var(--hover-ink, var(--accent)); }

.dx-empty { position: absolute; left: 0; right: 0; top: 48px; display: grid; justify-items: center; gap: 12px; color: var(--muted); text-align: center; }
.dx-empty[hidden] { display: none; }
.dx-empty p { margin: 0; }

/* ---------- Cards (chosen, or always on a phone): the same row, laid out as a card ---------- */
.dx.cards .dx-head { display: none; }
.dx.cards .dx-scroll { padding-top: 10px; }
.dx.cards .dx-row {
  height: var(--dx-card-h); grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto; gap: 4px 10px;
  grid-template-areas: "name name" "date len" "cat acts"; align-items: center; padding: 10px 12px; border: 0; border-radius: var(--r-ui, 12px);
  background: var(--surface); box-shadow: inset 0 0 0 var(--hair) var(--line);
  flex: 0 0 calc((100% - var(--dx-gap) * (var(--dx-cols-n, 1) - 1)) / var(--dx-cols-n, 1));   /* the last line's cards keep their width */
}
.dx.cards .dx-row:hover { box-shadow: inset 0 0 0 var(--hair) var(--line), inset 3px 0 0 var(--c); }
.dx.cards .dx-row.sel { box-shadow: inset 0 0 0 var(--hair) var(--accent), inset 3px 0 0 var(--accent); }
.dx.cards .dx-c-name { grid-area: name; }
.dx.cards .dx-acts { grid-area: acts; visibility: visible; margin: -4px -6px -4px 0; }
.dx.cards .dx-c-date { grid-area: date; flex-direction: row; gap: 8px; align-items: baseline; }
.dx.cards .dx-c-len { grid-area: len; }
.dx.cards .dx-c-cat { grid-area: cat; }
.dx.cards :is(.dx-c-place, .dx-c-tags) { display: none; }   /* both are on the card it opens */
.dx.cards .dx-act { color: var(--faint); }   /* hovered, .dx-act:hover's ink wins (later); no :not(:hover), which Safari restyles on every pointer move */
.dx.cards .dx-act:hover { color: var(--accent); }

/* ---------- Hover kinds (STYLE-GUIDE.md → Hover): Ink (Atlas) keeps the resting fill and changes the ink; Solid (Record)
   turns the hovered thing solid with reversed words, as its chosen state. The lists in css/style.css, carried on here; kept
   apart so neither outweighs the other. */
:root:is([data-skin="atlas"]) {   /* Ink only: no fill, the ink changes (Record turns them solid below) */
  & :is(.dx-act:hover, .dx-ghead:hover, button.dx-h:hover, .dx-gh:hover .dx-gh-nm) { color: var(--hover-ink); }
  & :is(.dx-act:hover, button.dx-h:hover) { background: transparent; }
  & .dx-row:not(.sel):hover { background: transparent; }
  & .dx-row:not(.sel):hover .dx-nm b { color: var(--hover-ink); }
}
:root:is([data-skin="record"]) {
  /* Solid: every control of the view turns solid on hover, words reversed */
  & :is(.dx-sec > summary:hover, .dx-ghead:hover, button.dx-h:hover, .dx-gh:hover) { background: var(--solid, var(--accent)); color: var(--on-accent); }
  & :is(.dx-sec > summary:hover .dx-sec-cur, .dx-ghead:hover .lens-n, .dx-gh:hover :is(.dx-gh-nm, .dx-gh-chev, .dx-gh-ic, .dx-gh-sub, .dx-gh-n)) { color: var(--on-accent); }
  & :is(.dx-sec > summary, .dx-ghead, .dx-gh) { padding-inline: 6px; }
  & .dx-act:hover { background: var(--solid, var(--accent)); color: var(--on-accent); }
  & :is(.dx-row:not(.sel):hover, .dx.cards .dx-row:not(.sel):hover) { background: var(--solid, var(--accent)); color: var(--on-accent); box-shadow: none; }
  & .dx-row:not(.sel):hover :is(.dx-c, .dx-nm b, .dx-nm small, .dx-cat-ic, .dx-d1, .dx-d2, .era, .to, .dx-more, .dx-act, .gs-ic) { color: var(--on-accent); }
  & .dx-row:not(.sel):hover .dx-tag { background: transparent; color: var(--on-accent); box-shadow: inset 0 0 0 var(--hair) var(--on-accent); }   /* a chip inside a hovered tile reverses */
  & .dx-row:not(.sel):hover .dx-act:hover { background: var(--on-accent); color: var(--solid, var(--accent)); }
  & .dx-row.sel { background: color-mix(in srgb, var(--solid, var(--accent)) 12%, transparent); }
  & .dx-bin { border-radius: 0; }
}

/* ---------- narrower screens: the filters become a sheet over the list, opened by Filters ---------- */
@media (max-width: 1100px) {
  .dx { --dx-cols: minmax(190px, 2.2fr) minmax(110px, 1fr) minmax(130px, 1.1fr) 64px minmax(110px, 1fr) 124px; }
  .dx-c-place { display: none; }
  .dx-body { grid-template-columns: minmax(0, 1fr); }
  .dx-filters-btn { display: inline-flex; }
  .dx-facets {
    position: absolute; z-index: 35; left: 0; top: 0; bottom: 0; width: min(360px, 92vw); border-right: 0;
    background: var(--surface); box-shadow: inset calc(-1 * var(--hair)) 0 0 var(--line), var(--shadow-pop, var(--shadow));
    transform: translateX(-104%); visibility: hidden; transition: transform .32s cubic-bezier(.2, .8, .2, 1), visibility 0s .32s;
  }
  .dx-facets.open { transform: none; visibility: visible; transition: transform .32s cubic-bezier(.2, .8, .2, 1); }
  .dx-facets-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 4px var(--dx-pad); flex: none; }
  .dx-facets-head h2 { margin: 0; font-size: var(--t-title); font-weight: 650; text-transform: var(--label-case); letter-spacing: var(--caps-wide); }
  .dx-facets-foot { display: flex; padding: 10px var(--dx-pad) calc(10px + env(safe-area-inset-bottom)); border-top: var(--hair) solid var(--line); flex: none; }
  .dx-facets-foot .btn { flex: 1; justify-content: center; height: 40px; }
  .dx-body { position: relative; }
  /* behind the sheet the list dims, as behind the menu drawers (.menu-scrim); a tap there closes it (js/datatab.js) */
  .dx::after { content: ""; position: absolute; inset: 0; z-index: 34; background: rgb(0 0 0 / 0); pointer-events: none; transition: background-color .25s ease; }
  .dx.facets-open::after { background: rgb(0 0 0 / .35); pointer-events: auto; }
}
@media (max-width: 1100px) and (min-width: 761px) {   /* one toolbar row: Views, Copy link and Edit keep their icons only */
  .dx-tools .dx-lab:not(.dx-menu-btn .dx-lab), #dxViewsBtn .dx-lab { display: none; }
  .dx-q { flex-basis: 160px; }
}
@media (max-width: 760px) {
  .dx { --dx-pad: 12px; --dx-card-h: 96px; --dx-gap: 8px; }
  .dx-top { padding-top: 8px; gap: 6px; }
  .dx-q { flex: 1 1 0; min-width: 0; max-width: none; order: -2; }
  .dx-filters-btn { order: -1; }
  .dx-tools { flex-basis: 100%; margin-left: 0; flex-wrap: nowrap; }
  .dx-tools .dx-lab, .dx-layout { display: none; }
  .dx-tools .dx-menu-btn:not(#dxViewsBtn) { flex: 0 1 auto; min-width: 0; }
  .dx-menu-btn .dx-cur { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #dxViewsBtn { margin-left: auto; }
  .dx-active { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .dx-active::-webkit-scrollbar { display: none; }
  .dx-chips { flex-wrap: nowrap; }
  .dx-chips > * { flex: none; }
  .dx-strip { height: 54px; }   /* its touch area 40px tall */
  .dx-ticks span:is(:nth-child(even), :first-child) { display: none; }
  .dx-facets {
    position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: auto; height: min(84dvh, 720px); border-radius: 18px 18px 0 0;
    transform: translateY(104%); box-shadow: inset 0 var(--hair) 0 var(--line), var(--shadow-pop, var(--shadow));
  }
  .dx.cards .dx-row { padding: 8px 10px; }
  .dx-say { top: auto; bottom: 16px; right: 12px; left: 12px; max-width: none; text-align: center; }
  .dx-pop { position: fixed; left: 12px !important; right: 12px; top: auto !important; bottom: 12px; max-width: none; }
  .dx-views { width: auto; }
}
@media (max-width: 760px) and (orientation: landscape), (max-height: 500px) { .dx-strip { display: none; } }
@media (max-width: 420px) { .dx-tools .btn { padding: 0 10px; } #dxEdit { display: none; } .dx-filters-btn > span:not(.dx-badge) { display: none; } }   /* Edit is on each row's own button */

/* touch: full targets, 16px fields (iOS zooms on smaller), nothing hover-only */
@media (pointer: coarse) {
  .dx-act { width: 36px; height: 36px; }
  .dx-tools .btn, .dx-q, .dx-filters-btn { height: 38px; }
  .dx-layout button { height: 32px; }
  .dx-sec > summary { min-height: 44px; }
  .dx-ghead { min-height: 36px; padding-top: 0; align-items: center; }
  .dx-yr { height: 38px; }
  :is(.dx-q, .dx-yr, .dx-save) input { font-size: 16px; }
  .dx-menu .lens-chip { min-height: 40px; }
  .dx-clear { height: 36px; }
  .dx-on { min-height: 36px; }
}
@media (hover: none) { .dx-acts { visibility: visible; } }
@media (prefers-reduced-motion: reduce) { .dx-bin, .dx-facets, .dx-facets.open, .dx-gh-chev, .dx-sec > summary::after { transition: none; } .dx-pop, .dx-say { animation: none; } }