/* web/polish-network.css: the network area in the new view (release 350). Every rule under html[data-ux="new"]; the Classic view is untouched.
   Owner, 2026-10-29: every Network tab world class, nothing lost. One system for all of them, the bar People › Contacts set
   (web/people-layout.css): a quiet head (the title and its count on one line, then one toolbar: the helpers on the left, the
   one primary at the right), the explainer cut to two lines (a click shows it all: web/polish-network.js), the settings in
   plain boxes, and the people as ONE list with dividers on a card, never cards inside a card. A row: who (avatar, name, why),
   what they said, the draft, then its actions with the primary first and the rest quiet. Boxes he writes in are as tall as
   their words. Theme tokens only, so light and dark both follow. A phone (<= 640 px): the toolbar is a two-column grid with
   the primary the full width; rows use the whole width; 44 px targets stay (mobile.css, loaded after this file). */

/* ============ 1. The strips: no card around the list (the list is the card) ============ */
html[data-ux="new"] #network-replies.card,
html[data-ux="new"] #network-touch.card,
html[data-ux="new"] #network-boost.card,
html[data-ux="new"] #network-comments.card {
  padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
html[data-ux="new"] .pv { gap: 12px; }

/* ============ 2. A strip's head: the title and its count on one line, the toolbar under it ============ */
html[data-ux="new"] #network-replies > .np-touch-head,
html[data-ux="new"] #network-touch > .np-touch-head,
html[data-ux="new"] #network-comments > .np-touch-head,
html[data-ux="new"] #network-boost > .np-boost-top,
html[data-ux="new"] .pv-head > .pv-tools {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px; margin: 0; min-width: 0; }
/* the line break between the title line and the buttons */
html[data-ux="new"] #network-replies > .np-touch-head::before,
html[data-ux="new"] #network-touch > .np-touch-head::before,
html[data-ux="new"] #network-comments > .np-touch-head::before,
html[data-ux="new"] #network-boost > .np-boost-top::before {
  content: ""; order: 1; flex: 0 0 100%; height: 0; }
html[data-ux="new"] .np-touch-head > *, html[data-ux="new"] .np-boost-top > * { order: 2; }
html[data-ux="new"] .np-touch-head > .np-touch-h, html[data-ux="new"] .np-touch-head > .np-touch-titlebar,
html[data-ux="new"] .np-touch-head > .np-touch-progress, html[data-ux="new"] .np-boost-top > .np-boost-h { order: 0; }
html[data-ux="new"] .np-touch-head .np-touch-h, html[data-ux="new"] .np-boost-top .np-boost-h, html[data-ux="new"] .pv-head .pv-h {
  margin: 0; font-size: 18px; line-height: 1.3; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; text-transform: none; }
html[data-ux="new"] .np-touch-head > .np-touch-progress { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--ink-soft); white-space: normal; }
html[data-ux="new"] .np-touch-titlebar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
/* the helpers' wrappers step aside, so every button is one item of the toolbar */
html[data-ux="new"] .np-touch-head .np-pick-tools, html[data-ux="new"] .np-touch-head .pf-select,
html[data-ux="new"] .np-boost-top .np-boost-tools, html[data-ux="new"] .np-boost-top .pf-select,
html[data-ux="new"] .pv-tools .pf-select { display: contents; }
html[data-ux="new"] .np-touch-head .rd, html[data-ux="new"] .pv-tools .rd { display: inline-flex; }
html[data-ux="new"] .np-touch-head .np-pick-tools > *, html[data-ux="new"] .np-touch-head .pf-select > *,
html[data-ux="new"] .np-boost-top .np-boost-tools > *, html[data-ux="new"] .np-boost-top .pf-select > *,
html[data-ux="new"] .pv-tools .pf-select > * { order: 2; }
/* the one primary of the toolbar sits at its right end */
html[data-ux="new"] .np-touch-head .np-touch-sendall, html[data-ux="new"] .np-boost-top .np-boost-sendall,
html[data-ux="new"] .pv-tools .pv-sendall { order: 3; margin-left: auto; }
/* the toolbar's buttons: one height, one look */
html[data-ux="new"] .np-touch-head .btn--sm, html[data-ux="new"] .np-boost-top .btn--sm, html[data-ux="new"] .pv-tools .btn--sm,
html[data-ux="new"] .eg-select .btn--sm, html[data-ux="new"] .eg-ai-all .btn--sm {
  min-height: 34px; padding: 6px 14px; font-size: 13px; }
html[data-ux="new"] .np-touch-head .btn--ghost:disabled, html[data-ux="new"] .np-boost-top .btn--ghost:disabled,
html[data-ux="new"] .pv-tools .btn--ghost:disabled, html[data-ux="new"] .eg-select .btn--ghost:disabled { opacity: .55; }
html[data-ux="new"] .np-touch-head .btn--primary:disabled, html[data-ux="new"] .np-boost-top .btn--primary:disabled,
html[data-ux="new"] .pv-tools .btn--primary:disabled, html[data-ux="new"] .eg-select .btn--primary:disabled {
  background: var(--surface-soft); border-color: var(--line); color: var(--ink-soft); opacity: 1; }
/* Profile viewers' and Catch up's own head: Refresh and when it was read, then the helpers, then the primary */
html[data-ux="new"] .pv-head { gap: 10px; }
html[data-ux="new"] .pv-tools > * { order: 2; }
html[data-ux="new"] .pv-tools > .pv-refresh { order: 0; }
html[data-ux="new"] .pv-tools > .pv-read { order: 1; flex: 1 1 200px; font-size: 13px; }
html[data-ux="new"] .pv-tools::after { content: ""; order: 1; flex: 0 0 100%; height: 0; }

/* Stay in touch: the day's arrows and Refresh a joined group, the per-day picker beside them */
html[data-ux="new"] .np-touch-nav { display: inline-flex; gap: 0; }
html[data-ux="new"] .np-touch-nav .np-touch-go { min-height: 32px; border-radius: 0; margin: 0 0 0 -1px; padding: 4px 12px; font-size: 13px; }
html[data-ux="new"] .np-touch-nav .np-touch-go:first-child { border-radius: 999px 0 0 999px; margin-left: 0; }
html[data-ux="new"] .np-touch-nav .np-touch-go:last-child { border-radius: 0 999px 999px 0; }
html[data-ux="new"] .np-touch-perday { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-soft); }
html[data-ux="new"] .np-touch-perday-sel { min-height: 32px; padding: 4px 28px 4px 10px; border-radius: 8px; font-size: 13px; width: auto; }
html[data-ux="new"] #network-touch > .np-touch-bar { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; margin: -4px 0 0; }

/* ============ 3. The explainer: two lines; a click shows it all ============ */
html[data-ux="new"] #network-replies > .np-touch-sub, html[data-ux="new"] #network-touch > .np-touch-sub,
html[data-ux="new"] #network-comments > .np-touch-sub, html[data-ux="new"] #network-boost > .np-boost-sub,
html[data-ux="new"] .pv-head > .pv-sub {
  margin: 0; max-width: 100ch; font-size: 13px; line-height: 1.5; color: var(--ink-soft);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; cursor: pointer; }
html[data-ux="new"] #network-replies > .np-touch-sub.pn-open, html[data-ux="new"] #network-touch > .np-touch-sub.pn-open,
html[data-ux="new"] #network-comments > .np-touch-sub.pn-open, html[data-ux="new"] #network-boost > .np-boost-sub.pn-open,
html[data-ux="new"] .pv-head > .pv-sub.pn-open { display: block; overflow: visible; cursor: default; }

/* ============ 4. The settings boxes (Touch's switches, Boost's and Comments' own, Engagement's) ============ */
html[data-ux="new"] .np-auto { margin: 0 0 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--ds-radius, 12px); background: var(--card); box-shadow: none; }
html[data-ux="new"] .np-auto-line { margin: 10px 0 0; font-size: 13px; color: var(--ink-soft); }
html[data-ux="new"] .np-boost-auto, html[data-ux="new"] .np-cmt-auto {
  margin: 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--ds-radius, 12px); background: var(--card); display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; }
html[data-ux="new"] .np-boost-autoswitch, html[data-ux="new"] .np-cmt-auto-switch, html[data-ux="new"] .cm-auto__switch {
  display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; }
html[data-ux="new"] .np-boost-autoswitch input, html[data-ux="new"] .np-cmt-auto-switch input, html[data-ux="new"] .cm-auto__switch input,
html[data-ux="new"] .np-auto-item input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--blue); flex: 0 0 auto; }
html[data-ux="new"] .np-boost-autostate, html[data-ux="new"] .np-cmt-auto-status { margin: 0; padding-left: 28px; font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
@media (min-width: 641px) {
  html[data-ux="new"] .np-auto-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 20px; align-items: end; }
  html[data-ux="new"] .np-auto-row > .np-auto-item:first-child { grid-column: 1 / -1; }
  html[data-ux="new"] .np-auto-item { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0; font-size: 14px; color: var(--ink); }
  html[data-ux="new"] .np-auto-row > .np-auto-item:first-child { flex-direction: row; align-items: center; gap: 10px; font-weight: 600; }
  html[data-ux="new"] .np-auto-item > span { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
  html[data-ux="new"] .np-auto-row > .np-auto-item:first-child > span { font-size: 14px; color: var(--ink); }
  html[data-ux="new"] .np-auto-item > .np-auto-sel { width: 100%; min-height: 36px; border-radius: 8px; }
}

/* Touch's inner tabs: one segmented switch, as People's All · To review · Groups */
html[data-ux="new"] .np-touch-tabs { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; margin: 0 0 14px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--card); max-width: 100%; box-sizing: border-box; }
html[data-ux="new"] .np-touch-itab { min-height: 32px; margin: 0; padding: 4px 14px; border: 0; border-radius: 7px; background: none;
  color: var(--ink-soft); font-size: 13.5px; font-weight: 600; text-decoration: none; }
html[data-ux="new"] .np-touch-itab:hover { color: var(--ink); background: var(--blue-tint); }
html[data-ux="new"] .np-touch-itab.is-active, html[data-ux="new"] .np-touch-itab.is-active:hover { background: var(--blue); color: #fff; border: 0; }

/* Never send to: a quiet box with a chevron */
html[data-ux="new"] #network-replies > .np-never, html[data-ux="new"] #network-touch > .np-never,
html[data-ux="new"] #network-comments > .np-never, html[data-ux="new"] #network-boost > .np-boost-never,
html[data-ux="new"] .pv > .np-never, html[data-ux="new"] #cm-auto > .np-never {
  margin: 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--ds-radius, 12px); background: var(--card); }
html[data-ux="new"] .np-boost-never > summary { align-items: center; gap: 4px 10px; font-size: 13.5px; }
html[data-ux="new"] .np-boost-never > summary::before { content: ""; width: 6px; height: 6px; margin: 0 2px 0 0; border-right: 1.5px solid var(--ink-soft);
  border-bottom: 1.5px solid var(--ink-soft); transform: rotate(-45deg); transition: transform .15s; align-self: center; }
html[data-ux="new"] .np-boost-never[open] > summary::before { content: ""; transform: rotate(45deg); }
html[data-ux="new"] .np-boost-never .np-boost-nevernames { font-size: 13px; }
html[data-ux="new"] .np-boost-neverbody { padding: 8px 0 2px 18px; }

/* the filter bar (search, More filters, the count) */
html[data-ux="new"] .np-tabpanel .pf, html[data-ux="new"] .pv .pf { margin: 0; }
html[data-ux="new"] .np-tabpanel .pf-row, html[data-ux="new"] .pv .pf-row { gap: 8px 10px; align-items: center; }
html[data-ux="new"] .np-tabpanel .pf-q, html[data-ux="new"] .pv .pf-q { min-height: 38px; border-radius: 10px; font-size: 14px; flex: 0 1 320px; }
html[data-ux="new"] .np-tabpanel .pf-count, html[data-ux="new"] .pv .pf-count { font-size: 13px; font-weight: 600; color: var(--ink-soft); }

/* ============ 5. The lists: one card, rows divided by a line ============ */
html[data-ux="new"] .np-rw-grid,
html[data-ux="new"] #network-boost .np-boost-body,
html[data-ux="new"] .pv-list,
html[data-ux="new"] #network-touch .np-touch-list {
  display: flex; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line);
  border-radius: var(--ds-radius, 12px); background: var(--card); overflow: hidden; }
html[data-ux="new"] .np-rw-card,
html[data-ux="new"] #network-boost .np-boost-person,
html[data-ux="new"] .pv-list > .pv-row,
html[data-ux="new"] #network-comments > .np-cmt-item {
  margin: 0; padding: 14px 18px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none;
  display: flex; flex-direction: column; gap: 8px; min-width: 0; }
html[data-ux="new"] .np-rw-card:first-child,
html[data-ux="new"] #network-boost .np-boost-person:first-child,
html[data-ux="new"] .pv-list > .pv-row:first-child { border-top: 0; }
/* Top Comments' items are the strip's own children: a run of them drawn as one card (its first and last rounded) */
html[data-ux="new"] #network-comments.card { gap: 0; }
html[data-ux="new"] #network-comments.card > * { margin-top: 0; margin-bottom: 12px; }
html[data-ux="new"] #network-comments.card > :last-child { margin-bottom: 0; }
html[data-ux="new"] #network-comments > .np-cmt-item { border: 1px solid var(--line); border-top-width: 0; background: var(--card); }
html[data-ux="new"] #network-comments > .np-cmt-item:has(+ .np-cmt-item) { margin-bottom: 0; }
html[data-ux="new"] #network-comments > .np-cmt-item:not(.np-cmt-item + .np-cmt-item) { border-top-width: 1px;
  border-top-left-radius: var(--ds-radius, 12px); border-top-right-radius: var(--ds-radius, 12px); }
html[data-ux="new"] #network-comments > .np-cmt-item:not(:has(+ .np-cmt-item)) {
  border-bottom-left-radius: var(--ds-radius, 12px); border-bottom-right-radius: var(--ds-radius, 12px); }
html[data-ux="new"] #network-comments > .np-cmt-waiting-h { margin-bottom: 8px; }
/* hover */
html[data-ux="new"] .np-rw-card:hover, html[data-ux="new"] #network-boost .np-boost-person:hover,
html[data-ux="new"] .pv-list > .pv-row:hover, html[data-ux="new"] #network-comments > .np-cmt-item:hover { background: var(--surface-soft); }
/* a row's state: a stripe at its left edge (amber: needs your eye or on its way; red: failed) */
html[data-ux="new"] .np-rw-card.is-eye, html[data-ux="new"] #network-comments > .np-cmt-item.is-sending,
html[data-ux="new"] #network-comments > .np-cmt-item.is-chrome { box-shadow: inset 3px 0 0 var(--amber); }
html[data-ux="new"] .np-rw-card.is-failed, html[data-ux="new"] #network-comments > .np-cmt-item.is-failed { box-shadow: inset 3px 0 0 var(--red); }
html[data-ux="new"] .np-rw-card.is-kept { border-style: solid; }
html[data-ux="new"] .np-rw-card.is-kept > :not(.np-rw-who) { opacity: .75; }
html[data-ux="new"] #network-boost .np-boost-person.is-sent, html[data-ux="new"] #network-comments > .np-cmt-item.is-done,
html[data-ux="new"] #network-comments > .np-cmt-item.is-skipped { opacity: 1; }
html[data-ux="new"] #network-comments > .np-cmt-item.is-done > :not(.np-cmt-head):not(.np-cmt-ok):not(.np-touch-state),
html[data-ux="new"] #network-comments > .np-cmt-item.is-skipped > :not(.np-cmt-head) { opacity: .7; }

/* who: avatar, name, the why or the when beside it */
html[data-ux="new"] .np-rw-who, html[data-ux="new"] #network-boost .np-boost-who, html[data-ux="new"] .pv-top, html[data-ux="new"] .np-cmt-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
html[data-ux="new"] #network-boost .np-avatar--sm, html[data-ux="new"] .pv-top .np-avatar--sm, html[data-ux="new"] .np-cmt-head .np-avatar--sm {
  width: 32px; height: 32px; min-width: 32px; font-size: 12px; }
html[data-ux="new"] #network-touch .np-touch-line .np-avatar--sm { width: 32px; height: 32px; min-width: 32px; font-size: 12px; }
html[data-ux="new"] .np-rw-who .np-touch-name, html[data-ux="new"] #network-boost .np-boost-name, html[data-ux="new"] .pv-name,
html[data-ux="new"] .np-cmt-head .np-boost-name {
  font-size: 15px; font-weight: 700; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; text-align: left; }
html[data-ux="new"] .np-rw-who .np-touch-name:hover, html[data-ux="new"] #network-boost .np-boost-name:hover, html[data-ux="new"] .pv-name:hover,
html[data-ux="new"] .np-cmt-head .np-boost-name:hover { color: var(--blue); text-decoration: underline; }
html[data-ux="new"] .np-rw-when, html[data-ux="new"] .np-cmt-when { margin-left: auto; font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; }
html[data-ux="new"] .pv-viewed { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; }
html[data-ux="new"] .pv-id { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; flex: 1 1 0; min-width: 0; }
html[data-ux="new"] .np-cmt-rank { min-width: 22px; font-size: 12px; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
html[data-ux="new"] #network-boost .np-boost-why, html[data-ux="new"] .pv-headline, html[data-ux="new"] .np-cmt-why, html[data-ux="new"] .cu-occ {
  margin: -4px 0 0; font-size: 13px; color: var(--ink-soft); overflow-wrap: anywhere; }
html[data-ux="new"] .pv-pick, html[data-ux="new"] .np-pick, html[data-ux="new"] .np-touch-pick, html[data-ux="new"] .nt-check, html[data-ux="new"] .eg-pick__box {
  width: 18px; height: 18px; accent-color: var(--blue); cursor: pointer; }

/* what they said: a quote; the draft: a soft box */
html[data-ux="new"] .np-rw-said { margin: 0; padding: 0 0 0 12px; border: 0; border-left: 3px solid var(--line); border-radius: 0; background: none; }
html[data-ux="new"] .np-rw-msg { font-size: 14px; line-height: 1.5; color: var(--ink); }
html[data-ux="new"] .np-rw-draft { margin: 0; padding: 10px 12px; border: 0; border-radius: 10px; background: var(--surface-soft); }
html[data-ux="new"] .np-rw-draft-h { margin: 0 0 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: var(--ink-soft); }
html[data-ux="new"] .np-rw-draft-text { font-size: 14px; line-height: 1.5; color: var(--ink); }
html[data-ux="new"] .np-cmt-excerpt { margin: 0; padding-left: 12px; border-left: 3px solid var(--line); font-size: 13.5px; line-height: 1.5;
  color: var(--ink-soft); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
html[data-ux="new"] .np-cmt-hold { margin: 0; padding: 8px 12px; border: 0; border-radius: 8px; background: var(--amber-tint); color: var(--ink); font-size: 13px; font-weight: 600; }

/* the boxes he writes in: as tall as their words */
html[data-ux="new"] #network-boost .np-boost-note, html[data-ux="new"] .pv-text, html[data-ux="new"] .np-cmt-draft {
  field-sizing: content; min-height: 4.8em; max-height: 22em; width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px;
  font-size: 14px; line-height: 1.5; resize: vertical; }
html[data-ux="new"] .pv-subject { min-height: 38px; border-radius: 10px; font-size: 14px; }
html[data-ux="new"] .pv-draft { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

/* a row's actions: the primary first, the rest quiet */
html[data-ux="new"] .np-rw-actions, html[data-ux="new"] #network-boost .np-boost-actions, html[data-ux="new"] .pv-acts, html[data-ux="new"] .np-cmt-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; }
html[data-ux="new"] .np-rw-actions .btn--sm, html[data-ux="new"] #network-boost .np-boost-actions .btn--sm, html[data-ux="new"] .pv-acts .btn--sm,
html[data-ux="new"] .np-cmt-actions .btn--sm, html[data-ux="new"] .nt-acts .btn--sm, html[data-ux="new"] #network-touch .np-touch-quick .btn--sm,
html[data-ux="new"] .np-rw-write .btn--sm, html[data-ux="new"] .pv-draft .ai-req .btn--sm {
  min-height: 34px; padding: 6px 14px; font-size: 13px; }
html[data-ux="new"] .np-rw-actions .btn--ghost:not(.ai-req-write), html[data-ux="new"] #network-boost .np-boost-actions .btn--ghost:not(.ai-req-write),
html[data-ux="new"] .pv-acts .btn--ghost:not(.ai-req-write), html[data-ux="new"] .np-cmt-actions .btn--ghost:not(.ai-req-write),
html[data-ux="new"] .cm-reply__actions .btn--ghost:not(.ai-req-write) {
  border-color: transparent; background: none; color: var(--ink-soft); }
html[data-ux="new"] .np-rw-actions .btn--ghost:hover:not(:disabled), html[data-ux="new"] #network-boost .np-boost-actions .btn--ghost:hover:not(:disabled),
html[data-ux="new"] .pv-acts .btn--ghost:hover:not(:disabled), html[data-ux="new"] .np-cmt-actions .btn--ghost:hover:not(:disabled),
html[data-ux="new"] .cm-reply__actions .btn--ghost:hover:not(:disabled) { border-color: var(--line); background: var(--card); color: var(--ink); }
html[data-ux="new"] .np-rw-actions .btn--primary, html[data-ux="new"] #network-boost .np-boost-actions .btn--primary, html[data-ux="new"] .pv-acts .btn--primary,
html[data-ux="new"] .np-cmt-actions .btn--primary { min-width: 84px; }
html[data-ux="new"] .np-rw-actions .btn--primary:disabled { background: var(--surface-soft); border-color: var(--line); color: var(--ink-soft); opacity: 1; }
html[data-ux="new"] #network-list .ai-req-write, html[data-ux="new"] #cm-list .ai-req-write { border-color: var(--blue); color: var(--blue); background: var(--card); }
html[data-ux="new"] .pv-draft > .ai-req { align-self: flex-start; }
html[data-ux="new"] .np-cmt-reaction { min-height: 34px; padding: 4px 28px 4px 12px; border-radius: 999px; font-size: 13px; }
html[data-ux="new"] .np-rw-actions > .np-excluded { order: 9; }
html[data-ux="new"] .pv-count { font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* ============ 6. Boost: a post's own head over its people ============ */
html[data-ux="new"] #network-boost .np-boost-post { margin: 0; padding: 0; border: 0; background: none; display: flex; flex-direction: column; gap: 8px; }
html[data-ux="new"] #network-boost .np-boost-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 6px 0 0; padding: 0 2px; }
html[data-ux="new"] #network-boost .np-boost-title { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.35; text-decoration: none; min-width: 0; overflow-wrap: anywhere; }
html[data-ux="new"] #network-boost .np-boost-title:hover { color: var(--blue); text-decoration: underline; }
html[data-ux="new"] #network-boost .np-boost-toggle { font-size: 13px; color: var(--ink-soft); }
html[data-ux="new"] #network-boost .np-boost-sentline { font-size: 13px; font-weight: 600; color: var(--green); }
html[data-ux="new"] #network-boost .np-boost-senttext { margin: 0; padding-left: 12px; border-left: 3px solid var(--line); font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
html[data-ux="new"] #network-boost .np-boost-day { margin: 6px 0 0; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
html[data-ux="new"] #network-boost .np-boost-day:empty { display: none; }

/* ============ 7. Top Comments: the waiting header is a label over its run ============ */
html[data-ux="new"] #network-comments .np-cmt-waiting-h { padding: 0 2px; border: 0; background: none; box-shadow: none;
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--amber); }
html[data-ux="new"] #network-comments .np-cmt-waiting-h.is-rest { color: var(--ink-soft); }
html[data-ux="new"] #network-comments .np-cmt-pace-sel { min-height: 30px; padding: 2px 28px 2px 10px; border-radius: 8px; font-size: 13px; }
html[data-ux="new"] #network-comments .np-cmt-ok { font-size: 13px; font-weight: 600; color: var(--green); }

/* ============ 8. Stay in touch's list ============ */
html[data-ux="new"] #network-touch .np-touch-line { min-height: 56px; padding: 8px 16px; gap: 12px; }
html[data-ux="new"] #network-touch .np-touch-line:not(:has(.np-touch-picklabel)) { padding-left: 52px; }
html[data-ux="new"] #network-touch .np-touch-name { font-size: 15px; font-weight: 700; color: var(--ink); }
html[data-ux="new"] #network-touch .np-touch-name:hover { color: var(--blue); }
html[data-ux="new"] #network-touch .np-touch-role { font-size: 13px; color: var(--ink-soft); }
html[data-ux="new"] #network-touch .np-touch-why { font-size: 13px; color: var(--ink-soft); }
html[data-ux="new"] #network-touch .np-touch-toggle { width: 30px; height: 30px; border-radius: 8px; border: 1px solid transparent; background: none; color: var(--ink-soft); }
html[data-ux="new"] #network-touch .np-touch-toggle:hover { border-color: var(--line); background: var(--card); color: var(--ink); }
html[data-ux="new"] #network-touch .np-touch-row:hover:not(.is-open) { background: var(--surface-soft); }
html[data-ux="new"] #network-touch .np-touch-quick .btn--ghost { border-color: transparent; background: none; color: var(--ink-soft); }
html[data-ux="new"] #network-touch .np-touch-quick .btn--ghost:hover { border-color: var(--line); background: var(--card); color: var(--ink); }

/* ============ 9. Today: one list with dividers, the buttons beside the words ============ */
html[data-ux="new"] .nt-head { margin: 4px 0 14px; align-items: baseline; }
html[data-ux="new"] .nt-title { font-size: 24px; font-weight: 750; letter-spacing: -0.015em; }
html[data-ux="new"] .nt-sub { font-size: 14px; font-weight: 600; color: var(--ink-soft); }
html[data-ux="new"] .nt-chips { gap: 8px; margin-bottom: 12px; }
html[data-ux="new"] .nt-filter { min-height: 32px; padding: 5px 14px; font-size: 13px; color: var(--ink-soft); }
html[data-ux="new"] .nt-filter:hover { color: var(--ink); border-color: var(--ink-faint, var(--line)); }
html[data-ux="new"] .nt-filter.is-on, html[data-ux="new"] .nt-filter.is-on:hover { border-color: var(--blue); background: var(--blue); color: #fff; }
html[data-ux="new"] .nt-bar { gap: 8px; margin-bottom: 14px; }
html[data-ux="new"] .nt-bar .btn--sm { min-height: 34px; padding: 6px 14px; font-size: 13px; }
html[data-ux="new"] .nt-bar > .nt-sendall { order: 3; }
html[data-ux="new"] .nt-bar > .nt-line { order: 4; flex-basis: 100%; }
html[data-ux="new"] .nt-bar > .nt-line:empty { display: none; }
html[data-ux="new"] .nt-bar .nt-sendall:disabled { background: var(--surface-soft); border-color: var(--line); color: var(--ink-soft); opacity: 1; }
html[data-ux="new"] .nt-list { gap: 0; border: 1px solid var(--line); border-radius: var(--ds-radius, 12px); background: var(--card); overflow: hidden; }
html[data-ux="new"] .nt-row { gap: 6px 14px; padding: 14px 18px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
html[data-ux="new"] .nt-row:first-child { border-top: 0; }
html[data-ux="new"] .nt-row:hover { background: var(--surface-soft); }
html[data-ux="new"] .nt-row.is-blocked { background: none; }
html[data-ux="new"] .nt-row.is-blocked > .nt-main > :not(.nt-block), html[data-ux="new"] .nt-row.is-blocked > .nt-photo { opacity: .7; }
html[data-ux="new"] .nt-check { margin-top: 11px; }
html[data-ux="new"] .nt-photo { width: 40px; height: 40px; font-size: 15px; }
html[data-ux="new"] .nt-who { gap: 4px 8px; }
html[data-ux="new"] .nt-name { font-size: 15px; }
html[data-ux="new"] .nt-chip { padding: 0 8px; border: 0; background: var(--surface-soft); font-size: 11.5px; line-height: 20px; color: var(--ink-soft); }
html[data-ux="new"] .nt-chip--reply { background: var(--blue-tint); color: var(--blue); }
html[data-ux="new"] .nt-why { font-size: 12.5px; }
html[data-ux="new"] .nt-quote { margin-top: 2px; font-size: 13px; }
html[data-ux="new"] .nt-draft { margin-top: 6px; font-size: 14px; }
html[data-ux="new"] .nt-block { margin-top: 8px; padding: 6px 10px; border: 0; border-radius: 8px; background: var(--amber-tint); font-size: 12.5px; font-weight: 600; }
html[data-ux="new"] .nt-acts { gap: 8px; }
html[data-ux="new"] .nt-acts .btn--ghost { border-color: transparent; background: none; color: var(--ink-soft); }
html[data-ux="new"] .nt-acts .btn--ghost:hover { border-color: var(--line); background: var(--card); color: var(--ink); }
html[data-ux="new"] .nt-acts .btn--primary:disabled { background: var(--surface-soft); border-color: var(--line); color: var(--ink-soft); opacity: 1; }
html[data-ux="new"] .nt-more { margin-top: 16px; }
@media (min-width: 760px) {
  html[data-ux="new"] .nt-acts { flex-direction: row; align-items: center; align-self: center; }
  html[data-ux="new"] .nt-acts .btn--primary { min-width: 76px; }
}

/* ============ 10. Engagement ============ */
html[data-ux="new"] .eg-bar { gap: 10px 16px; margin-bottom: 12px; }
html[data-ux="new"] .cm-filters { gap: 12px; margin-bottom: 8px; }
html[data-ux="new"] #cm-note { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
html[data-ux="new"] #cm-auto { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
html[data-ux="new"] #cm-auto .cm-auto__box { max-width: none; width: auto; margin: 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--ds-radius, 12px); background: var(--card); box-shadow: none; }
html[data-ux="new"] #cm-auto .cm-auto__rule, html[data-ux="new"] #cm-auto .cm-auto__status { margin: 4px 0 0; padding-left: 28px; font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
html[data-ux="new"] .eg-people { margin-bottom: 12px; }
html[data-ux="new"] .eg-select__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
html[data-ux="new"] .eg-select .pf-select { display: contents; }
html[data-ux="new"] .eg-select .eg-sendall { margin-left: auto; }
html[data-ux="new"] .eg-ai-all { display: flex; justify-content: flex-start; margin: 0 0 12px; }
html[data-ux="new"] #cm-list .eg-sec, html[data-ux="new"] #eg-theirs .eg-sec { margin: 18px 0 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: var(--ink-soft); }
html[data-ux="new"] #cm-list .cm-post, html[data-ux="new"] #eg-theirs .cm-post { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--ds-radius, 12px); background: var(--card); box-shadow: none; }
html[data-ux="new"] #eg-theirs .cm-post.fu-card--needs { box-shadow: inset 3px 0 0 var(--amber); border-color: var(--line); }
html[data-ux="new"] #cm-list .cm-post__title, html[data-ux="new"] #eg-theirs .cm-post__title { font-size: 15px; font-weight: 700; }

/* ============ 11. A phone ============ */
@media (max-width: 640px) {
  /* the toolbar: two helpers a line, the primary the whole width at the end */
  html[data-ux="new"] .np-touch-head > .btn, html[data-ux="new"] .np-touch-head .pf-select > .btn, html[data-ux="new"] .np-touch-head > .rd,
  html[data-ux="new"] .np-touch-head > .ai-all, html[data-ux="new"] .np-boost-top .btn, html[data-ux="new"] .pv-tools > .btn:not(.pv-refresh),
  html[data-ux="new"] .pv-tools > .rd, html[data-ux="new"] .pv-tools .pf-select > .btn, html[data-ux="new"] .np-touch-head .np-pick-tools > .btn {
    flex: 1 1 calc(50% - 4px); min-width: 0; }
  html[data-ux="new"] .np-touch-head .rd > .btn, html[data-ux="new"] .pv-tools .rd > .btn { width: 100%; }
  html[data-ux="new"] .np-touch-head .np-touch-sendall, html[data-ux="new"] .np-boost-top .np-boost-sendall, html[data-ux="new"] .pv-tools .pv-sendall {
    flex: 1 1 100%; margin-left: 0; }
  html[data-ux="new"] .np-touch-head .np-touch-h, html[data-ux="new"] .np-boost-top .np-boost-h, html[data-ux="new"] .pv-head .pv-h { font-size: 17px; }
  html[data-ux="new"] .np-touch-nav .np-touch-go { min-height: 44px; min-width: 44px; }
  html[data-ux="new"] .np-touch-head > .np-touch-progress { flex-basis: 100%; }

  html[data-ux="new"] .np-touch-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  html[data-ux="new"] .np-touch-itab { flex: 0 0 auto; min-height: 40px; white-space: nowrap; }
  html[data-ux="new"] .np-auto { padding: 12px 14px; }

  /* fingers: every button and picker of these lists 44 px tall (the desktop's 34 px rules above carry an id) */
  html[data-ux="new"] section.view #network-list .btn, html[data-ux="new"] section.view #network-list select,
  html[data-ux="new"] section.view .nt-list .btn, html[data-ux="new"] section.view .nt-bar .btn, html[data-ux="new"] section.view #cm-list .btn, html[data-ux="new"] section.view #eg-theirs .btn,
  html[data-ux="new"] section.view .eg-select .btn { min-height: 44px; }
  html[data-ux="new"] section.view #network-touch .np-touch-toggle { width: 44px; height: 44px; }
  html[data-ux="new"] section.view #network-list .np-boost-name, html[data-ux="new"] section.view #network-boost .np-boost-toggle {
    display: inline-flex; align-items: center; min-height: 44px; }

  /* rows: the whole width */
  html[data-ux="new"] .np-rw-card, html[data-ux="new"] #network-boost .np-boost-person, html[data-ux="new"] .pv-list > .pv-row,
  html[data-ux="new"] #network-comments > .np-cmt-item { padding: 14px; }
  html[data-ux="new"] .np-rw-actions .btn--primary, html[data-ux="new"] #network-boost .np-boost-actions .btn--primary, html[data-ux="new"] .pv-acts .btn--primary,
  html[data-ux="new"] .np-cmt-actions .btn--primary { flex: 1 1 100%; }
  html[data-ux="new"] .np-rw-actions .btn--ghost, html[data-ux="new"] #network-boost .np-boost-actions .btn--ghost, html[data-ux="new"] .pv-acts .btn--ghost,
  html[data-ux="new"] .np-cmt-actions .btn--ghost { padding-left: 10px; padding-right: 10px; }
  html[data-ux="new"] .np-cmt-reaction { flex: 1 1 100%; }
  html[data-ux="new"] .np-cmt-head .np-boost-name { flex: 1 1 0; min-width: 0; }
  html[data-ux="new"] .np-cmt-head .np-cmt-when { order: 9; flex: 1 1 100%; margin-left: 0; }
  html[data-ux="new"] .np-tabpanel .pf-q, html[data-ux="new"] .pv .pf-q { flex: 1 1 100%; }

  /* Stay in touch's rows: the name gets the line; why, the flag and the quick buttons under it */
  html[data-ux="new"] #network-touch .np-touch-line { flex-wrap: wrap; padding: 8px 12px; gap: 4px 10px; }
  html[data-ux="new"] #network-touch .np-touch-line:not(:has(.np-touch-picklabel)) { padding-left: 46px; }
  html[data-ux="new"] #network-touch .np-touch-id { flex: 1 1 0; min-width: 0; }
  html[data-ux="new"] #network-touch .np-touch-id .np-touch-name { white-space: normal; text-align: left; }
  html[data-ux="new"] #network-touch .np-touch-why { flex: 1 1 100%; order: 5; padding-left: 0; }
  html[data-ux="new"] #network-touch .np-touch-flag { order: 6; }
  html[data-ux="new"] #network-touch .np-touch-quick { order: 7; margin-left: auto; }

  /* Today: the buttons under the words */
  html[data-ux="new"] .nt-row { padding: 14px; gap: 6px 12px; }
  html[data-ux="new"] .nt-acts { grid-column: 3 / -1; justify-content: flex-start; }
  html[data-ux="new"] .nt-acts .btn--primary { flex: 1 1 auto; }
  html[data-ux="new"] .nt-bar .btn--sm { flex: 1 1 calc(50% - 4px); }
  html[data-ux="new"] .nt-bar .nt-sendall { flex-basis: 100%; }
  html[data-ux="new"] .nt-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 0 16px; }
  html[data-ux="new"] .nt-filter { flex: 0 0 auto; min-height: 44px; white-space: nowrap; }

  /* Engagement */
  html[data-ux="new"] .eg-select .btn--sm { flex: 1 1 calc(50% - 4px); }
  html[data-ux="new"] .eg-select .eg-sendall { flex-basis: 100%; margin-left: 0; }
  html[data-ux="new"] #cm-list .cm-post, html[data-ux="new"] #eg-theirs .cm-post { padding: 14px; }
}

/* ============ 350b: one heading per tab (owner 2026-10-29: "Network's 'Replies waiting' heading appears twice") ============
   The sub-tab row already names the page, and each strip names itself ("Replies waiting (5)"), so the small uppercase
   head over every tab said it a third time. It stays for a screen reader; its icons (eye, import, refresh) sit at the
   right of a quiet row, with no rule under it. */
html[data-ux="new"] .np-head.np-grouped > h2,
html[data-ux="new"] [data-view-panel="engagement"] > .section-head > h2 {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html[data-ux="new"] .np-head.np-grouped { border-bottom: 0; min-height: 0; margin-bottom: 0; justify-content: flex-end; }
html[data-ux="new"] [data-view-panel="engagement"] > .section-head { justify-content: flex-end; }

/* ============ 351: Network › Queue said plainly (owner 2026-10-29: "Most confusing dashboard of all" / "we can't say for
   sure what's in the queue and in what order they will be published or posted"). web/li-queue.js draws, in the new view
   only: the status line with the next post under it; a Sending now strip when his own sends are going out; Planned (his
   posts) near the top; Up next as two lists in time order, numbered (Messages going out, then Pages Studio will open, one
   row per visit, folded by kind); a verb chip on every row; Budgets, Pauses, Chrome and History under one closed "How the
   queue works". One blue accent; theme tokens only; 44 px targets on a phone; nothing wider than the screen. ============ */
html[data-ux="new"] .lq { gap: 14px; }
html[data-ux="new"] .lq-lines { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html[data-ux="new"] .lq-line-post { font-size: 13.5px; color: var(--ink-soft); }
html[data-ux="new"] .lq-line-post .lq-lead { color: var(--ink); font-weight: 700; }
html[data-ux="new"] .lq-post-title { color: var(--ink-soft); }
html[data-ux="new"] .lq-post-notes.is-none { color: var(--ink); }
html[data-ux="new"] .lq-post-link { color: var(--blue); font-weight: 600; text-decoration: none; }
html[data-ux="new"] .lq-post-link:hover { text-decoration: underline; }

/* Sending now: his own sends on their way, one quiet blue line */
html[data-ux="new"] .lq-sending { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; padding: 10px 14px;
  border: 1px solid var(--blue); border-radius: var(--radius-sm); background: var(--blue-tint); color: var(--ink); font-size: 14px; line-height: 1.45; }
html[data-ux="new"] .lq-sending-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); animation: wd-blink 1.6s ease-in-out infinite; }
@keyframes wd-blink { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { html[data-ux="new"] .lq-sending-dot { animation: none; } }
html[data-ux="new"] .lq-sending-h { font-weight: 700; }
html[data-ux="new"] .lq-sending-who { min-width: 0; overflow-wrap: anywhere; }
html[data-ux="new"] .lq-sending-when { font-variant-numeric: tabular-nums; color: var(--ink); }
html[data-ux="new"] .lq-sending-hint { margin-left: auto; font-size: 12.5px; color: var(--ink-soft); }

/* Up next: two lists, each with its heading and count */
html[data-ux="new"] .lq-next { padding: 16px 18px; }
html[data-ux="new"] .lq-sec + .lq-sec { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
html[data-ux="new"] .lq-sec-h { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--ink); }
html[data-ux="new"] .lq-sec-n { min-width: 22px; padding: 0 7px; border-radius: var(--radius-pill); background: var(--surface-soft); color: var(--ink-soft);
  font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
html[data-ux="new"] .lq-sec-hint { margin: -4px 0 8px; }
html[data-ux="new"] .lq-out-none { padding: 10px 12px; border: 1px dashed var(--line); border-radius: var(--radius-sm); }
html[data-ux="new"] .lq-today-link { color: var(--blue); font-weight: 600; }

/* a row of the plain lists: number, about when, the verb, what and who; under it his words and when it drops */
html[data-ux="new"] .lq-timeline { gap: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
html[data-ux="new"] .lq-timeline > .lq-item { border: 0; border-radius: 0; border-top: 1px solid var(--line-soft, var(--line)); background: var(--card); padding: 8px 6px 8px 12px; }
html[data-ux="new"] .lq-timeline > .lq-item:first-child { border-top: 0; }
html[data-ux="new"] .lq-timeline > .lq-item.is-next { background: var(--blue-tint); box-shadow: inset 3px 0 0 var(--blue); }
html[data-ux="new"] .lq-num { display: inline-block; min-width: 22px; color: var(--ink-soft); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
html[data-ux="new"] .lq-timeline .lq-eta { display: inline-block; min-width: 82px; font-weight: 600; color: var(--ink-soft); font-size: 13px; }
html[data-ux="new"] .lq-verb { min-width: 58px; justify-content: center; border-color: var(--line); background: var(--surface-soft); color: var(--ink); font-weight: 600; }
html[data-ux="new"] .lq-verb--send, html[data-ux="new"] .lq-verb--publish { border-color: var(--blue); background: var(--card); color: var(--blue); }
html[data-ux="new"] .lq-next-chip { border-color: var(--blue); background: var(--blue); color: #fff; font-weight: 700; }
html[data-ux="new"] .lq-words { grid-column: 1; margin: 0; padding-left: 26px; min-width: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-ux="new"] .lq-timeline .lq-item-meta { padding-left: 26px; }
html[data-ux="new"] .lq-sec--pages .lq-timeline .lq-item-meta { padding-left: 0; }
html[data-ux="new"] .lq-drops { color: var(--ink-soft); }

/* Pages Studio will open: one row per visit, folded; open, a line per kind, folded again */
html[data-ux="new"] .lq-visits { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line);
  border-radius: var(--radius-sm); overflow: hidden; }
html[data-ux="new"] .lq-visit { min-width: 0; border-top: 1px solid var(--line-soft, var(--line)); background: var(--card); }
html[data-ux="new"] .lq-visit:first-child { border-top: 0; }
html[data-ux="new"] .lq-visit.is-next > .lq-visit-head { background: var(--blue-tint); box-shadow: inset 3px 0 0 var(--blue); }
html[data-ux="new"] .lq .btn.lq-visit-head, html[data-ux="new"] .lq .btn.lq-kind-head { display: flex; justify-content: flex-start; white-space: normal; height: auto; border-radius: 0; box-shadow: none; font-weight: 400; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; width: 100%; min-width: 0;
  min-height: 44px; margin: 0; padding: 10px 12px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
html[data-ux="new"] .lq .btn.lq-visit-head:hover, html[data-ux="new"] .lq .btn.lq-kind-head:hover { background: var(--surface-soft); }
html[data-ux="new"] .lq-visit-head:focus-visible, html[data-ux="new"] .lq-kind-head:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
html[data-ux="new"] .lq-visit-at { min-width: 82px; color: var(--ink-soft); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
html[data-ux="new"] .lq-visit-title { min-width: 0; overflow-wrap: anywhere; }
html[data-ux="new"] .lq-visit-kinds { flex: 1 1 14rem; min-width: 0; color: var(--ink-soft); font-size: 13px; overflow-wrap: anywhere; }
html[data-ux="new"] .lq .btn.lq-visit-head, html[data-ux="new"] .lq .btn.lq-kind-head { position: relative; padding-right: 36px; }
html[data-ux="new"] .lq-caret { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); color: var(--ink-soft); }
html[data-ux="new"] .lq-visit-body { display: flex; flex-direction: column; gap: 6px; padding: 0 12px 12px 44px; }
html[data-ux="new"] .lq .btn.lq-kind-head { min-height: 40px; padding: 6px 36px 6px 8px; border-radius: var(--radius-sm); font-size: 13.5px; }
html[data-ux="new"] .lq-kind-name { font-weight: 600; }
html[data-ux="new"] .lq-kind-at { color: var(--ink-soft); font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* Pauses: three states, said in words */
html[data-ux="new"] .lq-auto--auto { color: var(--ink); }
html[data-ux="new"] .lq-auto--manual, html[data-ux="new"] .lq-auto--unknown { color: var(--ink-soft); }

/* How the queue works: Budgets, Pauses, Chrome, History, closed until he opens it */
html[data-ux="new"] .lq-how { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
html[data-ux="new"] .lq-how > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-height: 44px; padding: 12px 16px; cursor: pointer;
  list-style: none; color: var(--ink); }
html[data-ux="new"] .lq-how > summary::-webkit-details-marker { display: none; }
html[data-ux="new"] .lq-how > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; border-radius: var(--radius); }
html[data-ux="new"] .lq-how-title { font-size: 14.5px; font-weight: 700; }
html[data-ux="new"] .lq-how-sub { font-size: 13px; color: var(--ink-soft); }
html[data-ux="new"] .lq-how > .lq-more { padding: 0 16px 16px; }

@media (max-width: 640px) {
  html[data-ux="new"] .lq-next { padding: 14px 12px; }
  html[data-ux="new"] .lq-timeline .lq-eta, html[data-ux="new"] .lq-visit-at { min-width: 0; }
  html[data-ux="new"] .lq-words, html[data-ux="new"] .lq-timeline .lq-item-meta { padding-left: 0; white-space: normal; }
  html[data-ux="new"] .lq-visit-body { padding: 0 8px 10px; }
  html[data-ux="new"] .lq-visit-kinds { flex-basis: 100%; }
  html[data-ux="new"] .lq-sending-hint { margin-left: 0; }
  html[data-ux="new"] .lq-kind-head { min-height: 44px; }
}
html[data-ux="new"] .lq-switch-verb { font-weight: 400; color: var(--ink-soft); }
/* the why sits inside its feature's box, under the name (not loose under the grid's row) */
html[data-ux="new"] .lq-switch { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft); }
html[data-ux="new"] .lq-switch.is-paused { border-color: var(--amber-line); background: var(--amber-tint); }
html[data-ux="new"] .lq-switch .lq-switch-row { border: 0; background: none; flex: 1 1 auto; }
html[data-ux="new"] .lq-auto-why { margin: -6px 12px 10px 40px; font-size: 12px; }

/* ============ Release 352: Messenger, Instagram, Page inbox and Instagram Business cards in Replies waiting (web/meta-replies.js) ============
   A Meta card is a LinkedIn card (np-rw-* classes: the same Check box, message size, "Reply drafted" box and button row). Only the
   platform chip is its own, and every row has one in the new view, LinkedIn's too: one blue accent, words, never a logo or an emoji;
   the folder chip (Message request, Spam, Group) quiet. */
html[data-ux="new"] .mr-chip {
  display: inline-flex; align-items: center; padding: 1px 8px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600;
  line-height: 18px; color: var(--blue); background: var(--blue-tint); border: 1px solid var(--blue); white-space: nowrap; }
html[data-ux="new"] .mr-chip--folder { color: var(--ink-soft); background: var(--surface-soft); border-color: var(--line); font-weight: 500; }
html[data-ux="new"] .mr-card .mr-waiting { color: var(--blue); font-weight: 600; }
html[data-ux="new"] .mr-card textarea.np-rw-draft-text { display: block; width: 100%; box-sizing: border-box; min-height: 64px; font: inherit;
  font-size: 14px; line-height: 1.5; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px 8px; }
html[data-ux="new"] .lq-sec--meta .lq-meta-state { color: var(--blue); font-weight: 600; }