@layer reset, tokens, legacy, components;

@layer reset {
/* ---------- 15 Sep: isolation from the current platform ----------
   During the transition this stylesheet loads next to the platform's (Bootstrap plus its own element
   rules). This first rule hands every element inside .nx back to the browser defaults before our rules
   apply, so a foreign "button", "input" or "h1" rule no longer changes anything here. It is the least
   specific rule in the file (one class) and comes first, so every rule of ours still wins.
   SVG is left alone: its drawing attributes would be reverted too. */
.nx :where(:not(svg, svg *)){all:revert}
}

@layer tokens {
.nx{
  /* blue is the only saturated colour: value, link, action */
  --blue:#0070E0;--blue-dark:#005CB8;--blue-tint:#EEF4FE;--blue-ink:#1560B4;
  /* neutral ramp, cool slate, no blue cast */
  --navy:#0F1B2D;        /* titles, names, figures                */
  --text:#243043;        /* body copy, button labels              */
  --label:#4B5567;       /* secondary copy inside components      */
  --muted:#6B7280;       /* supporting lines, meta                */
  --faint:#98A0AE;       /* uppercase labels, icons, ids, hints   */
  --line:#E4E8EE;        /* structural rules, control outlines    */
  --hair:#EFF2F6;
  --line-2:#C2C9D3;   /* a hairline on hover */
  --line-3:#B4BCC8;   /* the same, one step darker: unticked, field hover */
  --slate:#C3CEDC;    /* the neutral data series, next to the one blue */
  --wash:#FAFBFD;     /* the faintest row hover */
  --ink-2:#0F1B2D;    /* the same ink, used where a shadow needs it */
  --focus:#B7D4F5;    /* the pale blue a field takes on focus */
  --blue-line:#D8E6F8;/* an edge on a blue tint */
  --seg-on:#F6F8FA;   /* the selected segment */
  --hover-soft:#EBEFF5;/* a soft fill, one step darker on hover */
  --amber-ink:#7A5116; /* text on an amber tint */
  --red-ink:#83263A;   /* text on a red tint */
  --green-tint:#E7F5EC;/* the positive tag */
  --info-tint:#F4F8FE; /* the information band */
  --info-ink:#1E4B84;  /* text on it */
        /* row separators                        */
  --soft:#F3F5F8;        /* neutral fill: chips, hover, tracks     */
  --green:#2E9B4F;--green-ink:#1F7A41;
  --amber:#B4741A;--amber-bg:#FDF6EA;--red:#B23A4E;--red-bg:#FCF2F4;
  /* ---- 20 Sep: the leftovers, so a dark theme is one more set of values ---- */
  --paper:#fff;             /* the sheet: page, cards, fields, menus, sticky heads */
  --on-blue:#fff;           /* text and marks on a blue fill */
  --on-ink:#fff;            /* text on a navy fill: toast, tooltips */
  --on-ink-link:#8FC2FF;    /* the one action in a toast */
  --ink-rgb:15,27,45;       /* shadows and scrims, at an alpha */
  --paper-rgb:255,255,255;  /* veils over the sheet, at an alpha */
  --on-ink-rgb:255,255,255; /* faded text on a navy fill, at an alpha */
  --on-blue-rgb:255,255,255;
  --blue-rgb:0,112,224;
  --av-bg:#E7EBF1;          /* avatar fill */
  --spin:#C7CDD7;           /* spinner track on a white button */
  --toggle-off:#D9DEE7;
  --line-soft:#DDE2EA;      /* the rule after a question id */
  --wash-2:#FBFDFF;         /* drop target hover */
  --dt-hover:#F8FAFC;       /* date picker hover */
  --blue-hover:#E2EDFD;     /* a blue chip on hover */
  --blue-hover-2:#E3EDFC;   /* the base column chip on hover */
  --blue-hover-3:#EEF4FC;
  --bulk-bg:#F7FBFF;--bulk-line:#E1ECF9;
  --lock-line:#DCE7F8;
  --shimmer:#3E9BFF;        /* the loading gleam */
  --amber-dot:#E0A340;--red-dot:#D2445B;--green-dot:#3E8E5E;  /* status marks and the heat marks */
  --amber-text:#C6871F;--red-text:#C2495D;                    /* row flags */
  --red-line:#F0D2D8;       /* the danger button's outline */
  --sev-warn-bg:#FBEFD9;--sev-warn-ink:#9A6400;--sev-bad-bg:#FBE3E6;
  --img-a:#DCE6F2;--img-b:#B9CBE3;  /* image stand-in gradient */
  --hm-a:#F3E8DA;--hm-b:#E7C9A8;    /* heatmap image stand-in */
  --chart-1:#D5DAE3;--chart-2:#B4C6DF;--chart-3:#7FA3D0;--chart-4:#3F79C1;--chart-5:#0F3F8C; /* the stacked ramp */
  --chart-clicks:#9DB2CC;--chart-bar:#0F4FA8;
  --out-sec:#C93B4E;--out-scr:#E0A030;--out-quota:#E07A2F;--out-drop:#B8551F;--out-done:#2E9E5B;
  --scrim:rgba(15,27,45,.28);--tip-bg:#0F1B2D;--tint-mix:0%;--blue-fill:#0070E0; /* a blue surface with white text on it */
  --r:6px;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,"JetBrains Mono",Menlo,monospace}
/* ---------- dark theme, candidate D (20 Sep): the same names, one more set of values ---------- */
.nx.nx-dark{
  --blue:#4D9BFF;--blue-dark:#3C84E0;--blue-tint:#1B2432;--blue-ink:#8CBEFF;
  --navy:#F3F3F4;--text:#E7E7E9;--label:#BEBEC1;--muted:#AAABAE;--faint:#85868A;
  --line:#2A2A2C;--hair:#232325;--line-2:#353537;--line-3:#424244;--slate:#4B4B50;
  --wash:#1C1C1E;--ink-2:#F3F3F4;--focus:#2F4258;--blue-line:#2B3A4C;--seg-on:#1F1F21;
  --hover-soft:#222224;--amber-ink:#F0C481;--red-ink:#FFA8B5;--green-tint:#17231A;
  --info-tint:#1A1F26;--info-ink:#9CC4F5;--soft:#1F1F21;
  --green:#4FC178;--green-ink:#7FDCA1;--amber:#E0A344;--amber-bg:#2A2217;--red:#E2697E;--red-bg:#2A1C20;
  --paper:#18181A;--on-blue:#fff;--on-ink:#18181A;--on-ink-link:#1560B4;
  --ink-rgb:0,0,0;--paper-rgb:24,24,26;--on-ink-rgb:24,24,26;--on-blue-rgb:255,255,255;--blue-rgb:77,155,255;
  --av-bg:#2A2A2C;--spin:#424244;--toggle-off:#3A3A3E;--line-soft:#2A2A2C;--wash-2:#1C1C1E;--dt-hover:#1F1F21;
  --blue-hover:#1F2A3A;--blue-hover-2:#1F2A3A;--blue-hover-3:#1F2A3A;--bulk-bg:#1A1F26;--bulk-line:#2B3A4C;--lock-line:#2B3A4C;
  --shimmer:#4D9BFF;--amber-dot:#E0A344;--red-dot:#E2697E;--green-dot:#4FC178;--amber-text:#F0C481;--red-text:#FFA8B5;
  --red-line:#4A2A31;--sev-warn-bg:#2A2217;--sev-warn-ink:#F0C481;--sev-bad-bg:#2A1C20;
  --img-a:#2C3440;--img-b:#3A4656;--hm-a:#3A3126;--hm-b:#4A3D2E;
  --scrim:rgba(0,0,0,.55);--tip-bg:#303033;--blue-fill:#2470D8;--on-ink:#F3F3F4;--on-ink-rgb:243,243,244;--on-ink-link:#8CBEFF;--tint-mix:70%;
  --chart-1:#2A3340;--chart-2:#34486A;--chart-3:#3F63A0;--chart-4:#4F86D6;--chart-5:#6FAAFF;
  --chart-clicks:#6B7688;--chart-bar:#3C84E0;--slate:#55555B;
  --out-sec:#E2697E;--out-scr:#E0A344;--out-quota:#F08A47;--out-drop:#D9784A;--out-done:#4FC178;
}

/* later token decisions, in order */
.nx{--slate:#6B7A90}

.nx{--hover-line:#9CC4F4}
}

@layer legacy {
/* ---- block 1 ---- */
/* 15 Sep: a tooltip is placed from its own holder; placed first so any rule that positions a holder still wins */
.nx .nx-tip{position:relative}


/* ---------- 3 Sep: duplicate selectors ----------
   37 selectors that were declared twice or three times (the file grew by dated sections)
   are merged into their last occurrence, each verified against a computed-style dump of
   every element across 35 states at 1440 and 390. Five stay declared twice on purpose,
   because merging them moves the cascade on real elements: .rowfilter, textarea.ta,
   .label .rt, .stabs, .bline .n4. Leave those as they are. */


/* =============================================================
   NEXT, CALM. One stylesheet, no build step, no framework.
   Reference implementation. Read it to answer "what should this
   look like and how should it behave", then build it properly.

   HOW IT IS ORDERED
   Sections 1 to 23 are the system. Sections 24 and up were added
   for the screens built after it, and each says what it changes.
   Nothing is dead: every class is used, every function is called,
   and no selector declares the same property twice.

    1  tokens                    13  question rows
    2  base                      14  audience list
    3  icons                     15  slider
    4  buttons                   16  age editor
    5  links, selectors          17  import questions
    6  toggles                   18  billing
    7  chips and state           19  menus, modal, toast
    8  form controls             20  launch bar
    9  chrome                    21  demo scaffolding
   10  objects and labels        22  animation
   11  metrics and progress      23  touch and small screens
   12  notices

   24  what the later screens needed: bars, charts, comparison
       cells, dashboard shell, tokens, number field, audience head
   25  slider grammar: one header, one footer, one error band
   26  focus, one treatment for every field
   27  field shape, superseded by the final block after section 30
   28  locked mode, an audience in field cannot be edited
   29  billing brought onto the system
   30  insights: comparison, statistics, filters, views, library
   32  small screens for everything from 24 on
   33  notifications
   34  dashboard
   35  project filters
   36  new project
   37  markets and languages
   38  29 August decisions: focus, disabled, row hover, help button,
       mobile inputs and touch targets, feasibility and launch on a phone

   THE FIELD RULE, FINAL
   The underline marks a gap, not a field. Text with content is
   plain text; empty text shows a hairline. Numbers keep their
   line always, because an empty number is a value you are about
   to set. Focus turns the hairline blue and nothing thickens.
   ============================================================= */

/* =============================================================
   Next design system, calm
    1 tokens              9 chrome                 17 import questions
    2 base               10 objects and labels     18 billing
    3 icons              11 metrics and progress   19 menus, modal, toast
    4 buttons            12 notices                20 launch bar
    5 links, selectors   13 question rows          21 demo scaffolding
    6 toggles            14 audience list          22 animation
    7 chips and state    15 slider                 23 touch and small screens
    8 form controls      16 age editor
   ============================================================= */

/* ---------- 1. tokens ---------- */
/* what floats over the page sits one step up: the sheet and its fills shift together inside it */
.nx.nx-dark .nx-slider,.nx.nx-dark .nx-menu,.nx.nx-dark .nx-modal,.nx.nx-dark .nx-helpwin,.nx.nx-dark .nx-busychip,.nx.nx-dark .nx-rt2 .nx-rtbar,.nx.nx-dark .nx-launch{
  --paper:#1F1F21;--paper-rgb:31,31,33;--wash:#222224;--wash-2:#222224;--hair:#2A2A2C;--soft:#262628;--seg-on:#262628;--dt-hover:#262628;
  --hover-soft:#2A2A2C;--line:#323235;--line-soft:#323235;--line-2:#3E3E42;--line-3:#4A4A4F;--av-bg:#323235;--toggle-off:#424246}
.nx.nx-dark .nx-menu,.nx.nx-dark .nx-modal,.nx.nx-dark .nx-helpwin,.nx.nx-dark .nx-busychip,.nx.nx-dark .nx-rt2 .nx-rtbar{border-color:#323235}
.nx.nx-dark .nx-rtip,.nx.nx-dark .nx-tip::after,.nx.nx-dark .nx-toast{box-shadow:0 0 0 1px #3E3E42,0 10px 30px rgba(0,0,0,.45)}


/* ---------- 2. base ---------- */
.nx *{box-sizing:border-box}
.nx{margin:0;padding:0}
.nx{font-family:"Inter",system-ui,sans-serif;color:var(--text);background:var(--paper);font-size:14px;line-height:1.55;
-webkit-font-smoothing:antialiased;letter-spacing:-.006em;font-variant-numeric:tabular-nums}
.nx .nx-wrap{max-width:1160px;margin:0 auto;padding:0 40px 130px}
.nx .nx-spacer{flex:1}

/* ---------- 3. icons ---------- */
.nx i[data-i]{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;font-size:17px;flex:none}
.nx i[data-i] svg{width:100%;height:100%;display:block}
.nx .nx-btn i[data-i]{font-size:16px;margin-left:-2px}
.nx .nx-tmenu i[data-i],.nx .nx-rowfilter i[data-i],.nx .nx-mi i[data-i]{font-size:15px}
.nx .nx-ico{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:var(--r);color:var(--faint);cursor:pointer}
.nx .nx-ico:hover{background:var(--soft);color:var(--navy)}
.nx .nx-ico i{font-size:17px}
.nx .nx-ico.nx-on{color:var(--blue)}
.nx .nx-flag{display:inline-block;width:22px;aspect-ratio:var(--ar,3/2);border-radius:3px;flex:none;
box-shadow:0 0 0 1px rgba(var(--ink-rgb),.10)}
.nx .nx-flag.nx-sm{width:18px}
.nx .nx-av{width:28px;height:28px;border-radius:50%;background:var(--av-bg);display:grid;place-items:center;color:var(--label);font-size:11px;font-weight:600}
.nx .nx-caret{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:4px;color:var(--faint);cursor:pointer}
.nx .nx-caret:hover{background:var(--soft);color:var(--navy)}
.nx .nx-aico{position:relative;display:inline-grid;place-items:center;width:26px;height:26px;color:var(--faint)}
.nx .nx-aico:hover{color:var(--label)}
.nx .nx-aico i[data-i]{font-size:16px}
.nx .nx-tip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 7px);left:50%;
transform:translateX(-50%) translateY(3px);background:var(--tip-bg);color:var(--on-ink);font-size:11.5px;line-height:1;
padding:6px 9px;border-radius:5px;white-space:nowrap;opacity:0;pointer-events:none;z-index:30;
transition:opacity .12s ease,transform .12s ease}
.nx .nx-tip:hover::after{opacity:1;transform:translateX(-50%)}
/* a tooltip that is not showing takes no layout at all, so it never widens a scroll container or the page */
.nx .nx-tip:not(:hover)::after{display:none}

/* 3. one divider style inside a head cluster, same idea as the metric dividers */
.nx .nx-vdiv{width:1px;height:18px;background:var(--line);flex:none;margin:0 2px}
.nx .nx-feas{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;color:var(--green-ink);
white-space:nowrap}
.nx .nx-feas i[data-i]{font-size:15px}
.nx .nx-feas.nx-no{color:var(--amber)}
.nx .nx-sq{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:4px;background:var(--soft);
font-size:10px;font-weight:600;color:var(--label);letter-spacing:.04em}

.nx .nx-cv{font-size:15px;transition:transform .2s cubic-bezier(.2,.7,.3,1);color:var(--faint);flex:none}

/* ---------- 4. buttons ---------- */
.nx .nx-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 15px;border-radius:var(--r);
border:1px solid var(--line);background:var(--paper);color:var(--text);font-family:inherit;font-size:13.5px;font-weight:500;
cursor:pointer;white-space:nowrap;letter-spacing:-.006em;transition:background .12s,border-color .12s,color .12s}
.nx .nx-btn:hover{border-color:var(--line-2)}
.nx .nx-btn.nx-pri{background:var(--blue-fill);border-color:var(--blue-fill);color:var(--on-blue)}
.nx .nx-btn.nx-pri:hover{background:var(--blue-dark);border-color:var(--blue-dark)}
.nx .nx-btn.nx-sec{background:var(--paper);border-color:var(--line);color:var(--blue)}
.nx .nx-btn.nx-sec:hover{border-color:var(--blue)}
.nx .nx-btn.nx-cancel{background:var(--paper);border-color:var(--line);color:var(--text)}
.nx .nx-btn.nx-cancel:hover{border-color:var(--line-2)}
.nx .nx-btn.nx-sm{height:32px;padding:0 12px;font-size:12.5px}
.nx .nx-btn i{font-size:16px}
.nx .nx-btn:not(.nx-pri) .nx-spinner{border-color:var(--spin);border-top-color:var(--blue)}

/* ---------- 5. links & selectors ---------- */
.nx .nx-lnk{background:none;border:0;padding:0;font-family:inherit;font-size:12.5px;font-weight:400;
color:var(--blue);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.nx .nx-lnk i[data-i]{font-size:14px;margin-top:-1px}
.nx .nx-lnk:hover{text-decoration:underline}
.nx .nx-lnk.nx-q{color:var(--blue)} /* 29 Aug: grey links no longer exist, one link colour */

/* selector hover: ink darkens AND a whisper of fill, far lighter than the
   grey block that was rejected, because ink alone read as no feedback */
.nx .nx-sel,.nx .nx-statusctl,.nx .nx-tmenu{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 6px 0 0;border-radius:var(--r);border:0;background:none;font-family:inherit;font-size:13px;color:var(--navy);cursor:pointer;white-space:nowrap;letter-spacing:-.006em;transition:color .12s ease,background .12s ease}
.nx .nx-sel:hover,.nx .nx-statusctl:hover,.nx .nx-tmenu:hover{color:var(--blue-ink)}
.nx .nx-sel:hover i[data-i],.nx .nx-statusctl:hover i[data-i],.nx .nx-tmenu:hover i[data-i]{color:var(--blue-ink)}
.nx .nx-sel i[data-i],.nx .nx-statusctl i[data-i],.nx .nx-tmenu i[data-i]{font-size:15px;color:var(--faint);margin-left:-1px}
.nx .nx-statusctl .nx-dot{width:7px;height:7px;border-radius:50%}
.nx .nx-tmenu:hover{color:var(--blue-ink)}
.nx .nx-tmenu{color:var(--label)}

/* ---------- 6. toggles ---------- */
.nx .nx-seg{display:inline-flex;border:1px solid var(--line);border-radius:5px;overflow:hidden;font-size:12.5px;
font-weight:400;letter-spacing:-.006em;text-transform:none}
.nx .nx-seg span{display:inline-flex;align-items:center;justify-content:center;background:var(--paper);color:var(--text);
padding:6px 12px;cursor:pointer;white-space:nowrap;border-left:1px solid var(--line);
transition:background .12s,color .12s}
.nx .nx-seg span:first-child{border-left:0}
.nx .nx-seg span:hover{color:var(--blue-ink)}
.nx .nx-seg span.nx-on{background:var(--seg-on);color:var(--navy)}

/* ---------- 7. chips & state ---------- */
.nx .nx-mono{font-family:var(--mono)}
.nx .nx-pill{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;line-height:1}
.nx .nx-pill .nx-d{width:7px;height:7px;border-radius:50%;flex:none}
.nx .nx-pill.nx-ok{color:var(--green-ink)}
.nx .nx-pill.nx-ok .nx-d{background:var(--green)}
.nx .nx-pill.nx-warn{color:var(--amber);background:var(--amber-bg);border-radius:99px;padding:5px 11px}
.nx .nx-pill.nx-warn .nx-d{background:var(--amber-dot)}
.nx .nx-pill.nx-err{color:var(--red);background:var(--red-bg);border-radius:99px;padding:5px 11px}
.nx .nx-pill.nx-err .nx-d{background:var(--red-dot)}
.nx .nx-pill.nx-quiet{color:var(--label)}
.nx .nx-pill.nx-quiet .nx-d{background:var(--faint)}
.nx .nx-qcount{font-size:12.5px;color:var(--faint);flex:none}
.nx .nx-tgt{font-size:12.5px;color:var(--faint);flex:none}
.nx .nx-tgt.nx-zero{color:var(--amber)}
.nx .nx-tpill{display:inline-block;background:var(--blue-tint);color:var(--blue-ink);border-radius:4px;padding:1px 7px;
font-size:12.5px;margin:0 4px 3px 0}
.nx .nx-tpill.nx-more{background:none;color:var(--muted);padding-left:0}

/* ---------- 8. form controls ---------- */
.nx .nx-rowfilter{margin-left:auto;display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 10px;
border:1px solid var(--line);border-radius:var(--r);color:var(--faint)}
.nx .nx-rowfilter input{border:0;outline:0;font-family:inherit;font-size:13px;color:var(--navy);width:150px;background:none}
.nx .nx-rowfilter i{font-size:15px}
.nx .nx-opt{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--hair);cursor:pointer}
.nx .nx-tplcv{margin-left:auto;align-self:center;color:var(--faint);transition:color .12s ease}
.nx .nx-opt:hover .nx-tplcv,.nx .nx-cselect:hover .nx-tplcv{color:var(--navy)}
.nx .nx-opt .nx-tick{margin-top:2px}
.nx .nx-opt .nx-t{font-size:13.5px;color:var(--navy)}
.nx .nx-opt .nx-d{font-size:12.5px;color:var(--muted);margin-top:4px}
.nx .nx-field{width:100%;height:38px;border:1px solid var(--line);border-radius:var(--r);padding:0 12px;
font-family:inherit;font-size:13.5px;color:var(--navy);outline:0;background:var(--paper)}
.nx textarea.nx-ta.nx-sm{min-height:150px;flex:none;font-family:var(--mono);font-size:12.5px}
.nx .nx-tabar{display:flex;align-items:center;gap:14px;padding-top:12px}
.nx .nx-cnt{font-size:12.5px;color:var(--muted)}
.nx .nx-cnt b{color:var(--navy);font-weight:600}
.nx .nx-fld{display:inline-flex;align-items:baseline;gap:4px;height:32px;padding:0 10px;border:1px solid var(--line);
border-radius:var(--r);color:var(--navy);font-weight:500;line-height:32px}
.nx .nx-fld em{font-style:normal;color:var(--faint);font-size:12px}
/* ---------- the chip. Three jobs, one shape (29 Aug) ----------
   .chip.value   a value someone set, blue tint, not a control
   .chip.filter  a selectable option, neutral until picked
   .chip.token   something you can remove, neutral with an x */
.nx .nx-chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;line-height:20px;padding:3px 8px;
border-radius:5px;white-space:nowrap;flex:none}
.nx .nx-chip.nx-value{background:var(--blue-tint);color:var(--blue-ink)}
.nx .nx-chip.nx-value em{font-style:normal;color:var(--muted);font-size:11.5px}
.nx .nx-chip.nx-value .nx-dv{width:1px;height:11px;background:rgba(var(--ink-rgb),.18)}
.nx .nx-chip.nx-value[onclick]{cursor:pointer}
.nx .nx-chip.nx-value[onclick]:hover{background:var(--blue-hover)}
.nx .nx-chip.nx-filter{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);color:var(--label);padding:4px 12px;cursor:pointer}
.nx .nx-chip.nx-filter:hover{border-color:var(--line-2)}
.nx .nx-chip.nx-filter.nx-on{border-color:var(--blue);color:var(--blue);background:var(--blue-tint);font-weight:500}


.nx .nx-chip.nx-token .nx-fv{font-weight:500}
.nx .nx-chip.nx-token > i[data-i]{font-size:13px;color:var(--faint);cursor:pointer}
.nx .nx-chip.nx-token > i[data-i]:hover{color:var(--navy)}
.nx .nx-chip.nx-token .nx-ico{width:22px;height:22px;color:var(--faint)}
.nx .nx-chipset{display:flex;gap:8px;flex-wrap:wrap}
.nx .nx-nameinput{border:0;outline:0;font-family:inherit;font-size:17px;font-weight:600;color:var(--navy);
padding:0;width:min(340px,52vw);letter-spacing:-.014em}
/* rich text field: quiet until focused, then the toolbar appears above it (29 Aug) */
.nx .nx-rt2{position:relative;margin-bottom:8px}
.nx .nx-rt2 .nx-rtin{min-height:34px;padding:6px 0 8px;border:0;border-bottom:1px solid var(--line);border-radius:0;font-size:13.5px;color:var(--navy);line-height:1.45;outline:0}
.nx .nx-rt2 .nx-rtin:hover{border-bottom-color:var(--line-3)}
.nx .nx-rt2 .nx-rtin.nx-ph:empty::before{content:attr(data-ph);color:var(--faint)}
.nx .nx-rt2.nx-on .nx-rtin{border-bottom-color:var(--blue)}
.nx .nx-rt2 .nx-rtbar{display:none;position:absolute;right:0;bottom:100%;margin-bottom:6px;align-items:center;gap:2px;padding:4px;background:var(--paper);border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 20px rgba(var(--ink-rgb),.08);z-index:5}
.nx .nx-rt2.nx-on .nx-rtbar{display:inline-flex}
.nx .nx-rt2 .nx-rtbar .nx-grp{display:inline-flex;gap:2px;padding:0 4px}
.nx .nx-rt2 .nx-rtbar .nx-grp + .nx-grp{border-left:1px solid var(--hair)}
.nx .nx-rt2 .nx-rtbar .nx-ico{width:30px;height:30px}
.nx .nx-arow3.nx-ro2{color:var(--muted);cursor:pointer}
.nx .nx-arow3.nx-ro2:hover .nx-val2{color:var(--blue-ink)}
.nx .nx-arow3.nx-ro2 .nx-gr{cursor:default;color:var(--line-3)}



/* ---------- the row. One label-plus-something component (29 Aug) ----------
   .row.value    label left, value on the right
   .row.setting  label left, control at the end (toggle, tick, selector)
   .row.frow    label left, editable field beside it
   The bottom padding lives on the cells, which is what puts a field's
   underline exactly on the row rule. */
.nx .nx-row{display:flex;align-items:flex-start;gap:14px;padding:10px 0 0;border-bottom:1px solid var(--hair);font-size:13.5px}
.nx .nx-row > *{padding-bottom:10px}
.nx .nx-row:last-child,.nx .nx-row.nx-nb{border-bottom:0}
.nx .nx-row .nx-si{color:var(--faint);flex:none;margin-top:2px}
.nx .nx-row .nx-si i[data-i]{font-size:17px}
.nx .nx-row .nx-lab{flex:none;width:160px;min-width:0}
.nx .nx-row .nx-k{display:block;color:var(--label);line-height:20px}
.nx .nx-row .nx-h6{font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.4}
.nx .nx-row .nx-ctl{flex:1;min-width:0;display:flex;align-items:center;gap:10px;line-height:20px}
.nx .nx-row.nx-value .nx-ctl{justify-content:flex-end;text-align:right;color:var(--navy);font-weight:500}
.nx .nx-row.nx-value .nx-ctl.nx-g{color:var(--green-ink)}

.nx .nx-row.nx-setting .nx-k{color:var(--navy)}
.nx .nx-row.nx-setting .nx-ctl{flex:none;margin-left:auto}
.nx .nx-row.nx-setting .nx-ctl .nx-selbox{margin-right:0}
.nx .nx-row.nx-setting .nx-ctl > .nx-tick{margin-right:8px}
.nx .nx-row.nx-frow .nx-ctl{align-items:flex-end;padding-bottom:0}
.nx .nx-row.nx-frow .nx-ctl .nx-field{text-align:left;width:100%;max-width:320px;height:auto;padding:0 0 10px;margin-bottom:-1px;
line-height:20px;border:0;border-bottom:1px solid transparent;border-radius:0;background:none}
.nx .nx-row.nx-frow .nx-ctl .nx-field:not(:disabled):hover{border-bottom-color:var(--line-3)}
.nx .nx-row.nx-frow .nx-ctl .nx-field:focus{border-bottom-color:var(--blue)}
.nx .nx-row.nx-frow .nx-ctl .nx-field:placeholder-shown{border-bottom-color:var(--line)}
.nx .nx-row.nx-frow .nx-ctl .nx-selbox,.nx .nx-row.nx-frow .nx-ctl .nx-btn{margin-bottom:10px}
/* 4 Sep: the account rows. The row modifier used to be "field", which is also the input class,
   so every row inherited the input's fixed 38px height; renamed to "frow". Wider labels so they
   do not wrap, and rows with a select or a tick centre both sides. */
.nx .nx-acct .nx-row .nx-lab{width:240px}
@media (max-width:600px){.nx .nx-acct .nx-ss:has(> .nx-atable){overflow-x:auto}.nx .nx-acct .nx-atable{min-width:520px}}
.nx .nx-row.nx-frow.nx-mid{align-items:center}
.nx .nx-row.nx-frow.nx-mid .nx-ctl{align-items:center;padding-bottom:10px}
.nx .nx-row.nx-frow.nx-mid .nx-ctl .nx-selbox,.nx .nx-row.nx-frow.nx-mid .nx-ctl .nx-btn{margin-bottom:0}
/* App settings: label left, control pinned to the right edge, like the question editor's Settings tab */
.nx .nx-setlist .nx-row.nx-frow .nx-ctl{justify-content:flex-end}
.nx .nx-setlist .nx-row.nx-frow .nx-ctl .nx-selbox{margin-right:-4.5px} /* chevron glyph and tick glyph share one right edge, measured */
@media (max-width:760px){.nx .nx-acct .nx-row .nx-lab{width:150px}}

.nx .nx-arow3 .nx-gr{color:var(--faint);font-size:15px;cursor:grab}
.nx .nx-arow3 .nx-val2{flex:1}
.nx .nx-arow3{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--hair);font-size:13.5px;color:var(--navy);position:relative}
.nx .nx-arow3 .nx-val2.nx-edit{outline:0;padding:0;line-height:20px;cursor:text;position:relative;align-self:stretch;display:flex;align-items:center}
.nx .nx-arow3 .nx-val2.nx-edit::after,.nx .nx-arow3 .nx-aslot.nx-code::after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:1px;background:transparent}
.nx .nx-arow3 .nx-val2.nx-edit:not(:has(input:disabled,textarea:disabled)):hover::after,.nx .nx-arow3 .nx-aslot.nx-code:not(:has(input:disabled,textarea:disabled)):hover::after{background:var(--line-3)}
.nx .nx-arow3 .nx-val2.nx-edit:focus::after,.nx .nx-arow3 .nx-aslot.nx-code:focus-within::after{background:var(--blue)}
.nx .nx-toggle{width:38px;height:22px;border-radius:99px;background:var(--toggle-off);position:relative;cursor:pointer;display:inline-block;flex:none;
transition:background .18s cubic-bezier(.2,.7,.3,1)}
.nx .nx-toggle .nx-sw2{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--paper);
transition:left .18s cubic-bezier(.2,.7,.3,1),width .18s cubic-bezier(.2,.7,.3,1);box-shadow:0 1px 2px rgba(var(--ink-rgb),.25)}
.nx .nx-toggle:active .nx-sw2{width:23px}
.nx .nx-toggle.nx-on:active .nx-sw2{left:13px}
.nx .nx-toggle.nx-on{background:var(--blue)}
.nx .nx-toggle.nx-on .nx-sw2{left:18px}




.nx .nx-num3{width:62px;height:32px;border:1px solid var(--line);border-radius:var(--r);font-family:inherit;font-size:14px;
color:var(--navy);text-align:center;outline:0;background:var(--paper)}
.nx .nx-num3:disabled{background:var(--soft);color:var(--faint)}
.nx .nx-tick{display:inline-flex;justify-content:center;width:18px;color:var(--line-3);cursor:pointer;line-height:1;
transition:color .12s ease}
.nx .nx-tick.nx-on i[data-i]{animation:nx-slTick .18s cubic-bezier(.2,.7,.3,1)}
@keyframes nx-slTick{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.nx .nx-chip.nx-token{background:var(--soft);color:var(--navy);padding:3px 4px 3px 9px;animation:nx-slTok .16s cubic-bezier(.2,.7,.3,1)}
@keyframes nx-slTok{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.nx .nx-tick i[data-i]{font-size:15px}
.nx .nx-tick:hover,.nx .nx-tick.nx-on{color:var(--blue)}
.nx .nx-srch{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--hair);color:var(--faint)}
.nx .nx-srch input{border:0;outline:0;background:var(--paper);font-family:inherit;font-size:13px;width:100%;color:var(--navy)}
.nx textarea.nx-ta{flex:1 1 auto;min-height:240px;width:100%;resize:vertical;border:1px solid var(--line);
border-radius:var(--r);font-family:inherit;font-size:13.5px;line-height:1.65;color:var(--text);
outline:0;background:var(--paper)}
.nx textarea.nx-ta::placeholder{color:var(--line-2)}
.nx .nx-impsearch{position:relative;padding:12px 20px;border-bottom:1px solid var(--hair)}
.nx .nx-impsearch input{width:100%;height:36px;border:1px solid var(--line);border-radius:var(--r);background:var(--wash);
padding:0 34px 0 12px;font-family:inherit;font-size:13.5px;color:var(--navy);outline:0}
.nx .nx-impsearch i[data-i]{position:absolute;right:30px;top:21px;font-size:15px;color:var(--faint)}

/* ---------- 9. chrome ---------- */
.nx .nx-topbar{display:flex;align-items:center;gap:18px;padding:10px 0;border-bottom:1px solid var(--hair)}
.nx .nx-logo{font-weight:700;font-size:13px;line-height:1.05;color:var(--navy);padding-right:18px;border-right:1px solid var(--line)}
.nx .nx-logo small{display:block;font-size:8px;font-weight:600;letter-spacing:.12em;color:var(--muted)}
.nx .nx-logo b{font-size:20px;letter-spacing:-.02em}
.nx .nx-logo b i{color:var(--blue);font-style:normal}

.nx .nx-phead{display:flex;align-items:flex-end;gap:24px;padding-top:26px;border-bottom:1px solid var(--line)}
.nx .nx-phead h1{margin:0;padding-bottom:16px;font-size:23px;font-weight:600;color:var(--navy);letter-spacing:-.022em;line-height:1.2}
.nx .nx-tabs{display:flex;align-items:flex-end;gap:6px}
.nx .nx-tab{display:inline-flex;align-items:center;padding:0 12px 14px;margin-bottom:-1px;font-size:14px;font-weight:500;
color:var(--label);border-bottom:2px solid transparent;cursor:pointer}
.nx .nx-tab:hover{color:var(--blue-ink)}
.nx .nx-tab.nx-on{color:var(--navy);border-color:var(--blue)}
.nx .nx-tab.nx-kb{padding:0 6px 14px;color:var(--faint)}
.nx .nx-roll{display:flex;align-items:baseline;gap:34px;padding:20px 0 14px}
 /* 29 Aug: the bar's three colours say what they are */


.nx .nx-roll .nx-scope{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.nx .nx-roll .nx-m{font-size:13px;color:var(--muted)}
.nx .nx-roll .nx-m b{color:var(--navy);font-weight:600}
.nx .nx-roll .nx-rt{margin-left:auto}
.nx .nx-projrule{display:flex;height:2px;border-radius:99px;background:var(--soft);overflow:hidden;margin-bottom:8px}
.nx .nx-projrule span{display:block;height:100%}

/* ---------- 10. objects & labels ---------- */
.nx .nx-label{display:flex;align-items:center;gap:14px;cursor:pointer;height:46px;padding:0;margin-top:66px;font-size:11px;
font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);border-bottom:1px solid var(--line)}
.nx .nx-label .nx-rt{margin-left:auto;display:flex;align-items:center;gap:16px;text-transform:none;letter-spacing:0;
font-size:13px;font-weight:400;cursor:default}
.nx .nx-label .nx-cv{color:var(--faint);margin-left:-6px}

.nx .nx-label.nx-closed .nx-cv{transform:rotate(-90deg)}
.nx .nx-obj{padding-bottom:10px}
.nx .nx-ohead{display:flex;align-items:center;gap:12px;padding:44px 0 6px;flex-wrap:nowrap}
.nx .nx-onm{font-size:18px;font-weight:600;color:var(--navy);letter-spacing:-.018em;cursor:pointer}
.nx .nx-onm:hover{color:var(--blue)}
.nx .nx-oid{font-family:var(--mono);font-size:11.5px;color:var(--faint)}
.nx .nx-ident{display:flex;align-items:baseline;gap:10px;min-width:0}
.nx .nx-otools{margin-left:auto;display:flex;align-items:center;gap:12px}
.nx .nx-otools .nx-aico + .nx-aico{margin-left:-8px}
.nx .nx-facts{gap:0 30px;flex-wrap:wrap;padding:14px 0 2px}
.nx .nx-sublabel{display:flex;align-items:center;gap:10px;height:46px;padding:0;margin-top:28px;font-size:11px;
font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);border-bottom:1px solid var(--hair)}
.nx .nx-sublabel .nx-n{font-family:var(--mono);font-size:11.5px;color:var(--faint);letter-spacing:0}
.nx .nx-sublabel .nx-rt{margin-left:auto;display:flex;align-items:center;gap:18px;text-transform:none;letter-spacing:0;
font-size:13px;font-weight:400}
.nx .nx-empty.nx-state{padding:28px 0;color:var(--muted);font-size:13px}
.nx .nx-empty.nx-state .nx-t3{color:var(--navy);font-weight:600;font-size:13.5px;margin-bottom:3px}


.nx .nx-facts2{margin-top:14px;border-top:1px solid var(--hair)}
.nx .nx-impsub{display:flex;align-items:center;height:46px;margin-top:8px;font-size:11px;font-weight:600;
letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}

/* ---------- 11. metrics & progress ---------- */
.nx .nx-prog{padding:10px 0 2px}
.nx .nx-prog .nx-lbl,.nx .nx-facts{display:flex;align-items:baseline;font-size:13px;color:var(--muted)}
.nx .nx-prog .nx-lbl,.nx .nx-facts,.nx .nx-roll .nx-m{font-variant-numeric:tabular-nums}
.nx .nx-prog .nx-lbl b,.nx .nx-facts b{color:var(--navy);font-weight:600}
.nx .nx-prog .nx-lbl{padding-bottom:8px}
.nx .nx-prog .nx-pc{margin-left:auto;color:var(--navy);font-weight:600;font-size:13px}
.nx .nx-rulebar{height:3px;border-radius:99px;background:var(--soft);overflow:hidden}
.nx .nx-rulebar span{display:block;height:100%;border-radius:99px}
.nx .nx-mets{display:flex;flex-wrap:wrap;gap:0;padding:20px 0 6px;align-items:stretch}
.nx .nx-met{padding:0 26px;border-left:1px solid var(--hair)}
.nx .nx-met:first-child{padding-left:0;border-left:0}
.nx .nx-met .nx-k{font-size:12px;color:var(--muted);margin-bottom:6px;line-height:1;font-weight:400}
.nx .nx-met .nx-v{display:flex;align-items:baseline;gap:8px;line-height:1}
.nx .nx-met .nx-n2{font-size:16px;font-weight:600;color:var(--navy);letter-spacing:-.012em}
.nx .nx-mets .nx-grp2{display:flex;gap:0;margin-left:auto}
.nx .nx-mets .nx-grp2 .nx-met:last-child{padding-right:0}
.nx .nx-delta{font-size:12px;font-weight:500}
.nx .nx-delta.nx-good{color:var(--green-ink)}
.nx .nx-delta.nx-mid{color:var(--label)}
.nx .nx-delta.nx-bad{color:var(--red)}
.nx .nx-delta.nx-flat{color:var(--faint)}

/* ---------- 12. notices ---------- */
/* a message is coloured text, not a filled box: blue informs, amber
   warns, red blocks. Only the sticky footer band keeps a surface, and
   only because it sits over scrolling content. */
.nx .nx-notice{display:flex;align-items:flex-start;gap:10px;margin:14px 0 2px;padding:0;font-size:13px;
background:none;border:0}
.nx .nx-notice > i.nx-n{opacity:.85}
/* an inline coloured note is a message as well, so it carries the same
   glyph as a full-width one */
.nx .nx-off,.nx .nx-fldcap .nx-off{display:inline-flex;align-items:baseline;gap:5px}
.nx .nx-off > i[data-i]{font-size:14px;align-self:center}
.nx .nx-notice.nx-warn{color:var(--amber)}
.nx .nx-notice.nx-err{color:var(--red)}
.nx .nx-notice b{font-weight:600}
.nx .nx-notice i.nx-n{font-size:17px;flex:none;margin-top:1px;opacity:.8}
/* Actions inside a coloured band are text in the band's own ink, never a
   white button sitting on the tint. Primary is underlined and semibold,
   anything after it is quiet. One rule for info, warning and error. */
.nx .nx-notice .nx-acts,.nx .nx-lockbar .nx-acts,.nx .nx-aiband .nx-rt2,.nx .nx-sband .nx-acts{
  margin-left:auto;display:flex;align-items:center;gap:16px;flex:none;padding-left:16px}
/* 29 Aug: an action inside a message is a quiet button, not a bold underlined link */
.nx .nx-go{display:inline-flex;align-items:center;height:32px;padding:0 12px;border:1px solid var(--line);
border-radius:var(--r);background:var(--paper);font-family:inherit;font-size:12.5px;font-weight:500;
color:var(--blue);cursor:pointer;text-decoration:none;white-space:nowrap;transition:border-color .12s}
.nx .nx-go:hover{border-color:var(--blue)}
.nx .nx-go.nx-q{color:var(--text);font-weight:400}
.nx .nx-go.nx-q:hover{border-color:var(--line-2)}

/* ---------- 13. question rows ---------- */
.nx .nx-gut{display:flex;align-items:center;flex:none;width:0;margin-right:-16px;overflow:hidden;
transition:width .16s cubic-bezier(.2,.7,.3,1),margin-right .16s cubic-bezier(.2,.7,.3,1)}
.nx .nx-qrow:hover .nx-gut{width:46px;margin-right:0}
.nx .nx-gut .nx-gico{opacity:0;transition:opacity .14s ease .04s}
.nx .nx-qrow:hover .nx-gut .nx-gico{opacity:1}
.nx .nx-gico{display:grid;place-items:center;width:21px;height:24px;flex:none;border-radius:4px;color:var(--faint);
cursor:pointer}
.nx .nx-gico:hover{color:var(--navy);background:var(--soft)}
.nx .nx-gico i[data-i]{font-size:15px}
.nx .nx-gico.nx-drag{cursor:grab}
.nx .nx-gico.nx-drag:active{cursor:grabbing}
.nx .nx-qrow{display:flex;align-items:center;gap:16px;min-height:52px;padding:5px 0;border-bottom:1px solid var(--hair);cursor:pointer}
.nx .nx-qrow:hover .nx-qid{color:var(--label)}
.nx .nx-qid{width:104px;flex:none}
.nx .nx-qid em{display:inline-flex;align-items:center;max-width:100%;font-style:normal;background:var(--soft);
border-radius:4px;padding:3px 8px 3px 6px}
.nx .nx-qid em i[data-i]{font-size:15px;color:var(--blue);flex:none;margin-right:7px}
.nx .nx-qid em b{font-family:var(--mono);font-size:12px;font-weight:400;line-height:17px;color:var(--muted);
border-left:1px solid var(--line-soft);padding-left:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nx .nx-qt{flex:1;min-width:0;color:var(--navy);font-size:15px;letter-spacing:-.01em;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nx .nx-qt:hover{color:var(--blue-ink)}
.nx .nx-rowflag{display:inline-flex;align-items:center;font-size:15px;flex:none}
.nx .nx-rowflag.nx-warn{color:var(--amber-text)}
.nx .nx-rowflag.nx-err{color:var(--red-text)}
.nx .nx-rowflag.nx-dupe{color:var(--faint);font-size:14px}
.nx .nx-rowacts{display:flex;align-items:center;gap:2px;opacity:0;flex:none}
.nx .nx-qrow:hover .nx-rowacts{opacity:1}
.nx .nx-qrow.nx-open .nx-cv{transform:rotate(180deg)}
/* collapsibles animate on grid-template-rows, content wrapped in .in */
.nx .nx-qdet{display:grid;grid-template-rows:0fr;transition:grid-template-rows .22s cubic-bezier(.2,.7,.3,1)}
.nx .nx-qrow.nx-open + .nx-qdet{grid-template-rows:1fr}
.nx .nx-qdet > .nx-in{overflow:hidden;min-height:0}
.nx .nx-qdet .nx-pad{padding:16px 0 22px 120px}
.nx .nx-ansline{display:flex;flex-wrap:wrap;gap:6px}
.nx .nx-ans{border-radius:4px;padding:3px 9px;font-size:12.5px;color:var(--label);background:var(--soft)}
.nx .nx-ans.nx-on{background:var(--blue-tint);color:var(--blue-ink);font-weight:500}
.nx .nx-ans.nx-more{background:none;color:var(--blue);cursor:pointer;padding-left:2px}
.nx .nx-dhelp{font-size:12.5px;color:var(--muted);margin-top:11px}
.nx .nx-dhelp .nx-lnk{margin-left:6px}
.nx .nx-logicrow{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:12.5px;color:var(--muted);
border-bottom:1px solid var(--hair)}
.nx .nx-logicrow .nx-tag{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.nx .nx-logicrow b{color:var(--navy);font-weight:600}
.nx .nx-logicrow .nx-rowacts{margin-left:auto}
/* ---------- the filter bar. One bar, slots in one order: search, then
   filters, then a count on the right (29 Aug). .rule adds a hairline under it. */
.nx .nx-filterbar{display:flex;align-items:center;gap:10px;padding:14px 0 10px;flex-wrap:wrap}
.nx .nx-filterbar.nx-rule{border-bottom:1px solid var(--hair)}
.nx .nx-filterbar .nx-rowfilter{order:-1;margin:0}
 /* 5 Sep: the search ends on the same right edge as the kebab */
.nx .nx-filterbar .nx-rowfilter.nx-wide{flex:1 0 100%}
.nx .nx-filterbar .nx-rowfilter.nx-wide input{width:100%}
.nx .nx-filterbar + .nx-filterbar{padding-top:2px}
.nx .nx-filterbar .nx-sepv{height:22px;align-self:center}
.nx .nx-filterbar .nx-seg{flex:none}
.nx .nx-filterbar .nx-setcount:last-child,.nx .nx-filterbar .nx-rt{margin-left:auto}



/* 21 Sep: the same switch on a section label row (the question's Translations tab: Wording | Asked where) */
.nx .nx-ss .nx-lb .nx-rt:has(> .nx-mode){align-self:stretch;align-items:stretch}
.nx .nx-ss .nx-lb .nx-mode{display:inline-flex;gap:18px;align-self:stretch;align-items:stretch;text-transform:none;letter-spacing:0}
.nx .nx-ss .nx-lb .nx-mode span{display:inline-flex;align-items:center;font-size:13.5px;font-weight:400;color:var(--label);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;padding-bottom:0}
.nx .nx-ss .nx-lb .nx-mode span:hover{color:var(--blue-ink)}
.nx .nx-ss .nx-lb .nx-mode span.nx-on{color:var(--navy);font-weight:500;border-color:var(--blue)}
.nx .nx-ss .nx-lb .nx-mode .nx-qcount{margin-left:6px}





.nx .nx-filterbar .nx-rt > .nx-ico:last-child,.nx .nx-label .nx-rt > .nx-ico:last-child,.nx .nx-sublabel .nx-rt > .nx-ico:last-child{margin-right:-6px}







.nx .nx-selbox .nx-sk{color:var(--muted);margin-right:2px}
.nx .nx-selbox .nx-sk::after{content:":"}

@media (max-width:760px){
  .nx .nx-filterbar .nx-seg{flex-wrap:wrap;border:0;gap:6px}
  .nx .nx-filterbar .nx-seg span{border:1px solid var(--line);border-radius:5px;flex:0 0 auto}
  .nx .nx-filterbar .nx-vdiv{display:none}}
.nx .nx-kinds{display:flex;align-items:center;gap:16px}
.nx .nx-kind{font-size:13px;color:var(--label);cursor:pointer;padding-bottom:2px;border-bottom:1.5px solid transparent}
.nx .nx-kind:hover{color:var(--blue-ink)}
.nx .nx-kind.nx-on{color:var(--navy);font-weight:500;border-color:var(--blue)}
.nx .nx-kind .nx-n{font-size:11.5px;color:var(--faint);margin-left:5px;font-family:var(--mono)}
.nx .nx-secbar{display:flex;align-items:center;gap:11px;height:44px;padding:0;margin-top:10px;cursor:pointer;
border-bottom:1px solid var(--hair)}
.nx .nx-secbar .nx-nm{font-size:13px;font-weight:600;color:var(--navy)}
.nx .nx-secbar .nx-ct{font-size:12.5px;color:var(--faint)}
.nx .nx-secbar .nx-rowacts{margin-left:auto;opacity:0}
.nx .nx-secbar:hover .nx-rowacts{opacity:1}

.nx .nx-secbar.nx-closed .nx-cv{transform:rotate(-90deg)}
.nx .nx-lvl{display:grid;grid-template-rows:1fr;transition:grid-template-rows .24s cubic-bezier(.2,.7,.3,1)}
.nx .nx-sec.nx-closed > .nx-lvl{grid-template-rows:0fr}
.nx .nx-lvl > .nx-in{overflow:hidden;min-height:0}
.nx .nx-coll{display:grid;grid-template-rows:1fr;transition:grid-template-rows .28s cubic-bezier(.2,.7,.3,1)}
.nx .nx-coll.nx-closed{grid-template-rows:0fr}
.nx .nx-coll > .nx-in{overflow:hidden;min-height:0}
.nx .nx-lvl .nx-lvl{padding-left:26px}
.nx .nx-lvl > .nx-sec > .nx-secbar{margin-top:10px}
.nx .nx-secbar .nx-bnote{font-size:12.5px;color:var(--muted)}
.nx .nx-secfoot{display:flex;gap:10px;padding:12px 0 4px;flex-wrap:wrap}
.nx .nx-qtot{display:flex;align-items:center;gap:26px;padding:12px 0 0;font-size:13px;color:var(--muted)}
.nx .nx-qtot .nx-v4,.nx .nx-agrid tfoot .nx-v4,

.nx /* ---------- 14. audience list ---------- */
.nx-lrow{padding:22px 0 26px;border-bottom:1px solid var(--hair)}
.nx .nx-lrow.nx-cur .nx-onm{color:var(--blue)}
.nx .nx-lhead{display:flex;align-items:center;gap:12px}

/* ---------- 15. slider ---------- */
.nx .nx-scrim,.nx .nx-modalscrim{position:fixed;inset:0;background:var(--scrim);opacity:0;pointer-events:none;
transition:opacity .16s ease;z-index:40}
.nx .nx-scrim.nx-on,.nx .nx-modalscrim.nx-on{opacity:1;pointer-events:auto}
.nx .nx-modalscrim{display:grid;place-items:center;z-index:60}
.nx .nx-slider{position:fixed;top:0;right:0;bottom:0;width:min(700px,94vw);background:var(--paper);z-index:50;
transform:translateX(100%);transition:transform .2s ease,box-shadow .2s ease;display:flex;flex-direction:column;
box-shadow:-18px 0 44px rgba(var(--ink-rgb),.10)}
.nx .nx-slider.nx-on{transform:none}
.nx .nx-shead{display:flex;align-items:center;gap:12px;height:68px;padding:0 26px;flex:none;border-bottom:1px solid var(--hair)}
.nx .nx-stabs{display:flex;padding:0 26px;border-bottom:1px solid var(--line)}

.nx .nx-stabs .nx-t:hover{color:var(--blue-ink)}
.nx .nx-stabs .nx-t.nx-on{color:var(--navy);border-color:var(--blue);font-weight:500}
.nx .nx-sbody{flex:1;overflow:auto;padding:24px 26px 40px;display:flex;flex-direction:column}
.nx .nx-sbody > *{flex:none}
.nx .nx-sfoot{display:flex;align-items:center;gap:10px;padding:14px 26px;border-top:1px solid var(--line)}
.nx .nx-ss{margin-bottom:30px}
.nx .nx-ss .nx-lb{display:flex;align-items:center;gap:12px;height:40px;padding:0;border-bottom:1px solid var(--hair);
font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:16px}
.nx .nx-ss .nx-lb .nx-rt{margin-left:auto;display:flex;align-items:center;gap:16px;
text-transform:none;letter-spacing:0;font-weight:400}
.nx .nx-hp{font-size:12.5px;color:var(--muted);margin:-6px 0 14px}
.nx .nx-slider.nx-imp{width:min(1180px,96vw)}
.nx .nx-slider.nx-imp .nx-sbody{padding:0;overflow:hidden;display:flex;flex-direction:row}

/* ---------- 16. age editor ---------- */
.nx .nx-agehead{display:flex;align-items:center;gap:16px;padding-bottom:14px;flex-wrap:wrap}
/* ---------- the table base (29 Aug). Header style, hairlines, tabular
   figures and sticky behaviour live here once. The four tables keep only
   what makes them different: a quota grid, an account table, a cross
   table and a matrix are not the same object. */
.nx .nx-table{width:100%;border-collapse:collapse}
.nx .nx-table thead th,.nx .nx-table tr.nx-hd th{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
text-align:left;padding:0 12px 8px 0;border-bottom:1px solid var(--hair)}
.nx .nx-table tbody th{text-align:left;font-weight:400}
.nx .nx-table td{border-bottom:1px solid var(--hair);font-variant-numeric:tabular-nums}
.nx .nx-table tr:last-child td{border-bottom:0}
.nx .nx-table th.nx-r,.nx .nx-table td.nx-r{text-align:right;padding-right:0}
/* 5 Oct: a sticky header has to be opaque and above the rows, or the rows read through it. The background must sit
   on the cell itself (a transparent th lets rows show) and it needs the full stack, header groups included. */
.nx .nx-table.nx-sticky thead th{position:sticky;top:0;background:var(--paper);z-index:5;
}
/* 5 Oct: the head's bottom line drawn inside the cells that reach the head's bottom, not as a shadow (rule 18) */
.nx .nx-table.nx-sticky thead tr:last-child th,.nx .nx-table.nx-sticky thead th[rowspan]{box-shadow:inset 0 -1px 0 0 var(--line)}
.nx .nx-table.nx-sticky thead{position:relative;z-index:5}
.nx .nx-table.nx-sticky tbody th{z-index:1}
.nx .nx-table .nx-mono{font-family:var(--mono);font-size:11.5px;color:var(--faint)}
/* quota grid: numbers you type into */

.nx .nx-agrid tr.nx-dim td{color:var(--faint)}
.nx .nx-agrid tr.nx-dim .nx-panelct{color:var(--faint)}
.nx .nx-agrid tr:hover td{background:none}
.nx .nx-panelct{font-size:14px;color:var(--label);font-variant-numeric:tabular-nums}
.nx .nx-agefoot{display:flex;align-items:center;gap:14px;margin-top:20px}
.nx .nx-ageline{font-size:12.5px;color:var(--muted);margin:-6px 0 16px}

/* ---------- 17. import ---------- */
.nx .nx-imppanel{display:none;flex:1;min-height:0;width:100%}
.nx .nx-imppanel.nx-on{display:flex}
.nx .nx-impleft{width:46%;flex:0 0 46%;border-right:1px solid var(--hair);padding:22px 24px 26px;
overflow-y:auto;display:flex;flex-direction:column;min-height:0}
.nx .nx-imppanel.nx-collapsed .nx-impleft{display:none}
.nx .nx-impside{width:308px;flex:0 0 308px;border-right:1px solid var(--hair);overflow-y:auto;min-height:0;
display:flex;flex-direction:column}
.nx .nx-impright{flex:1;min-width:0;overflow-y:auto;position:relative;min-height:0}
.nx .nx-impcol{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.nx .nx-uprow{display:flex;align-items:center;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--hair)}
.nx .nx-uprow.nx-over{border-color:var(--blue);background:var(--wash-2)}
.nx .nx-uphint{font-size:12.5px;color:var(--muted);line-height:1.5}

.nx .nx-srow .nx-sname{font-size:14px;font-weight:500;color:var(--navy);line-height:1.35}
.nx .nx-srow .nx-smeta{margin-top:4px;font-size:12px;color:var(--faint)}
.nx .nx-srow:hover .nx-sname{color:var(--blue)}
.nx .nx-srow{padding:12px 20px;border-bottom:1px solid var(--hair);cursor:pointer;display:flex;align-items:flex-start;gap:12px}
.nx .nx-srow .nx-sbody{flex:1;min-width:0}
.nx .nx-srow .nx-spick{color:var(--line-3);opacity:1;flex:none;margin-top:3px}
.nx .nx-srow:hover{box-shadow:inset 0 1px 0 var(--line-3),inset 0 -1px 0 var(--line-3)}
.nx .nx-srow.nx-picked{background:var(--blue-tint)}
.nx .nx-srow.nx-picked .nx-sname{color:var(--blue-ink);font-weight:600}
.nx .nx-srow.nx-picked .nx-smeta{color:var(--blue-ink);opacity:.75}
.nx .nx-srow.nx-picked .nx-spick{opacity:1;color:var(--blue)}
.nx .nx-picked{padding:14px 22px;border-bottom:1px solid var(--hair)}
.nx .nx-picked .nx-pname{font-size:15px;font-weight:600;color:var(--navy)}
.nx .nx-picked .nx-pmeta{font-size:12.5px;color:var(--muted);margin-top:4px}
.nx .nx-cat{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 20px;font-size:13.5px;
color:var(--label);cursor:pointer;border-bottom:1px solid var(--hair)}
.nx .nx-cat:hover{color:var(--blue)}
.nx .nx-cat.nx-on{color:var(--blue);background:var(--soft)}
.nx .nx-catcount{font-family:var(--mono);font-size:11.5px;color:var(--faint)}
.nx .nx-rhead{position:sticky;top:0;z-index:3;background:var(--paper);display:flex;align-items:center;gap:12px;height:52px;
padding:0 22px;border-bottom:1px solid var(--hair)}
.nx .nx-rhead .nx-t{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.nx .nx-rhead .nx-n{font-size:12.5px;color:var(--muted)}
.nx .nx-rhead .nx-rt{margin-left:auto;display:flex;align-items:center;gap:14px}
.nx .nx-rrow{display:flex;gap:14px;align-items:flex-start;padding:14px 22px;border-bottom:1px solid var(--hair);cursor:pointer}
.nx .nx-rrow:hover .nx-rq{color:var(--blue)}
.nx .nx-rtick{width:18px;flex:0 0 18px;margin-top:3px;color:var(--line-3);line-height:1;display:flex;justify-content:center}
.nx .nx-rtick i[data-i]{font-size:15px}
.nx .nx-rrow:hover .nx-rtick,.nx .nx-rrow.nx-on .nx-rtick{color:var(--blue)}
.nx .nx-rbody{flex:1;min-width:0}
.nx .nx-rq{font-size:15px;font-weight:400;color:var(--navy);letter-spacing:-.01em;line-height:1.5}
.nx .nx-rrow:not(.nx-on) .nx-rq{color:var(--muted)}
.nx .nx-rmeta{font-size:12.5px;color:var(--muted);margin-top:7px;line-height:1.8}
.nx .nx-rid{font-family:var(--mono);font-size:11.5px;color:var(--faint);flex:0 0 auto;margin-top:4px}
.nx .nx-rrow:not(.nx-on) .nx-tpill{background:var(--soft);color:var(--faint)}
.nx .nx-rtype{height:28px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);font-family:inherit;
font-size:12.5px;color:var(--blue);padding:0 8px;margin-top:8px;cursor:pointer;outline:0}
.nx .nx-bulk{position:sticky;bottom:0;z-index:3;background:var(--bulk-bg);border-top:1px solid var(--bulk-line);padding:11px 22px;
display:flex;align-items:center;gap:18px;font-size:12.5px;color:var(--label)}
.nx .nx-bulk b{color:var(--navy);font-weight:600}
.nx .nx-srcbar{padding:14px 22px;border-bottom:1px solid var(--hair)}
.nx .nx-srcbar .nx-line{display:flex;align-items:center;gap:14px}
.nx .nx-srcbar .nx-src{flex:1;min-width:0;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nx .nx-srcbar .nx-src b{color:var(--navy);font-weight:600}


.nx .nx-impempty{padding:26px 22px;font-size:13px;color:var(--muted)}
.nx .nx-composer{position:relative;display:flex;flex-direction:column;flex:1;min-height:0}
.nx .nx-sendrow{display:flex;align-items:center;gap:12px;padding-top:12px}
.nx .nx-sendrow .nx-keys{font-size:12.5px;color:var(--faint)}
.nx .nx-wm{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
user-select:none;pointer-events:none}
.nx .nx-wm .nx-row{display:flex;flex-direction:column;align-items:center;gap:2px;filter:grayscale(1) opacity(.34);
transition:filter .35s,opacity .35s}
.nx .nx-wm.nx-loading .nx-row{filter:none;opacity:1}
.nx .nx-wm .nx-top{font-size:14px;font-weight:800;letter-spacing:.02em;color:var(--navy);line-height:1}
.nx .nx-wm .nx-word{display:flex;align-items:center;font-size:52px;font-weight:800;letter-spacing:-.03em;color:var(--navy);line-height:.92}
.nx .nx-wm .nx-word .nx-xm{width:.62em;height:.78em;margin:0 -.02em}
.nx .nx-wm .nx-word .nx-xm svg{width:100%;height:100%;display:block}
.nx .nx-wm .nx-cap{margin-top:24px;font-size:13px;color:var(--muted);opacity:0;transition:opacity .3s}
.nx .nx-wm.nx-loading .nx-cap{opacity:1}
.nx .nx-wm.nx-loading .nx-top,.nx .nx-wm.nx-loading .nx-word .nx-lt{background:linear-gradient(100deg,var(--navy) 36%,var(--shimmer) 50%,var(--navy) 64%);
background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
-webkit-text-fill-color:transparent;animation:nx-sweep 2.4s linear infinite}
.nx .nx-spinner{width:14px;height:14px;border:2px solid rgba(var(--on-blue-rgb),.45);border-top-color:var(--on-blue);border-radius:50%;
display:inline-block;animation:nx-spin .7s linear infinite}
.nx .nx-writing{display:flex;align-items:center;gap:10px;padding:14px 22px;font-size:12.5px;color:var(--muted)}
.nx .nx-writing .nx-dots span{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--line-3);margin-right:3px;
animation:nx-bounce 1s infinite}
.nx .nx-writing .nx-dots span:nth-child(2){animation-delay:.15s}
.nx .nx-writing .nx-dots span:nth-child(3){animation-delay:.3s}
.nx .nx-rrow.nx-pending{opacity:0}
.nx .nx-rrow.nx-reveal{animation:nx-fadeUp .34s ease both}
.nx .nx-leftacts{display:flex;align-items:center;gap:14px;padding-top:14px}
.nx .nx-parsestate{font-size:12.5px;color:var(--faint)}

/* ---------- 18. billing ---------- */





.nx .nx-brow.nx-open .nx-pickrow{border-bottom-color:transparent}
.nx .nx-bhead{cursor:pointer}
.nx .nx-bhead:hover .nx-nm{color:var(--blue)}
.nx .nx-bhead .nx-cv{margin-left:16px}
.nx .nx-bdet{display:none;padding:2px 0 18px 30px;border-bottom:1px solid var(--hair)} /* amounts end on the row's right edge, head and detail alike */
.nx .nx-brow.nx-open .nx-bdet{display:block}
.nx .nx-brow.nx-open .nx-bhead .nx-cv{transform:rotate(180deg)}
.nx .nx-bline{display:flex;align-items:baseline;gap:16px;padding:10px 0;border-top:1px solid var(--hair);font-size:13px;
color:var(--muted)}
.nx .nx-bline .nx-d3{flex:1;min-width:0;color:var(--text)}
.nx .nx-bline .nx-why{font-size:12px;color:var(--faint);margin-top:2px}
.nx .nx-bline .nx-n4{text-align:right;font-variant-numeric:tabular-nums}
.nx .nx-bline .nx-a4{width:120px;text-align:right;color:var(--navy);font-weight:600;font-variant-numeric:tabular-nums}
.nx .nx-bline.nx-out .nx-d3,.nx .nx-bline.nx-out .nx-a4{color:var(--muted);font-weight:400}
.nx .nx-bline.nx-total{border-top:1px solid var(--line)}
.nx .nx-bline.nx-total .nx-d3,.nx .nx-bline.nx-total .nx-a4{color:var(--navy);font-weight:600}
.nx .nx-pickrow{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--hair);font-size:13.5px}
.nx .nx-pickrow .nx-nm{color:var(--navy);font-weight:500}
.nx .nx-pickrow .nx-lt{font-size:12px;color:var(--faint);margin-top:3px}
.nx .nx-pickrow .nx-amt,
.nx .nx-sumrow{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--hair);font-size:13.5px;
color:var(--muted)}

.nx .nx-sumrow.nx-tot{border-bottom:0;border-top:1px solid var(--line);font-size:14px;color:var(--navy);padding-top:14px}
.nx .nx-pickrow .nx-amt.nx-plain{display:block;border-bottom:0;padding:0;color:var(--navy);font-weight:600;min-width:90px;text-align:right;font-variant-numeric:tabular-nums} /* display:block: the shared .amt rule made it a flex box, where text-align does nothing */
.nx .nx-bhead .nx-cv.nx-fold{margin:0;width:16px;flex:none;color:var(--faint);transition:transform .15s ease}
.nx .nx-brow.nx-open .nx-bhead .nx-cv.nx-fold{transform:rotate(90deg)}
.nx .nx-bhead .nx-txt{flex:1;min-width:0}
.nx .nx-bhead .nx-txt .nx-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nx .nx-bdet{padding-left:58px} /* under the name, past the caret and the flag */
.nx .nx-pickrow .nx-amt.nx-plain:last-child{margin-left:auto} /* panels: the amount is the last thing in the row, so it takes the right edge */
.nx .nx-row.nx-frow .nx-ctl .nx-poin{width:240px;max-width:100%;margin-left:auto;text-align:right}
.nx .nx-row.nx-value .nx-ctl .nx-lnk.nx-q{margin-left:8px}
.nx .nx-payline{display:flex;align-items:center;gap:10px;min-height:44px;padding:0;border-bottom:1px solid var(--hair);font-size:13.5px;color:var(--navy)}
.nx .nx-payline i[data-i]{font-size:16px;color:var(--muted)}
.nx .nx-payline b{font-weight:600}
.nx .nx-bstate{display:flex;align-items:center;gap:24px;padding:16px 0;border-bottom:1px solid var(--hair)}
.nx .nx-bstate .nx-st{font-size:15px;font-weight:600;color:var(--navy);letter-spacing:-.01em}
.nx .nx-bstate .nx-sd{font-size:13.5px;color:var(--muted);line-height:1.5;margin-top:4px;max-width:720px}
.nx .nx-bstate .nx-sd b{color:var(--navy);font-weight:600}
.nx .nx-bstate .nx-stx{flex:1;min-width:0}
.nx .nx-bstate .nx-ba{margin-left:auto;flex:none}
.nx .nx-btrail .nx-tr{display:grid;grid-template-columns:20px minmax(0,1fr) 150px minmax(0,1fr);align-items:center;column-gap:14px;min-height:44px;border-bottom:1px solid var(--hair);font-size:13.5px;color:var(--navy)}
.nx .nx-btrail .nx-tr .nx-tick{width:18px;height:18px}
.nx .nx-btrail .nx-tr .nx-td{color:var(--muted);font-size:12.5px;white-space:nowrap}
.nx .nx-btrail .nx-tr .nx-tx{color:var(--muted);font-size:12.5px;text-align:right}
@media (max-width:600px){.nx .nx-bstate{flex-wrap:wrap}.nx .nx-bstate .nx-ba{margin-left:0;flex:1 0 100%}.nx .nx-btrail .nx-tr{grid-template-columns:20px minmax(0,1fr);row-gap:2px;padding:8px 0}.nx .nx-btrail .nx-tr .nx-td,.nx .nx-btrail .nx-tr .nx-tx{grid-column:2;text-align:left}}
.nx #bFigs .nx-lead .nx-n2{font-size:22px}
.nx #bFigs .nx-lead{display:contents}
.nx .nx-sumrow.nx-tot .nx-v3{font-size:17px}

/* ---------- 19. menus, modal, toast ---------- */
.nx .nx-menu{position:absolute;z-index:70;background:var(--paper);border:1px solid var(--line);border-radius:8px;
box-shadow:0 12px 32px rgba(var(--ink-rgb),.14);padding:6px;min-width:210px}
.nx .nx-sephead{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);padding:8px 10px 6px}
.nx .nx-mi{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r);font-size:13px;color:var(--text);cursor:pointer}
/* TRY: menu rows hover without a fill, the row ink darkens instead */
.nx .nx-mi:hover{color:var(--blue-ink)}
.nx .nx-mi.nx-on{color:var(--navy);font-weight:500}
.nx .nx-mi .nx-dot{width:7px;height:7px;border-radius:50%}
.nx .nx-mi.nx-add{color:var(--blue)}
.nx .nx-msep{height:1px;background:var(--hair);margin:6px 0}
.nx .nx-pk{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r);cursor:pointer}
.nx .nx-pk:hover{background:var(--soft)}
.nx .nx-pk.nx-on{background:var(--blue-tint)}
.nx .nx-pk .nx-nm2{font-size:13.5px;color:var(--navy);font-weight:500}
.nx .nx-pk .nx-mt{font-family:var(--mono);font-size:11px;color:var(--faint)}
.nx .nx-pk .nx-st{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--label)}
.nx .nx-pk .nx-st .nx-d{width:7px;height:7px;border-radius:50%}
.nx .nx-modal{background:var(--paper);border-radius:10px;width:min(520px,92vw);box-shadow:0 24px 60px rgba(var(--ink-rgb),.24)}
.nx .nx-mh{display:flex;align-items:center;gap:12px;padding:22px 24px 6px}
.nx .nx-mh h4{margin:0;font-size:16px;font-weight:600;color:var(--navy)}
.nx .nx-warnico{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-size:17px;flex:none}
.nx .nx-warnico.nx-amber{background:var(--amber-bg);color:var(--amber)}
.nx .nx-warnico.nx-red{background:var(--red-bg);color:var(--red)}
.nx .nx-warnico.nx-blue{background:var(--blue-tint);color:var(--blue)}
.nx .nx-mb{padding:6px 24px 18px;font-size:13.5px;color:var(--label)}
.nx .nx-f2{display:flex;justify-content:space-between;gap:20px;padding:9px 0;border-bottom:1px solid var(--hair);font-size:13px}
.nx .nx-f2 span:last-child{color:var(--navy);font-weight:500}
.nx .nx-mf{display:flex;gap:10px;padding:0 24px 22px}
.nx .nx-toast{position:fixed;left:50%;bottom:86px;transform:translate(-50%,14px);background:var(--tip-bg);color:var(--on-ink);
padding:10px 16px;border-radius:99px;font-size:13px;opacity:0;pointer-events:none;transition:all .18s ease;z-index:80}
.nx .nx-toast.nx-on{opacity:1;transform:translate(-50%,0)}
.nx .nx-picker .nx-list{max-height:300px;overflow:auto;padding:4px 0}

/* ---------- 20. launch bar ---------- */
.nx .nx-launch{position:fixed;left:0;right:0;bottom:0;background:rgba(var(--paper-rgb),.96);backdrop-filter:blur(6px);
border-top:1px solid var(--line);padding:12px 0;z-index:20}
.nx .nx-launch .nx-in{max-width:1160px;margin:0 auto;padding:0 40px;display:flex;align-items:center;gap:16px}
.nx .nx-launch .nx-pubdot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--blue);margin-right:8px;vertical-align:1px;animation:nx-pubdot 1.2s ease-out 2}
@keyframes nx-pubdot{0%{box-shadow:0 0 0 0 rgba(var(--blue-rgb),.45)}100%{box-shadow:0 0 0 10px rgba(var(--blue-rgb),0)}}
.nx .nx-launch .nx-in.nx-live .nx-txt .nx-dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:8px;vertical-align:1px}
.nx .nx-launch .nx-txt{font-size:13px;color:var(--label)}
.nx .nx-launch .nx-txt b{color:var(--navy);font-weight:600}
.nx .nx-launch .nx-acts{margin-left:auto;display:flex;align-items:center;gap:16px}

/* ---------- 21. demo scaffolding ---------- */
.nx .nx-demo{display:flex;gap:8px;align-items:center;padding-top:34px;flex-wrap:wrap;gap:8px}
.nx .nx-demo .nx-dl{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.nx .nx-note{margin-top:26px;padding:18px 0 0;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);line-height:1.7}
.nx .nx-note b{color:var(--label)}

/* ---------- 22. animation ---------- */
@media (prefers-reduced-motion:reduce){
  .nx .nx-gut,.nx .nx-gut .nx-gico,.nx .nx-cv,.nx .nx-btn,.nx .nx-seg span,.nx .nx-qdet,.nx .nx-lvl,.nx .nx-coll{transition:none}
}
@keyframes nx-sweep{0%{background-position:130% 50%}100%{background-position:-30% 50%}}
@keyframes nx-spin{to{transform:rotate(360deg)}}
@keyframes nx-bounce{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes nx-fadeUp{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* ---------- 23. touch and small screens: moved to section 38 ---------- */
@media(max-width:760px){
  .nx .nx-hide-sm{display:none}
  .nx .nx-wrap{padding:0 16px 170px}

  .nx .nx-topbar{gap:14px;padding:10px 0}
  .nx .nx-phead{flex-wrap:wrap;padding-top:18px}
  .nx .nx-phead h1{flex:1 0 100%;font-size:20px;padding-bottom:12px}
  .nx .nx-phead .nx-spacer{display:none}
  .nx .nx-tabs{width:100%;overflow-x:auto;scrollbar-width:none}
  .nx .nx-tabs::-webkit-scrollbar{display:none}
  .nx .nx-tab{padding:0 10px 12px;font-size:13.5px}

  .nx .nx-roll{flex-wrap:wrap;gap:10px 24px;padding:14px 0 10px}
  .nx .nx-roll .nx-scope{flex:0 0 100%}
  .nx .nx-roll .nx-rt{margin-left:0}

  .nx .nx-label{flex-wrap:wrap;height:auto;padding:0 0 12px;margin-top:44px}
  .nx .nx-sublabel{flex-wrap:wrap;height:auto;padding:0 0 12px;margin-top:22px}
  .nx .nx-label .nx-rt,.nx .nx-sublabel .nx-rt{width:100%;margin-left:0;padding-top:10px;justify-content:space-between;gap:12px}

  .nx .nx-ohead{flex-wrap:wrap;gap:10px;padding:18px 0 2px}
  .nx .nx-otools{margin-left:0;flex:0 0 100%;flex-wrap:wrap;gap:10px}
  .nx .nx-onm{font-size:17px}

  .nx .nx-mets{display:grid;grid-template-columns:1fr 1fr;gap:18px 0;padding:18px 0 4px}
  .nx .nx-met{padding:0 16px}
  .nx .nx-met:nth-child(odd){padding-left:0;border-left:0}
  .nx .nx-mets .nx-grp2{display:contents}
  .nx .nx-met .nx-n2{font-size:16px}

  .nx .nx-qrow{flex-wrap:wrap;gap:10px;padding:12px 0;align-items:center}
  .nx .nx-qt{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.4;font-size:15px}
  .nx .nx-qid{order:2;width:auto}
  .nx .nx-rowflag{order:4}
  .nx .nx-rowacts{order:5;margin-left:auto}
  .nx .nx-cv{order:6}
  .nx .nx-qdet .nx-pad{padding:14px 0 18px}
  .nx .nx-gut,.nx .nx-qrow:hover .nx-gut{width:0;margin-right:-10px}
  .nx .nx-logicrow{flex-wrap:wrap}
  .nx .nx-lvl .nx-lvl{padding-left:14px}
  .nx .nx-secbar{flex-wrap:wrap;height:auto;padding:12px 0 8px;margin-top:6px}
  .nx .nx-secbar .nx-bnote{flex:1 0 100%}

  .nx .nx-kinds{width:100%;overflow-x:auto;white-space:nowrap;gap:16px;scrollbar-width:none}
  .nx .nx-kinds::-webkit-scrollbar{display:none}
  .nx .nx-seg{display:flex;flex:1 1 auto;min-width:0;max-width:100%}
  .nx .nx-seg span{flex:1 1 0;min-width:0;padding-left:6px;padding-right:6px}
  .nx .nx-rowfilter{margin-left:0;width:100%;height:38px}
  .nx .nx-rowfilter input{width:100%;font-size:16px}

  .nx .nx-notice{flex-wrap:wrap;padding:12px 14px}
  .nx .nx-notice .nx-acts{width:100%;margin-left:0;padding-left:0;padding-top:10px}

  .nx .nx-lrow{padding:18px 0 20px}
  .nx .nx-lhead{flex-wrap:wrap}

  .nx .nx-addslot{height:48px}
  .nx .nx-launch{padding:10px 0}
  .nx .nx-launch .nx-in{flex-wrap:wrap;gap:10px;padding:0 16px}
  .nx .nx-launch .nx-txt{flex:1 0 100%}
  .nx .nx-launch .nx-acts{width:100%;margin-left:0;justify-content:space-between}
  .nx .nx-launch .nx-btn.nx-pri{flex:1;justify-content:center;margin-left:8px}

  .nx .nx-slider{width:100vw}
  .nx .nx-shead{padding:16px 16px 12px;flex-wrap:wrap}
  .nx .nx-stabs{padding:0 16px;overflow-x:auto;scrollbar-width:none}
  .nx .nx-stabs::-webkit-scrollbar{display:none}
  .nx .nx-sbody{padding:18px 16px 40px}
  .nx .nx-sfoot{flex-wrap:wrap;padding:12px 16px}
  .nx .nx-sfoot .nx-btn{flex:1 1 auto;justify-content:center}
  .nx .nx-nameinput{width:100%;font-size:17px}
  .nx .nx-srch input,.nx .nx-num3,.nx .nx-field,.nx .nx-tokens input,.nx .nx-numf input,.nx .nx-msearch input,.nx textarea.nx-ta.nx-sm{font-size:16px}
  .nx .nx-qfield,.nx .nx-arow3{font-size:14px}
  .nx .nx-agrid{display:block;overflow-x:auto;white-space:nowrap}
  .nx .nx-num3{width:56px}
  .nx .nx-agehead{gap:12px}

  .nx .nx-bstep{flex-wrap:wrap;padding:14px 0}
  .nx .nx-bstep .nx-a2{margin-left:34px;padding-left:0;padding-top:10px}
  .nx .nx-bdet{padding-left:0}
  .nx .nx-bline{flex-wrap:wrap;gap:6px 14px}
  .nx .nx-bline .nx-d3{flex:1 0 100%}
  .nx .nx-bline .nx-n4{width:auto;text-align:left}
  .nx .nx-bline .nx-a4{margin-left:auto;width:auto}

  .nx .nx-modal{width:94vw}
  .nx .nx-mf{flex-wrap:wrap}
  .nx .nx-mf .nx-btn{flex:1 1 auto;justify-content:center}
  .nx .nx-toast{bottom:120px;left:16px;right:16px;transform:none;text-align:center}
  .nx .nx-toast.nx-on{transform:none}

  .nx .nx-slider.nx-imp{width:100vw}
  .nx .nx-imppanel{flex-direction:column;overflow-y:auto}
  .nx .nx-impleft{width:100%;flex:0 0 auto;border-right:0;border-bottom:1px solid var(--hair);padding:18px 16px 20px}
  .nx .nx-impside{width:100%;flex:0 0 auto;border-right:0;border-bottom:1px solid var(--hair);max-height:230px}
  .nx .nx-impright,.nx .nx-impcol{overflow:visible}
  .nx .nx-rrow,.nx .nx-rhead,.nx .nx-bulk,.nx .nx-srcbar,.nx .nx-impempty,.nx .nx-writing{padding-left:16px;padding-right:16px}
  .nx .nx-impsearch{padding:10px 16px}
  .nx .nx-impsearch i[data-i]{right:26px;top:19px}
  .nx .nx-impsearch input{font-size:16px}
  .nx textarea.nx-ta{font-size:16px;min-height:180px}
  .nx .nx-refine input{font-size:16px}
  .nx .nx-uprow{flex-wrap:wrap;gap:10px}
  .nx .nx-wm .nx-word{font-size:40px}
}
@media(max-width:480px){
  .nx .nx-onm{font-size:17px}
  .nx .nx-qt{font-size:14.5px}
  .nx .nx-roll{gap:10px 18px}
}

/* =============================================================
   1. ADDITIONS. Everything below is new for the new screens.
   Nothing above this line was changed. Each block says what it
   is for, so it can be accepted or rejected one by one.
   ============================================================= */

/* 24.1 the uppercase label, promoted out of the five components
   that were each redeclaring it */
.nx .nx-ulab{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}

/* 24.2 distribution row and bar. The one real data primitive the
   system was missing: rank, label, difference, value, thin bar. */
.nx .nx-arow{padding:12px 0 0}
.nx .nx-arow .nx-ln2{display:flex;align-items:baseline;gap:12px}
.nx .nx-arow .nx-rk{width:14px;flex:none;font-size:12.5px;color:var(--faint)}

.nx .nx-arow .nx-ad{font-size:12.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.nx .nx-arow .nx-ad.nx-up{color:var(--green-ink)}
.nx .nx-arow .nx-ad.nx-down{color:var(--red)}
.nx .nx-arow .nx-an{width:52px;flex:none;text-align:right;font-size:15px;font-weight:600;color:var(--navy);
font-variant-numeric:tabular-nums}
.nx .nx-arow .nx-acn{width:58px;flex:none;text-align:right;font-size:12.5px;color:var(--muted);
font-variant-numeric:tabular-nums}
.nx .nx-bar{height:4px;border-radius:99px;background:var(--hair);overflow:hidden;margin-top:7px}
.nx .nx-bar span{display:block;height:100%;border-radius:99px;background:var(--blue)}
.nx .nx-bar.nx-q span{background:var(--slate)}

/* 24.3 machine footnote, the line that says how a number was made */
.nx .nx-fnote{font-family:var(--mono);font-size:11.5px;color:var(--faint);line-height:1.7;margin-top:12px}
.nx .nx-fnote.nx-ok{color:var(--green-ink)}

/* 24.4 chart. Only the frame is CSS, the plot is inline svg.
   One saturated series, one neutral series. */
.nx .nx-chart{padding:14px 0 4px}
.nx .nx-chart svg{display:block;width:100%;height:170px;overflow:visible}
.nx .nx-chart .nx-gl{stroke:var(--hair)}
.nx .nx-chart .nx-ax{font-size:11px;fill:var(--faint);font-family:"Inter",sans-serif}
.nx .nx-chart .nx-ln{fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}




/* 24.5 estimate against actual. A metric cell that carries two
   figures and their difference on one line. */








/* 24.6 a third tab level, inside a page section */
.nx .nx-subtabs{display:flex;align-items:flex-end;gap:20px;border-bottom:1px solid var(--line);margin-top:22px}
.nx .nx-subtabs .nx-t{padding:0 0 11px;margin-bottom:-1px;font-size:13.5px;color:var(--label);
border-bottom:2px solid transparent;cursor:pointer}
.nx .nx-subtabs .nx-t:hover{color:var(--blue-ink)}
.nx .nx-subtabs .nx-t.nx-on{color:var(--navy);border-color:var(--blue);font-weight:500}
.nx .nx-subtabs .nx-rt{margin-left:auto;display:inline-flex;align-items:center;gap:10px;padding-bottom:6px}

/* 24.7 the third notice, neutral information */
.nx .nx-notice.nx-info{color:var(--text)} /* 16 Sep: blue is the link colour, so only the icon carries it */
.nx .nx-notice.nx-info > i.nx-n,.nx .nx-notice.nx-info > i[data-i]{color:var(--blue)}
/* the quiet action inside a message keeps the message's own ink */
.nx .nx-notice .nx-acts .nx-go.nx-q{opacity:.7}

/* 24.8 read only value with its actions, for links and tokens */
.nx .nx-ro{display:flex;align-items:center;gap:8px;margin-top:9px}
.nx .nx-ro .nx-v{flex:1;min-width:0;height:36px;display:flex;align-items:center;padding:0 12px;
border:1px solid var(--line);border-radius:var(--r);background:var(--soft);
font-family:var(--mono);font-size:12px;color:var(--label);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nx .nx-ro .nx-v.nx-pw{flex:0 0 148px}

/* 24.9 bordered select. Borderless .sel stays for page level choices,
   this is for a value inside a form row. */
.nx .nx-selbox{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 6px 0 0;margin-right:0;
border:0;border-radius:var(--r);background:none;font-family:inherit;font-size:13.5px;color:var(--text);
cursor:pointer;white-space:nowrap;transition:color .12s ease}
.nx .nx-selbox i[data-i]{font-size:15px;color:var(--faint)}

/* 24.10 source and target, for translation */
.nx .nx-pair{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;padding:6px 0 20px;border-bottom:1px solid var(--hair)}
.nx .nx-pair .nx-cell{display:flex;align-items:center;min-height:40px;padding:2px 0;font-size:13.5px;color:var(--navy)}
.nx .nx-pair .nx-cell.nx-qq{min-height:46px;font-size:15px;font-weight:600;letter-spacing:-.01em}
.nx .nx-pair .nx-cell.nx-ph{color:var(--faint)}
.nx .nx-pairhead{display:flex;align-items:center;gap:14px;padding:14px 0}
.nx .nx-pairhead .nx-rule{flex:1;height:1px;background:var(--line)}

/* 24.11 dashboard shell */
.nx .nx-dash{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:0 44px;align-items:start}
.nx .nx-side{position:sticky;top:70px}
.nx .nx-help{padding:17px 0;border-bottom:1px solid var(--hair)}
.nx .nx-help .nx-h{display:flex;align-items:baseline;gap:12px}
.nx .nx-help .nx-h .nx-t{font-size:15px;font-weight:600;color:var(--navy);letter-spacing:-.012em}
.nx .nx-help .nx-h .nx-ulab{margin-left:auto;flex:none}
.nx .nx-help .nx-d{font-size:13px;color:var(--muted);margin-top:5px}
.nx .nx-help .nx-lnk{margin-top:9px}
.nx .nx-hi{display:flex;align-items:center;gap:18px;padding:30px 0 22px}
.nx .nx-hi h1{margin:0;font-size:23px;font-weight:600;letter-spacing:-.022em;color:var(--navy)}
.nx .nx-hi h1 em{font-style:normal;color:var(--navy)}
.nx .nx-tab .nx-n{font-family:var(--mono);font-size:11.5px;color:var(--faint);margin-left:7px}
.nx .nx-tab.nx-on .nx-n{color:var(--navy)}
@media(max-width:760px){.nx .nx-dash{grid-template-columns:1fr}.nx .nx-side{position:static;margin-top:44px}}

/* 24.12 launch picker: a pick row that carries numbers */
.nx .nx-pickrow .nx-num{width:104px;text-align:right;font-size:12.5px;color:var(--muted);
font-variant-numeric:tabular-nums;flex:none}
.nx .nx-pickrow .nx-num b{color:var(--navy);font-weight:600;font-size:13.5px}
.nx .nx-pickrow.nx-off{color:var(--faint)}
.nx .nx-pickrow.nx-off .nx-nm{color:var(--faint);font-weight:400}
.nx .nx-pickrow.nx-off .nx-num b{color:var(--faint);font-weight:400}
.nx .nx-gtag{font-size:11.5px;font-weight:500;color:var(--green-ink);background:var(--green-tint);
border-radius:4px;padding:2px 7px}

/* 24.13 tokens, for a multi value input such as countries */

.nx .nx-tokens input{flex:1;min-width:140px;border:0;outline:0;font-family:inherit;font-size:13.5px;color:var(--navy)}

/* 24.14 question editor */


.nx .nx-setcount{font-size:12.5px;color:var(--muted);text-transform:none;letter-spacing:0;font-weight:400}

/* 24.15 red variant of the feasibility word, for error counts */
.nx .nx-feas.nx-bad{color:var(--red)}
.nx .nx-feas.nx-plain{color:var(--label);font-weight:400}

/* 24.16 a wide panel, between the 700px slider and the 1180px import */
.nx .nx-slider.nx-pnl{width:min(900px,96vw)}

/* 24.17 prototype scaffolding only, not part of the system */
.nx .nx-switch{position:sticky;top:0;z-index:30;background:rgba(var(--paper-rgb),.97);
backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.nx .nx-switch .nx-in{max-width:1160px;margin:0 auto;padding:9px 40px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
@media(max-width:760px){
  .nx .nx-switch .nx-in{padding:8px 16px}
  
  
  
  .nx .nx-pair{grid-template-columns:1fr;gap:0}
  .nx .nx-arow .nx-an{width:auto}
}

/* 25.1 stepping between objects inside a slider. The panel never moves,
   the content does, and the direction says which way you went. */
@keyframes nx-pubok{0%{background:var(--blue-tint);box-shadow:-12px 0 0 var(--blue-tint),12px 0 0 var(--blue-tint)}100%{background:none;box-shadow:none}}

.nx .nx-pubfact .nx-row.nx-value .nx-ctl{justify-content:flex-start;text-align:left;gap:8px}
.nx .nx-pubfact .nx-row.nx-value .nx-cv{font-size:14px;color:var(--faint);transition:transform .2s}
.nx .nx-pubfact.nx-open .nx-row.nx-value .nx-cv{transform:rotate(180deg)}
.nx .nx-pubfact .nx-row.nx-value{border-bottom:1px solid var(--hair)}
.nx .nx-pubfact .nx-row.nx-value:hover .nx-ctl{color:var(--blue-ink)}
.nx .nx-pubdet{padding:2px 0 8px 160px;border-bottom:1px solid var(--hair)}
.nx .nx-publine{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:13px;color:var(--text);cursor:pointer}
.nx .nx-publine:hover{color:var(--blue-ink)}
.nx .nx-publine > i[data-i]{font-size:14px;color:var(--faint)}
@keyframes nx-slStepNext{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
@keyframes nx-slStepPrev{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@keyframes nx-slFade{from{opacity:0}to{opacity:1}}
.nx .nx-sbody.nx-stepNext{animation:nx-slStepNext .18s cubic-bezier(.2,.7,.3,1)}
.nx .nx-sbody.nx-stepPrev{animation:nx-slStepPrev .18s cubic-bezier(.2,.7,.3,1)}
.nx .nx-sbody.nx-xfade{animation:nx-slFade .14s ease}
.nx .nx-shead.nx-xfade,.nx .nx-stabs.nx-xfade,.nx .nx-sfoot.nx-xfade{animation:nx-slFade .12s ease}
.nx .nx-flashval{animation:nx-slFlashK .55s ease;border-radius:4px}
@keyframes nx-slFlashK{0%{background:var(--blue-tint)}70%{background:var(--blue-tint)}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){
  .nx .nx-sbody.nx-stepNext,.nx .nx-sbody.nx-stepPrev,.nx .nx-sbody.nx-xfade,.nx .nx-shead.nx-xfade,.nx .nx-stabs.nx-xfade,.nx .nx-sfoot.nx-xfade,
  .nx .nx-flashval,.nx .nx-sband,.nx .nx-tick.nx-on i[data-i],.nx .nx-chip.nx-token{animation:none}
  .nx .nx-toggle,.nx .nx-toggle .nx-sw2{transition:none}
}

/* 25.2 the audience name owns its row: only the switcher and the close sit with it,
   the stepper drops to the right of the facts line */
.nx .nx-shd.nx-wide{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;row-gap:0}
/* the name is a title, so it carries a rule. It sits on the row below, which
   spans both columns, so the line is continuous instead of two segments. */

.nx .nx-shd.nx-wide > .nx-tz{grid-column:2;grid-row:1;display:flex;align-items:center;margin-left:0;
padding-left:16px;padding-bottom:0}
.nx .nx-shd.nx-wide > .nx-sub{grid-column:1/3;grid-row:2;min-height:38px;padding-top:2px;
border-top:1px solid var(--hair)}
.nx .nx-slider .nx-shead:has(.nx-shd.nx-wide){height:auto;min-height:82px;padding-top:8px;padding-bottom:6px}
.nx .nx-slider .nx-shead:has(.nx-shd.nx-wide.nx-one){min-height:56px}

.nx .nx-shd .nx-sub .nx-subrt{margin-left:auto;display:flex;align-items:center;gap:6px;padding-left:20px;flex:none}
.nx .nx-shd .nx-sub .nx-subrt .nx-pos{color:var(--faint)}
/* the switcher is an icon box like the close above it, so the two line up on the same edge */
.nx .nx-shd .nx-caret{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;
border-radius:var(--r);color:var(--faint);cursor:pointer;flex:none;margin-left:4px}
.nx .nx-shd .nx-caret:hover{background:var(--soft);color:var(--navy)}
.nx .nx-shd .nx-caret i[data-i]{font-size:16px}

/* 24.21 the pricing block: the price is a figure, its provenance is a line */

/* 24.20 number field. A value you type, a unit that says what it is,
   and presets beside it rather than six buttons pretending to be actions. */
.nx .nx-numf{display:inline-flex;align-items:center;height:36px;border:1px solid var(--line);
border-radius:var(--r);background:var(--paper);transition:border-color .12s ease}
.nx .nx-numf:not(:has(input:disabled,textarea:disabled)):hover{border-color:var(--line-2)}

.nx .nx-numf input::-webkit-outer-spin-button,.nx .nx-numf input::-webkit-inner-spin-button{appearance:none;margin:0}

.nx .nx-numf.nx-w input{width:56px}
.nx .nx-fldrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.nx .nx-fldrow .nx-seg{margin-left:auto}

.nx .nx-flds .nx-hp{margin:0 0 7px}

/* 24.19 the audience head on a page row: one line, flag then name then id */
.nx .nx-ident.nx-one{display:flex;align-items:center;gap:10px;min-width:0}
.nx .nx-ident.nx-one .nx-onm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.nx .nx-ident.nx-one .nx-oid{flex:none}
.nx .nx-ohead,.nx .nx-lhead{align-items:flex-start}
.nx .nx-ohead .nx-otools,.nx .nx-lhead .nx-otools{align-items:center;padding-top:2px}

/* 24.18 the question the editor is showing, selection is name plus tint, never a bar */
/* 29 Aug: the open question is not tinted in the tree; nobody follows the tree with the slider open */

/* =============================================================
   2. SLIDER GRAMMAR. One header, one footer, one error strip,
   for every slider in the file. Overrides a few metrics from
   sections 15 and 17 on purpose, nothing else changes.
   ============================================================= */

/* fixed heights, so the title sits on the same line whatever the right cluster carries */
.nx .nx-slider.nx-imp .nx-shead,.nx .nx-slider.nx-pnl .nx-shead{position:relative;display:flex;align-items:center;height:68px;padding:0 26px}
.nx .nx-stabs{height:44px;align-items:center;gap:20px;flex:none}
.nx .nx-stabs .nx-t{font-size:13px;color:var(--label);border-bottom:2px solid transparent;cursor:pointer;margin-bottom:-1px;padding:0;height:44px;display:inline-flex;align-items:center}

/* identity zone, tools zone */
.nx .nx-shd{display:flex;align-items:center;gap:12px;width:100%;min-width:0}



.nx .nx-shd .nx-ttl > .nx-ttx{overflow:hidden;text-overflow:ellipsis;min-width:0}
.nx .nx-shd .nx-sub{display:flex;align-items:center;gap:8px;min-height:26px;font-size:12.5px;color:var(--muted);
line-height:1.4;white-space:nowrap}
.nx .nx-shd .nx-sub > span:not(.nx-sel):not(.nx-gl):not(.nx-sp):not(.nx-flag){overflow:hidden;text-overflow:ellipsis}
.nx .nx-shd .nx-tz{margin-left:auto;display:flex;align-items:center;gap:6px;flex:none;padding-left:16px}
.nx .nx-shd .nx-pos{font-size:12.5px;color:var(--muted);white-space:nowrap;padding:0 6px}
/* the name field stretches to the bottom of its row and draws its line there,
   so the field's underline sits exactly on the header rule rather than above it */
.nx .nx-shd .nx-nameinput{font-size:18px;field-sizing:content;width:auto;max-width:100%;min-width:40px;
height:32px;padding:0;margin:0;border:0;border-bottom:1px solid transparent;border-radius:0;
background:none;text-overflow:ellipsis;transition:border-color .12s ease}
/* the title zone is what stops it: it may take the room the tools do not */
.nx .nx-shd .nx-ttl{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:600;color:var(--navy);letter-spacing:-.018em;line-height:1.25;white-space:nowrap;overflow:hidden;min-width:0;padding-left:1px;margin-left:-1px}

.nx .nx-shd.nx-wide > .nx-ttl > .nx-caret,.nx .nx-shd.nx-wide > .nx-ttl > .nx-ttx{align-self:center}
/* the name sits on the header's own rule, the way a field sits on a row rule */
.nx .nx-shd.nx-wide > .nx-ttl{grid-column:1;grid-row:1;display:flex;align-items:stretch;gap:8px;min-width:0;min-height:42px;padding-bottom:0;overflow:visible;position:relative}
.nx .nx-shd.nx-wide .nx-nameinput{flex:0 1 auto;width:auto;max-width:100%;min-width:40px;align-self:flex-start;box-sizing:border-box;height:42px;line-height:41px;padding:0;margin:0 0 -1px} /* 10 Oct: a fixed box, so no browser stretches the field and drops its line away from the name */
.nx .nx-shd .nx-nameinput.nx-id{font-family:var(--mono);font-size:16px;font-weight:500;letter-spacing:0;
width:auto;max-width:280px;min-width:44px}
.nx .nx-shd .nx-nameinput.nx-id:disabled{background:none;color:var(--navy)}
.nx .nx-shd .nx-ttl .nx-caret{flex:none}
.nx .nx-shd .nx-sub .nx-sel.nx-sm{margin-left:-8px}

.nx .nx-sel.nx-sm{height:22px;padding:0 6px;margin-left:-6px;font-size:12.5px;color:var(--muted);gap:5px}
.nx .nx-sel.nx-sm i[data-i]{font-size:13px}

/* the import head, brought onto the same metrics without touching its markup */

/* errors are a band against the footer, full bleed, not a card floating on it */
/* pinned to the footer even when the step is short: auto top margin
   takes the slack, sticky takes over once the body scrolls */
.nx .nx-sband{position:sticky;bottom:-40px;z-index:4;margin:auto -26px -40px;background:var(--paper);
box-shadow:0 -1px 0 var(--line);animation:nx-slBand .2s cubic-bezier(.2,.7,.3,1)}
@keyframes nx-slBand{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.nx .nx-sband .nx-m{display:flex;align-items:flex-start;gap:12px;padding:13px 26px;font-size:13px}
.nx .nx-sband .nx-m + .nx-m{border-top:1px solid rgba(var(--ink-rgb),.07)}
.nx .nx-sband .nx-m.nx-err{color:var(--red)}
.nx .nx-sband .nx-m.nx-warn{color:var(--amber)}
.nx .nx-sband .nx-m.nx-info{color:var(--text)}
.nx .nx-sband .nx-m.nx-info > i.nx-n{color:var(--blue)}
.nx .nx-sband .nx-m b{font-weight:600}
.nx .nx-sband .nx-m i.nx-n{font-size:17px;flex:none;margin-top:1px;opacity:.8}
.nx .nx-sband .nx-m .nx-acts{margin-left:auto;flex:none;padding-left:16px}
.nx .nx-sband .nx-m .nx-go{white-space:nowrap} /* 29 Aug: inherits the quiet button, blue in every band */

/* the mark lives in the sub line now, so every header starts with its name */
.nx .nx-shd .nx-sub .nx-flag{width:15px}
.nx .nx-shd .nx-sub .nx-gl{display:inline-flex;align-items:center;color:var(--blue)}
.nx .nx-shd .nx-sub .nx-gl i[data-i]{font-size:15px}
.nx .nx-shd .nx-sub .nx-sp{color:var(--line)}
.nx .nx-shd .nx-nav{display:inline-flex;align-items:center;gap:2px}

/* one status line, right of the buttons */
.nx .nx-sfoot .nx-fnote2{margin-left:auto;padding-left:20px;font-size:12.5px;color:var(--muted);
text-align:right;line-height:1.4}
.nx .nx-sfoot .nx-fnote2.nx-block{color:var(--amber)}
.nx .nx-sfoot .nx-rtact{margin-left:16px;flex:none;display:inline-flex;align-items:center;font-size:12.5px}
.nx .nx-sfoot .nx-rtact .nx-lnk{font-size:12.5px;line-height:1.4}
@media(max-width:760px){
  .nx .nx-shead{height:auto;padding:14px 16px;flex-wrap:wrap}
  .nx .nx-slider.nx-imp .nx-shead,.nx .nx-slider.nx-pnl .nx-shead{height:auto;padding:14px 16px}
  .nx .nx-shd{flex-wrap:wrap}
  .nx .nx-shd .nx-tz{padding-left:0}
  .nx .nx-sfoot{height:auto;padding:12px 16px}
  .nx .nx-sfoot .nx-fnote2{flex:1 0 100%;margin:8px 0 0;padding:0;text-align:left}
  .nx .nx-sband{margin:22px -16px -40px}
  .nx .nx-sband .nx-m{padding:12px 16px}
}

/* =============================================================
   3. ONE FOCUS. Every field, whatever its shape, hovers and
   focuses the same way. Supersedes the five variants above.
   ============================================================= */
.nx .nx-field,.nx .nx-num3,.nx .nx-numf,.nx .nx-tokens,.nx textarea.nx-ta,.nx .nx-impsearch input,.nx .nx-refine input,.nx .nx-shd .nx-nameinput,.nx .nx-rowfilter,.nx .nx-selbox{
  transition:border-color .12s ease,box-shadow .12s ease,background .12s ease}
.nx .nx-numf input:focus,.nx .nx-tokens input:focus,.nx .nx-rowfilter input:focus{box-shadow:none;outline:0;border:0}

/* =============================================================
   4. FIELD SHAPE. Underline everywhere, and the one headline
   number in a section set as a figure. Supersedes the boxes in
   sections 15 and 26; only the focus ring survives from them.
   ============================================================= */
.nx .nx-field,.nx .nx-num3,.nx .nx-numf,.nx .nx-tokens,.nx textarea.nx-ta,.nx .nx-rowfilter,.nx .nx-shd .nx-nameinput,
.nx .nx-impsearch input,.nx .nx-refine input{
  background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none}
.nx .nx-field:not(:disabled):hover,.nx .nx-num3:not(:disabled):hover,.nx .nx-numf:not(:has(input:disabled,textarea:disabled)):hover,.nx .nx-tokens:not(:has(input:disabled,textarea:disabled)):hover,.nx textarea.nx-ta:not(:disabled):hover,.nx .nx-rowfilter:not(:has(input:disabled,textarea:disabled)):hover,
.nx .nx-shd .nx-nameinput:not(:disabled):hover,.nx .nx-impsearch input:not(:disabled):hover,.nx .nx-refine input:not(:disabled):hover{
  border-bottom-color:var(--line-3)}
.nx .nx-field:focus,.nx .nx-num3:focus,.nx textarea.nx-ta:focus,.nx .nx-shd .nx-nameinput:focus,
.nx .nx-impsearch input:focus,.nx .nx-refine input:focus,
.nx .nx-numf:focus-within,.nx .nx-tokens:focus-within,.nx .nx-rowfilter:focus-within{
  border-bottom-color:var(--blue);box-shadow:none;background:none;outline:0}

/* -------------------------------------------------------------
   Field shape, final. The underline marks a gap, not a field.
   A field with something in it is plain text; an empty one shows
   a hairline. So a full form is silent and an empty one points at
   the work. Focus and hover still say where you are.
   ------------------------------------------------------------- */
.nx .nx-field,.nx textarea.nx-ta,.nx .nx-shd .nx-nameinput,.nx .nx-impsearch input,.nx .nx-refine input{
  border-bottom-color:transparent}
.nx .nx-field:placeholder-shown,.nx textarea.nx-ta:placeholder-shown,
.nx .nx-impsearch input:placeholder-shown,.nx .nx-refine input:placeholder-shown{
  border-bottom-color:var(--line)}
.nx .nx-field:not(:disabled):hover,.nx .nx-num3:not(:disabled):hover,.nx textarea.nx-ta:not(:disabled):hover,.nx .nx-shd .nx-nameinput:not(:disabled):hover,
.nx .nx-impsearch input:not(:disabled):hover,.nx .nx-refine input:not(:disabled):hover{border-bottom-color:var(--line-3)}
.nx .nx-field:focus,.nx .nx-num3:focus,.nx textarea.nx-ta:focus,.nx .nx-impsearch input:focus,.nx .nx-refine input:focus{
  border-bottom-color:var(--blue)}
/* a figure is always a figure, so every number keeps its line: completes,
   CPI, incidence, LOI, field duration, age breaks, quota shares */
.nx .nx-numf,.nx .nx-num3,.nx .nx-tokens,.nx .nx-rowfilter{border-bottom-color:var(--line)}
.nx .nx-num3:not(:disabled):hover{border-bottom-color:var(--line-3)}
.nx .nx-num3:focus{border-bottom-color:var(--blue)}
.nx .nx-field,.nx .nx-impsearch input,.nx .nx-refine input{padding-left:2px}
.nx .nx-numf input{width:72px;border:0;outline:0;background:none;font-family:inherit;font-size:14px;font-weight:500;color:var(--navy);text-align:right;padding:0 4px 0 10px;font-variant-numeric:tabular-nums;padding-left:0}
.nx .nx-numf em{font-style:normal;font-size:12.5px;color:var(--faint);padding:0 11px 0 0;white-space:nowrap;padding-right:0;padding-left:8px}

.nx .nx-tokens{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:38px;border:1px solid var(--line);border-radius:var(--r);padding:5px 10px;padding-left:2px;padding-right:2px}
.nx textarea.nx-ta{padding:10px 2px}
.nx .nx-rowfilter{padding-left:2px}

/* the headline number of a section is a figure, not a field.
   The unit sits inside the control, so one rule runs under both. */
.nx .nx-fldrow > .nx-numf,.nx .nx-bigrow .nx-numf{height:auto;background:none;align-items:baseline;padding-bottom:5px;
border:0;border-bottom:1px solid var(--line);border-radius:0}
.nx .nx-fldrow > .nx-numf input,.nx .nx-bigrow .nx-numf input{width:96px;font-size:26px;font-weight:600;letter-spacing:-.02em;
text-align:left;padding:0;border:0}
.nx .nx-fldrow > .nx-numf.nx-cpi input,.nx .nx-bigrow .nx-numf.nx-cpi input{width:76px}
.nx .nx-fldrow > .nx-numf:not(:has(input:disabled,textarea:disabled)):hover,.nx .nx-bigrow .nx-numf:not(:has(input:disabled,textarea:disabled)):hover{border-bottom-color:var(--line-3)}
.nx .nx-fldrow > .nx-numf:focus-within,.nx .nx-bigrow .nx-numf:focus-within{border-bottom-color:var(--blue);box-shadow:none}
.nx .nx-fldrow > .nx-numf em,.nx .nx-bigrow .nx-numf em{font-size:13px;padding-left:9px}
/* the two numbers that decide the audience, side by side and large */
.nx .nx-bigrow{display:flex;gap:34px;flex-wrap:wrap;align-items:stretch}
.nx .nx-bigrow .nx-hp{margin:0 0 8px}
.nx .nx-bigrow > span,.nx .nx-flds > span{min-width:0}
.nx .nx-sepv{width:1px;background:var(--line);align-self:stretch;flex:none}
.nx .nx-flds{display:flex;gap:24px;flex-wrap:wrap;align-items:stretch}
.nx .nx-bigrow .nx-hp .nx-src{color:var(--faint)}
.nx .nx-fldcap{font-size:12.5px;color:var(--muted);margin-top:10px;line-height:1.6}
/* 5 Sep: the figure groups are inputs, so they get the field's line: one line under the group, ending with the
   last cell, grey at rest, blue while any cell in the group has focus. Read-only figure strips never get it. */
/* one continuous grey line under the whole group; the cell under the pointer or with focus paints its own
   segment over it: hover the darker grey, focus blue. The inner field never draws its own line here. */
.nx .nx-bigrow,.nx .nx-flds{display:inline-flex;width:auto;max-width:100%;border-bottom:1px solid var(--line);padding-bottom:6px}
.nx .nx-bigrow > span:not(.nx-sepv),.nx .nx-flds > span:not(.nx-sepv){position:relative}
.nx .nx-bigrow > span:not(.nx-sepv)::after,.nx .nx-flds > span:not(.nx-sepv)::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:transparent;transition:background .12s ease;pointer-events:none}
.nx .nx-bigrow > span:not(.nx-sepv):not(:has(input:disabled,textarea:disabled)):hover::after,.nx .nx-flds > span:not(.nx-sepv):not(:has(input:disabled,textarea:disabled)):hover::after{background:var(--line-3)}
.nx .nx-bigrow > span:not(.nx-sepv):focus-within::after,.nx .nx-flds > span:not(.nx-sepv):focus-within::after{background:var(--blue)}
.nx .nx-bigrow .nx-numf,.nx .nx-flds .nx-numf,.nx .nx-bigrow .nx-numf:not(:has(input:disabled,textarea:disabled)):hover,.nx .nx-flds .nx-numf:not(:has(input:disabled,textarea:disabled)):hover,.nx .nx-bigrow .nx-numf:focus-within,.nx .nx-flds .nx-numf:focus-within,.nx .nx-fldrow > .nx-numf:not(:has(input:disabled,textarea:disabled)):hover{border-bottom-color:transparent;box-shadow:none}
.nx .nx-bigrow + .nx-fldcap,.nx .nx-flds + .nx-fldcap{margin-top:14px}
.nx .nx-fldcap b{color:var(--navy);font-weight:600}
.nx .nx-fldcap .nx-off{color:var(--amber);display:block}
.nx .nx-flds .nx-numf input{width:60px}

/* =============================================================
   5. LOCKED MODE. An audience in field cannot be edited. This is
   a condition of the screen, not an error, so it states itself at
   the top of the body and every value renders as a value.
   ============================================================= */
.nx .nx-lockbar{display:flex;align-items:center;gap:12px;margin:-24px -26px 4px;padding:13px 26px;
background:var(--blue-tint);box-shadow:0 1px 0 var(--lock-line);font-size:13px;color:var(--blue-ink)}
.nx .nx-lockbar i[data-i]{font-size:17px;color:var(--blue);flex:none}
.nx .nx-lockbar b{font-weight:600}

/* a locked value is a value: no line, no hover, nothing to aim at.
   Controls inside a locked panel take the shared disabled state (section 38). */
.nx .nx-locked .nx-field,.nx .nx-locked .nx-num3,.nx .nx-locked .nx-numf,.nx .nx-locked .nx-tokens,.nx .nx-locked textarea.nx-ta,
.nx .nx-locked .nx-selbox,.nx .nx-locked .nx-rowfilter{border-bottom-color:transparent;pointer-events:none}
.nx .nx-locked .nx-numf input,.nx .nx-locked .nx-field,.nx .nx-locked textarea.nx-ta,.nx .nx-locked .nx-num3{color:var(--navy);cursor:default}
.nx .nx-locked .nx-selbox i[data-i]{display:none}
.nx .nx-locked .nx-fldrow > .nx-numf input{border-bottom-color:transparent}

/* =============================================================
   6. Billing, brought onto the system, plus one focus fix.
   ============================================================= */
/* the title field was drawing a border and an inset line at once */

/* steps are text, not badges. Attention fills, calm does not. */








/* one money spec: tabular, navy, 600, right aligned, same column */
.nx .nx-amt,.nx .nx-bline .nx-a4,.nx .nx-sumrow .nx-v3,.nx .nx-bline .nx-n4{font-variant-numeric:tabular-nums;white-space:nowrap}
.nx .nx-amt,.nx .nx-bline .nx-a4{min-width:132px;width:132px;text-align:right;color:var(--navy);font-weight:600}
.nx .nx-bline.nx-out .nx-a4{color:var(--muted);font-weight:400}
.nx .nx-bline .nx-n4{width:120px;color:var(--muted)}
.nx .nx-bline .nx-n4 b{font-weight:600;color:var(--navy)}

/* a row you cannot pick does not behave like one */
.nx .nx-pickrow.nx-ro2{cursor:default}
.nx .nx-pickrow.nx-ro2:hover .nx-nm{color:var(--navy)}

/* =============================================================
   7. COMPARISON. One row carries every column, so the eye never
   travels between duplicated cards.
   ============================================================= */
.nx .nx-colbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:16px 0 4px}
.nx .nx-colbar .nx-rt{margin-left:auto;display:inline-flex;align-items:center;gap:10px}
.nx .nx-colbar .nx-rt > .nx-ico:last-child{margin-right:-6px}
.nx .nx-colbar .nx-cnts{color:var(--label)}
.nx .nx-colbar .nx-cnts.nx-on{color:var(--navy)}
.nx .nx-colbar .nx-cnts i[data-i]{font-size:14px}
.nx .nx-colchip.nx-ro{cursor:default;background:var(--soft)}
.nx .nx-colchip.nx-ro:hover{background:var(--soft)}
.nx .nx-colchip{display:inline-flex;align-items:center;gap:9px;height:34px;padding:0 6px 0 12px;
border-radius:var(--r);background:var(--soft);font-size:13px;color:var(--navy);cursor:pointer;
transition:background .12s ease}
.nx .nx-colchip.nx-isbase{background:var(--blue-tint);color:var(--blue-ink)}
.nx .nx-colchip .nx-cn{font-weight:500}
.nx .nx-colchip .nx-cb{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.nx .nx-colchip.nx-isbase .nx-cb{color:var(--blue-ink);opacity:.75}
.nx .nx-colchip .nx-ico{width:24px;height:24px}
.nx .nx-colchip .nx-lnk.nx-q{font-size:12px}

.nx .nx-cgrid{display:grid;align-items:baseline;column-gap:10px;padding:11px 0 0}
.nx .nx-cgrid .nx-c{text-align:right;font-size:15px;font-weight:600;color:var(--navy);
font-variant-numeric:tabular-nums;white-space:nowrap}
.nx .nx-cgrid .nx-c + .nx-c{border-left:1px solid var(--hair);padding-left:12px}
.nx .nx-chead .nx-c + .nx-c{border-left:0}

/* a long answer wraps to two lines and stops, the same in Totals, Compare and cross tables; the full text is the title */
.nx .nx-cgrid .nx-lab{font-size:15px;color:var(--navy);letter-spacing:-.01em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.35;align-self:center}
.nx .nx-arow .nx-al{flex:1;min-width:0;font-size:15px;color:var(--navy);letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}
.nx .nx-xt tbody tr:not(.nx-qhead):not(.nx-base) th{white-space:normal;min-width:280px;max-width:460px}
.nx .nx-xt tbody tr:not(.nx-qhead):not(.nx-base) th .nx-cl2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nx .nx-chead{padding:18px 0 7px;border-bottom:1px solid var(--hair);position:sticky;top:0;z-index:3;background:var(--paper)}
.nx .nx-chead .nx-c{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
overflow:hidden;text-overflow:ellipsis}
.nx .nx-chead .nx-c.nx-b{color:var(--blue)}
.nx .nx-crow .nx-c{color:var(--muted);font-weight:400}
.nx .nx-crow .nx-c.nx-b{color:var(--navy);font-weight:600}
.nx .nx-crow .nx-c.nx-up{color:var(--green-ink);font-weight:600}
.nx .nx-crow .nx-c.nx-down{color:var(--red);font-weight:600}
.nx .nx-crow .nx-barwrap{grid-column:1/2}
.nx .nx-crow .nx-bar{margin-top:7px}
.nx .nx-zeroline{display:flex;align-items:center;gap:12px;padding:14px 0 2px;font-size:13px;color:var(--muted)}

/* verbatims read like answers, not like a database */
.nx .nx-quo{display:flex;flex-direction:column;gap:4px;padding:9px 0 0 26px;font-size:12.5px;color:var(--muted)}
.nx .nx-quo span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nx .nx-verb{padding:14px 0;border-bottom:1px solid var(--hair)}
.nx .nx-verb .nx-vt{font-size:15px;color:var(--navy);line-height:1.5}
.nx .nx-verb .nx-vm{display:flex;align-items:center;gap:10px;margin-top:7px;font-size:11.5px;color:var(--faint)}
.nx .nx-qmet{display:flex;align-items:center;gap:9px;padding:12px 0 2px;font-size:13px;color:var(--muted)}
.nx .nx-qmet b{color:var(--navy);font-weight:600}
.nx .nx-qmet .nx-sp{color:var(--line)}

/* 30.1 controls, counts, the run and the deviation bar */
.nx .nx-cgrid .nx-c .nx-cn2{display:block;font-size:11.5px;font-weight:400;color:var(--faint);margin-bottom:2px}
.nx .nx-cgrid .nx-c .nx-u{font-size:11px;font-weight:400;color:var(--faint);margin-left:3px}
.nx .nx-cgrid .nx-c.nx-tr{text-align:left;align-self:center} /* the shape sits mid-row, not on the first baseline */
.nx .nx-chead .nx-c.nx-tr{color:var(--faint)}
.nx svg.nx-trend{display:block;overflow:visible}
.nx svg.nx-trend polyline{fill:none;stroke:var(--slate);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.nx svg.nx-trend circle{fill:var(--slate)}
.nx svg.nx-trend circle.nx-b{fill:var(--blue)}

/* 30.2 the deviation display: one column against the base */
/* the id shares the title line, at its own size, and the menu waits for a hover */
.nx .nx-ident.nx-inline{display:flex;align-items:baseline;gap:11px;min-width:0}
.nx .nx-ident.nx-inline .nx-onm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:default}
.nx .nx-ident.nx-inline .nx-onm:hover{color:var(--navy)}
.nx .nx-qidin{font-family:var(--mono);font-size:12.5px;color:var(--faint);flex:none;letter-spacing:0;font-style:normal}
.nx .nx-totbase em.nx-qidin,.nx .nx-qidcell em.nx-qidin{font-size:11.5px;margin-right:10px}
.nx .nx-qidcell{display:flex;align-items:flex-end;align-self:end;padding-bottom:1px}
.nx .nx-otools .nx-ico.nx-hov{opacity:0;transition:opacity .12s ease}
.nx .nx-obj:hover .nx-otools .nx-ico.nx-hov,.nx .nx-otools .nx-ico.nx-hov:focus{opacity:1}
@media (hover:none){.nx .nx-otools .nx-ico.nx-hov{opacity:1}}
.nx .nx-crow.nx-dev{align-items:center;padding:10px 0}
.nx .nx-dvg2{position:relative;display:block;height:7px;background:var(--hair);border-radius:99px}
.nx .nx-dvg2 .nx-fx{position:absolute;top:0;bottom:0;border-radius:99px}
.nx .nx-dvg2 .nx-fx.nx-up{background:var(--green)}
.nx .nx-dvg2 .nx-fx.nx-down{background:var(--amber)}
.nx .nx-dvg2 .nx-zero{position:absolute;left:50%;top:-4px;bottom:-4px;width:1px;background:var(--line-3)}
.nx .nx-chead .nx-c.nx-dvhead{display:flex;justify-content:space-between;text-align:left}

/* 30.3 hover, the stacked bar display, and the base figure on the number edge */
.nx .nx-crow{border-radius:0;transition:none;border-bottom:1px solid var(--hair);padding-bottom:11px}
.nx .nx-crow:focus-within{background:none;box-shadow:none}
.nx .nx-cgrid .nx-c.nx-tip{cursor:default}

.nx .nx-brow2{padding:16px 0 6px;border-bottom:1px solid var(--hair)}
.nx .nx-brow2 .nx-bl{font-size:15px;color:var(--navy);letter-spacing:-.01em;margin-bottom:9px}
.nx .nx-brow2 .nx-bcol{display:grid;grid-template-columns:140px minmax(0,1fr) 62px;align-items:center;
column-gap:14px;padding:4px 0;border-radius:4px}
.nx .nx-brow2 .nx-bcol.nx-wc{grid-template-columns:140px minmax(0,1fr) 58px 62px}
.nx .nx-brow2 .nx-bc{text-align:right;font-size:12.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.nx .nx-brow2 .nx-bcol:hover{background:var(--wash)}
.nx .nx-brow2 .nx-bn{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nx .nx-brow2 .nx-bar{margin:0}
.nx .nx-brow2 .nx-bv{text-align:right;font-size:13.5px;font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums}
.nx .nx-brow2 .nx-bv.nx-up{color:var(--green-ink)}
.nx .nx-brow2 .nx-bv.nx-down{color:var(--red)}

/* 30.4 statistics: base warnings, marks, metric rows */
.nx .nx-colchip .nx-cl{font-size:11px;font-weight:600;color:var(--faint);letter-spacing:.06em}
.nx .nx-colchip.nx-isbase .nx-cl{color:var(--blue)}
.nx .nx-lowtag{font-size:11px;font-weight:500;color:var(--amber);background:var(--amber-bg);border-radius:4px;padding:2px 6px}
.nx .nx-cgrid .nx-c.nx-low{color:var(--faint);font-weight:400}
.nx .nx-cgrid .nx-c.nx-lowish{opacity:.82}
.nx .nx-cgrid .nx-c .nx-ltr,.nx .nx-brow2 .nx-bv .nx-ltr{font-size:10px;font-weight:600;color:var(--faint);letter-spacing:.04em;margin-right:3px}
.nx .nx-cgrid .nx-c .nx-ar,.nx .nx-brow2 .nx-bv .nx-ar{font-style:normal;font-size:9px;margin-right:4px}
.nx .nx-ar.nx-up{color:var(--green-ink)} .nx .nx-ar.nx-down{color:var(--red)}
.nx .nx-cgrid .nx-c.nx-flat2{color:var(--muted);font-weight:400}
.nx .nx-dvg2 .nx-fx.nx-flat2{background:var(--slate)}
.nx .nx-crow.nx-met2{padding:9px 0}
.nx .nx-crow.nx-met2 .nx-lab{font-size:13.5px;color:var(--label)}
.nx .nx-crow.nx-met2 .nx-c{font-size:15px}
.nx .nx-crow.nx-met2 .nx-barwrap{display:none}
.nx .nx-metrule{height:2px;background:var(--line-2);margin:-1px 0 0;position:relative} /* 22 Sep: sits on the last metric row's line, not under it */
.nx .nx-hint{display:inline-flex;vertical-align:-2px;margin-left:6px;color:var(--faint);cursor:default}
.nx .nx-hint i[data-i]{font-size:14px}
.nx .nx-brow2 .nx-lowin{font-style:normal;color:var(--amber);font-size:11.5px;margin-left:6px}
.nx .nx-brow2.nx-metblock{padding-top:6px}
.nx .nx-bmet{display:flex;align-items:baseline;gap:14px;padding:5px 0}
.nx .nx-bmet .nx-bl2{width:140px;flex:none;font-size:12.5px;color:var(--muted)}
.nx .nx-bmet .nx-bmv{width:74px;text-align:right;font-size:13.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.nx .nx-bmet .nx-bmv.nx-b{color:var(--navy);font-weight:600}

/* 30.5 the calculation reference */
.nx .nx-statdoc .nx-formula{font-family:var(--mono);font-size:12.5px;color:var(--blue-ink);
background:var(--blue-tint);border-radius:var(--r);padding:11px 13px;line-height:1.9}
.nx .nx-statdoc .nx-worked{font-size:13px;color:var(--label);line-height:1.85;margin-top:12px}
.nx .nx-statdoc .nx-worked b{color:var(--navy);font-weight:600}
.nx .nx-fnote .nx-lnk.nx-q{margin-left:10px}

/* 30.6 the library and the filter editor */
.nx .nx-librow{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--hair)}
.nx .nx-librow:last-child{border-bottom:0}
.nx .nx-librow .nx-lmain{flex:1;min-width:0}
.nx .nx-librow .nx-lnm{display:flex;align-items:center;gap:9px;font-size:15px;color:var(--navy);letter-spacing:-.01em}
.nx .nx-librow .nx-ldef{font-size:12.5px;color:var(--muted);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nx .nx-librow .nx-lmeta{font-size:12.5px;color:var(--faint);white-space:nowrap;flex:none}
.nx .nx-librow .nx-lacts{display:flex;align-items:center;gap:4px;flex:none}
.nx .nx-mscroll{max-height:min(58vh,440px);overflow:auto}
.nx .nx-mi .nx-h6{white-space:normal}
.nx .nx-mi .nx-fn{font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--faint);margin-left:8px}

/* 30.7 base belongs with the figures it describes, not in the head */
.nx .nx-chead .nx-c .nx-cbase{display:block;font-family:var(--mono);font-size:11px;font-weight:400;
color:var(--faint);letter-spacing:0;text-transform:none;margin-top:3px}
.nx .nx-totbase{display:flex;align-items:baseline;justify-content:space-between;padding:16px 0 7px;
border-bottom:1px solid var(--hair);font-size:11px;font-weight:600;letter-spacing:.12em;
text-transform:uppercase;color:var(--faint)}
.nx .nx-totbase .nx-bn2{font-family:var(--mono);font-size:11.5px;font-weight:400;letter-spacing:0;text-transform:none}

/* 30.8 the column bar: one label, one control per column */
.nx .nx-colw{flex:none;margin-right:4px}
.nx .nx-colchip:hover{background:var(--hover-soft)}
.nx .nx-colchip.nx-isbase:hover{background:var(--blue-hover-2)}
.nx .nx-colchip i[data-i]{font-size:15px;color:var(--faint);margin-left:2px}
.nx .nx-colchip .nx-gtag{pointer-events:none}
.nx .nx-mi .nx-toggle{flex:none}

/* the selector, one component: borderless, faint chevron, soft hover */
.nx .nx-selbox:hover{color:var(--blue-ink)}
.nx .nx-selbox:hover i[data-i]{color:var(--blue-ink)}
.nx .nx-selbox.nx-w{width:auto;justify-content:flex-end}

/* 30.10 two column settings, so a panel fits on one screen */
.nx .nx-lb .nx-cv{color:var(--faint);transition:transform .2s cubic-bezier(.2,.7,.3,1);margin-left:10px}

/* 30.9 the condition builder */
.nx .nx-cond2{border-bottom:1px solid var(--hair)}
.nx .nx-cline{display:flex;align-items:center;gap:12px;min-height:46px;cursor:pointer}

.nx .nx-cline .nx-cq{font-size:14px;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46%;flex:none}
.nx .nx-cline .nx-cq .nx-qidin{margin-left:9px}
.nx .nx-cline .nx-cv2{flex:1;min-width:0;font-size:13px;color:var(--text);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nx .nx-cline .nx-cv{color:var(--faint);transition:transform .2s cubic-bezier(.2,.7,.3,1)}
.nx .nx-cond2.nx-open .nx-cline .nx-cv{transform:rotate(180deg)}
.nx .nx-cbody{padding:2px 0 16px 0}
.nx .nx-crow2{display:flex;align-items:center;gap:10px;padding:0 0 12px}
.nx .nx-crow2 .nx-rt2{margin-left:auto;display:flex;gap:14px}
/* 2 Oct: its own class; "nx-rt2" is the rich text editor's and added 8px under these links, lifting them off the line */
.nx .nx-crow2 .nx-crt{margin-left:auto;display:flex;gap:14px}
.nx .nx-cbody .nx-chipset{gap:7px}
.nx .nx-cbody .nx-field{max-width:420px}

/* 30.11 search inside a menu, and the current row carries its own edit */
.nx .nx-msearch{display:flex;align-items:center;gap:9px;margin:6px 10px 4px;padding:0 10px;height:34px;
border-bottom:1px solid var(--line)}
.nx .nx-msearch i[data-i]{font-size:15px;color:var(--faint)}
.nx .nx-msearch input{flex:1;border:0;outline:0;background:none;font-family:inherit;font-size:13px;color:var(--navy)}
.nx .nx-msearch:focus-within{border-bottom-color:var(--blue)}
.nx .nx-menu .nx-sephead + .nx-mi{margin-top:0}
.nx .nx-menu .nx-sephead:not(:first-child){margin-top:8px;padding-top:12px;border-top:1px solid var(--hair)}
.nx .nx-mi .nx-mie{opacity:0;margin-left:auto;flex:none}
.nx .nx-mi:hover .nx-mie,.nx .nx-mi.nx-on .nx-mie{opacity:1}
.nx .nx-mi .nx-inview{font-style:normal;font-size:11px;color:var(--blue-ink);background:var(--blue-tint);
border-radius:4px;padding:1px 6px;margin-left:8px}

/* =============================================================
   8. SMALL SCREENS. Every screen added after section 8, in one
   place. The rule is the same as the original: things relax,
   they do not change into something else.
   ============================================================= */
.nx .nx-cscroll{overflow-x:auto;overscroll-behavior-x:contain}
.nx .nx-cscroll .nx-cgrid{min-width:100%}

@media (max-width:760px){
  /* insights: the strip wraps instead of squeezing */

  /* columns: the chips wrap, long names clip rather than push */
  .nx .nx-colbar{padding:12px 0 4px}
  .nx .nx-colw{flex:1 0 100%;margin:0 0 2px}
  .nx .nx-colchip{max-width:100%}
  .nx .nx-colchip .nx-cn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:44vw}

  /* the matrix keeps its shape and scrolls sideways, label column pinned */
  .nx .nx-cscroll{margin:0 -16px;padding:0 16px}
  .nx .nx-cscroll .nx-cgrid{min-width:max-content}
  .nx .nx-cgrid .nx-lab,.nx .nx-chead .nx-qidcell{position:sticky;left:0;z-index:2;background:var(--paper);
    padding-right:12px;min-width:150px;max-width:150px}
  .nx .nx-crow:hover{background:none;box-shadow:none}
  .nx .nx-cgrid .nx-c.nx-tr,.nx .nx-chead .nx-c.nx-tr{display:none}

  /* bars: narrower name column */
  .nx .nx-brow2 .nx-bcol{grid-template-columns:104px minmax(0,1fr) 54px;column-gap:10px}
  .nx .nx-brow2 .nx-bcol.nx-wc{grid-template-columns:104px minmax(0,1fr) 54px 56px}

  /* two figures side by side become one under the other */
  .nx .nx-bigrow{gap:22px}
  .nx .nx-bigrow > .nx-sepv,.nx .nx-flds > .nx-sepv{display:none}
  .nx .nx-flds{gap:18px 26px}

  /* library rows stack their meta under the name */
  .nx .nx-librow{flex-wrap:wrap;gap:6px 12px}
  .nx .nx-librow .nx-lmain{flex:1 0 100%}
  .nx .nx-librow .nx-lacts{margin-left:auto}

  /* filter builder: the summary drops under the question */
  .nx .nx-cline{flex-wrap:wrap;min-height:auto;padding:12px 0;gap:4px 10px}
  .nx .nx-cline .nx-cq{max-width:calc(100% - 70px);flex:1}
  .nx .nx-cline .nx-cv2{flex:1 0 100%;order:9}
  .nx .nx-crow2{flex-wrap:wrap}

  /* the calculation reference */
  .nx .nx-statdoc .nx-formula{font-size:11.5px;line-height:1.8}
  .nx .nx-statdoc .nx-worked{font-size:12.5px}

  /* a titled row keeps its title, and its controls drop to the next line */
  .nx .nx-label,.nx .nx-sublabel{flex-wrap:wrap;height:auto;min-height:46px;padding:8px 0;margin-top:44px}
  .nx .nx-sublabel{margin-top:24px}
  .nx .nx-label > .nx-rt,.nx .nx-sublabel > .nx-rt{flex:1 0 100%;margin:8px 0 0;justify-content:flex-start;gap:14px}
  .nx .nx-label .nx-seg{flex:1 1 auto}
  .nx .nx-filterbar .nx-rowfilter{flex:1 0 100%}
  .nx .nx-kinds{flex-wrap:wrap;gap:8px 16px}

  /* dashboard, feasibility, translations */
  .nx .nx-hi{flex-wrap:wrap;gap:12px}
  .nx .nx-qtot{flex-wrap:wrap;gap:10px 18px}
  .nx .nx-pairhead{flex-wrap:wrap;gap:10px}
  .nx .nx-subtabs{overflow-x:auto;overscroll-behavior-x:contain}
  .nx .nx-subtabs .nx-rt{position:sticky;right:0;background:var(--paper);padding-left:10px}

  /* money and metric columns give way before the label does */
  .nx .nx-pickrow .nx-num{width:auto;min-width:74px}
  .nx .nx-amt,.nx .nx-bline .nx-a4{min-width:96px;width:96px}
  .nx .nx-bline .nx-n4{width:88px}
  .nx .nx-bmet .nx-bl2{width:104px}
  .nx .nx-tokens input{min-width:100px}

  /* panels: the wide header stacks rather than colliding with the close */
  .nx .nx-shd.nx-wide{grid-template-columns:minmax(0,1fr);row-gap:4px}
  .nx .nx-shd.nx-wide > .nx-ttl{grid-column:1;grid-row:1}
  .nx .nx-shd.nx-wide > .nx-tz{grid-column:1;grid-row:2;justify-content:flex-end;padding-left:0}
  .nx .nx-shd.nx-wide > .nx-sub{grid-column:1;grid-row:3;border-top:0;padding-top:0}
  .nx .nx-sfoot{flex-wrap:wrap;row-gap:8px}
  .nx .nx-sfoot .nx-rtact{margin-left:auto;padding-left:0}
  .nx .nx-librow .nx-lmeta{font-size:12px}
  .nx .nx-msearch{margin:6px 8px 4px}
}

@media (max-width:480px){
  .nx .nx-totbase{font-size:10.5px}
  .nx .nx-arow .nx-acn{width:46px}
  .nx .nx-arow .nx-an{width:44px}
  .nx .nx-cgrid .nx-lab,.nx .nx-chead .nx-qidcell{min-width:120px;max-width:120px}
  .nx .nx-brow2 .nx-bcol,.nx .nx-brow2 .nx-bcol.nx-wc{grid-template-columns:1fr auto;row-gap:4px;column-gap:10px}
  .nx .nx-brow2 .nx-bar{grid-column:1/3;order:9}
  .nx .nx-brow2 .nx-bc{grid-row:1;text-align:right}
  .nx .nx-colchip .nx-cn{max-width:52vw}
  .nx .nx-fldrow > .nx-numf input,.nx .nx-bigrow .nx-numf input{font-size:22px;width:82px}
}

/* =============================================================
   9. NOTIFICATIONS. Rows, not cards. Severity is a glyph, unread
   is a status dot, and the panel is the same panel as everywhere.
   ============================================================= */
.nx .nx-tmenu.nx-bell{position:relative;width:40px;padding:0;justify-content:center;color:var(--muted)}
.nx .nx-tmenu.nx-bell i[data-i]{font-size:20px}
.nx .nx-tmenu.nx-bell.nx-has{color:var(--navy)}
/* 3 Sep: the badge sits on the bell's top right shoulder, 4px over the icon, not over half of it */
.nx .nx-bell .nx-bdot{position:absolute;top:0;left:calc(50% + 6px);min-width:16px;height:16px;padding:0 4px;
border-radius:99px;background:var(--blue-fill);color:var(--on-blue);font-size:10.5px;font-weight:600;
line-height:16px;text-align:center;font-variant-numeric:tabular-nums}

.nx .nx-nrow{display:grid;grid-template-columns:7px minmax(0,1fr) auto;grid-template-rows:auto auto auto;column-gap:12px;row-gap:6px;
align-items:center;padding:12px 0;border-bottom:1px solid var(--hair);cursor:pointer;border-radius:0}

.nx .nx-nrow .nx-nmain{display:contents}

/* 3 Sep: the row is the action; mark as read is a hover icon on the right, where the time sits */
.nx .nx-nrow .nx-nright{display:flex;align-items:center;gap:8px;grid-column:3;grid-row:1/3;justify-self:end;align-self:start}
.nx .nx-nrow .nx-nmark{opacity:0;transition:opacity .12s ease}
.nx .nx-nrow:hover .nx-nmark,.nx .nx-nrow .nx-nmark:focus-visible{opacity:1}
.nx .nx-nrow.nx-un .nx-nmark{color:var(--blue)}
.nx .nx-nrow:hover{background:var(--soft)}
.nx .nx-nrow .nx-ngo{grid-column:2;grid-row:3;font-size:12.5px;color:var(--blue);white-space:nowrap}
.nx .nx-nrow:hover .nx-ngo{text-decoration:underline}
@media (hover:none),(max-width:760px){.nx .nx-nrow .nx-nmark{opacity:1}}
.nx .nx-nrow:focus-within{background:none;box-shadow:none}
.nx .nx-nrow .nx-ndot{grid-column:1;grid-row:1;width:7px;height:7px;border-radius:50%;background:transparent;margin-top:0}
.nx .nx-nrow.nx-un .nx-ndot{background:var(--blue)}
.nx .nx-nrow .nx-nright .nx-btn{grid-column:3;grid-row:2;justify-self:end;white-space:nowrap}
.nx .nx-nrow .nx-nt{grid-column:2;grid-row:1;display:flex;align-items:center;gap:8px;font-size:15px;color:var(--navy);letter-spacing:-.01em}
.nx .nx-nrow.nx-un .nx-nt{font-weight:600}
.nx .nx-nrow .nx-nsev{font-size:16px;flex:none}
.nx .nx-nrow .nx-nsev.nx-err{color:var(--red)}
.nx .nx-nrow .nx-nsev.nx-info{color:var(--blue)}
.nx .nx-nsev.nx-info{color:var(--blue)}
.nx .nx-nsev.nx-warn{color:var(--amber)}

.nx .nx-nrow .nx-nmeta .nx-mono{font-size:11.5px;color:var(--faint)}
.nx .nx-nrow .nx-nmeta .nx-sp{display:inline-flex;color:var(--line)}
.nx .nx-nrow .nx-nmeta .nx-sp i[data-i]{font-size:14px}
/* the audience name is cut on one line; the project and the id stay whole; the full name is the title */
.nx .nx-nrow .nx-nmeta{grid-column:2;grid-row:2;margin-top:5px;display:flex;align-items:center;gap:8px;flex-wrap:nowrap;font-size:12.5px;color:var(--muted);min-width:0}
.nx .nx-nrow .nx-nmeta .nx-na{color:var(--navy);flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nx .nx-nrow .nx-nmeta .nx-np,.nx .nx-nrow .nx-nmeta .nx-sp,.nx .nx-nrow .nx-nmeta .nx-mono{flex:none;white-space:nowrap}
.nx .nx-nrow .nx-nwhen{padding-top:3px;font-size:12.5px;color:var(--faint);white-space:nowrap;flex:none}
.nx .nx-nrow .nx-rowacts{flex:none;padding-top:1px}
@media (max-width:760px){
  .nx .nx-nrow{gap:9px}
  .nx .nx-nrow .nx-nwhen{order:9;flex:1 0 100%;padding-left:19px}
  .nx .nx-nrow .nx-rowacts{opacity:1}
}
@media (max-width:760px){
  /* phone: time then the mark icon, the audience on its own line and cut there */
  .nx .nx-nrow .nx-nwhen{order:0;flex:none;padding-left:0}
  .nx .nx-nrow .nx-nmeta{flex-wrap:wrap}
  .nx .nx-nrow .nx-nmeta .nx-np{white-space:normal}
  .nx .nx-nrow .nx-nmeta .nx-sp{display:none}
  .nx .nx-nrow .nx-nmeta .nx-na{flex:1 1 100%}
  .nx .nx-nrow .nx-nright{grid-row:1}
  .nx .nx-nrow .nx-nmeta,.nx .nx-nrow .nx-ngo{grid-column:2/4}
}

/* =============================================================
   10. DASHBOARD. One project row whatever the status, one line
   per audience. The rule under a project is its progress and its
   separator, so nothing else carries a border.
   ============================================================= */
.nx .nx-prow2{padding:48px 0 0}
.nx .nx-prow2 .nx-ph3{display:flex;align-items:baseline;gap:12px;cursor:pointer}
.nx .nx-prow2 .nx-ph3 .nx-onm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nx .nx-prow2 .nx-pst{margin-left:auto;display:inline-flex;align-items:center;gap:8px;
font-size:13px;color:var(--label);white-space:nowrap;flex:none}
.nx .nx-prow2 .nx-pst .nx-dot{width:7px;height:7px;border-radius:50%}
.nx .nx-prow2 .nx-facts{padding:10px 0 12px}
.nx .nx-prow2 .nx-facts .nx-feas{font-size:12.5px}
.nx .nx-prule{height:2px;background:var(--hair)}

.nx .nx-aline{display:flex;align-items:baseline;gap:12px;padding:11px 0;
border-bottom:1px solid var(--hair);cursor:pointer}
.nx .nx-aline:hover .nx-anm{color:var(--blue-ink)}
.nx .nx-aline .nx-flag{width:16px;flex:none}
.nx .nx-aline .nx-anm{font-size:14px;color:var(--navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nx .nx-aline .nx-oid{flex:none}
.nx .nx-aline .nx-ast{margin-left:auto;display:inline-flex;align-items:center;gap:8px;
font-size:13px;color:var(--muted);white-space:nowrap;flex:none;min-width:118px}
.nx .nx-aline .nx-ast .nx-dot{width:7px;height:7px;border-radius:50%}
.nx .nx-aline .nx-avol{width:132px;text-align:right;font-size:13px;color:var(--muted);
font-variant-numeric:tabular-nums;flex:none}
.nx .nx-aline .nx-apc{width:48px;text-align:right;font-size:14px;font-weight:600;color:var(--navy);
font-variant-numeric:tabular-nums;flex:none}
.nx .nx-aline .nx-ico{color:var(--faint);width:22px;height:22px}
.nx .nx-secbar.nx-plain{background:none;padding:0;height:42px;border-bottom:1px solid var(--hair)}
.nx .nx-secbar.nx-plain .nx-nm{font-size:13px}
.nx .nx-secbar.nx-plain .nx-cv{margin-left:auto}

/* the count is the door: same type as the rest of the facts line */
.nx .nx-facts .nx-expand{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
border-radius:var(--r);padding:2px 7px;margin:-2px -7px;transition:background .12s ease}
.nx .nx-facts .nx-expand:hover{background:var(--soft);color:var(--navy)}
.nx .nx-facts .nx-expand .nx-cv{font-size:14px;color:var(--faint);transition:transform .2s cubic-bezier(.2,.7,.3,1)}
.nx .nx-facts .nx-expand:not(.nx-on) .nx-cv{transform:rotate(-90deg)}
.nx .nx-alist{padding-top:2px}
.nx .nx-alist .nx-aline:last-child{border-bottom:0}

@media (max-width:760px){
  .nx .nx-prow2 .nx-facts{gap:6px 18px}
  .nx .nx-aline{flex-wrap:wrap;gap:8px 10px;padding:12px 0}
  .nx .nx-aline .nx-anm{flex:1}
  .nx .nx-aline .nx-ast{min-width:0;margin-left:0;order:9;flex:1 0 100%}
  .nx .nx-aline .nx-avol{width:auto;order:9}
  .nx .nx-aline .nx-apc{order:9;margin-left:auto}
  .nx .nx-aline .nx-ico{display:none}
}

/* the helpful sections start closed, so the list has the full measure */
.nx .nx-dash.nx-solo{grid-template-columns:minmax(0,1fr)}
.nx .nx-dash.nx-solo .nx-side{grid-column:1;position:static;margin-top:0}
.nx .nx-side .nx-label{cursor:pointer}
.nx .nx-side .nx-label .nx-cv{color:var(--faint);transition:transform .2s cubic-bezier(.2,.7,.3,1)}
.nx .nx-side .nx-label.nx-closed .nx-cv{transform:rotate(-90deg)}

/* the sub scope, quieter than the kinds and only present when it applies */
.nx .nx-subkinds{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding:12px 0 0}
.nx .nx-skind{display:inline-flex;align-items:baseline;gap:8px;font-size:13px;color:var(--muted);
cursor:pointer;padding:2px 0}
.nx .nx-skind:hover{color:var(--navy)}
.nx .nx-skind.nx-on{color:var(--navy);font-weight:500}
.nx .nx-skind .nx-n{font-family:var(--mono);font-size:11.5px;color:var(--faint)}
.nx .nx-skind .nx-amt2{font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.nx .nx-skind.nx-on .nx-n{color:var(--blue)}
@media (max-width:760px){.nx .nx-subkinds{gap:10px 18px}}

/* =============================================================
   11. PROJECT FILTERS. Scope is a kind, a filter is a chip that
   says what it is, and the menu is one surface at a time.
   ============================================================= */
.nx .nx-addfilt{flex:none}
.nx .nx-fcount{margin-left:auto;font-size:12.5px;color:var(--faint);white-space:nowrap}
.nx .nx-sephead.nx-back{display:flex;align-items:center;gap:8px;cursor:pointer;text-transform:none;
letter-spacing:0;font-size:13px;color:var(--navy);font-weight:600}
.nx .nx-sephead.nx-back:hover{color:var(--blue)}
.nx .nx-sephead.nx-back i[data-i]{font-size:16px;color:var(--faint);margin-left:-4px}
.nx .nx-mi .nx-tick{margin-right:2px}
@media (max-width:760px){
  .nx .nx-fcount{flex:1 0 100%;margin:0}
}

/* =============================================================
   12. NEW PROJECT. Steps in the tab row, a required field says so
   quietly, and nothing turns red until you try to continue.
   ============================================================= */
.nx .nx-stabs .nx-t .nx-stn{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;
background:var(--soft);color:var(--muted);font-size:11px;font-weight:600;margin-right:8px}
.nx .nx-stabs .nx-t.nx-on .nx-stn{background:var(--blue-tint);color:var(--blue-ink)}
.nx .nx-stabs .nx-t.nx-done{color:var(--muted);cursor:pointer}
.nx .nx-stabs .nx-t.nx-done i[data-i]{font-size:15px;color:var(--green);margin-right:7px}
.nx .nx-stabs .nx-t.nx-done:hover{color:var(--navy)}
.nx .nx-row .nx-reqd{font-style:normal;font-size:11px;color:var(--faint);margin-left:10px;text-transform:uppercase;letter-spacing:.1em}
.nx .nx-selbox .nx-flag.nx-sm{width:15px;margin-right:2px}

/* 24.11 object-level picker: the one big decision on a step. Same selector
   grammar (borderless, soft hover, faint chevron) at object size. */

/* the wait between commits runs seconds, so the whole step signals it:
   the content dims and a spinner chip floats mid panel, on top of the
   button-level loader in the footer */
.nx .nx-npbusy > .nx-ss{opacity:.35;filter:blur(2px);pointer-events:none;transition:opacity .15s ease,filter .15s ease}
.nx .nx-npbusy{position:relative}
.nx .nx-npbusy::before{content:"";position:absolute;inset:0;background:rgba(var(--ink-rgb),.06);z-index:5;pointer-events:none}


.nx .nx-busylot{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:0} /* absolute: the form behind must not move */
.nx .nx-busylot.nx-bare{background:none;border:0}
.nx .nx-feas.nx-busy{color:var(--muted)}
/* screening editor */
.nx .nx-scrl{display:grid;grid-template-columns:28px minmax(0,1fr) 90px;align-items:center;column-gap:12px;min-height:44px;border-bottom:1px solid var(--hair);font-size:13.5px;color:var(--navy)}
.nx .nx-scrl.nx-head{min-height:30px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.nx .nx-scrl .nx-r{text-align:right}
.nx .nx-scrl .nx-avail{color:var(--muted);font-variant-numeric:tabular-nums}
.nx .nx-scrl.nx-dim .nx-al,.nx .nx-scrl.nx-dim .nx-avail{color:var(--faint)}
.nx .nx-scrl .nx-tick{width:24px;height:24px;cursor:pointer}
.nx .nx-scrl .nx-numf.nx-qin{height:30px;margin:2px 0}
.nx .nx-scrl .nx-numf.nx-qin input{width:56px}

.nx .nx-scrl.nx-wq{grid-template-columns:28px minmax(0,1fr) 90px 96px 84px}
.nx .nx-selbox.nx-empty{color:var(--muted)}
/* 5 Sep, lists: the row carries the state. Off rows read muted, on rows navy. */
.nx .nx-pickrow:has(> .nx-tick:not(.nx-on)) .nx-nm,.nx .nx-pickrow:has(> .nx-tick:not(.nx-on)) > div,
.nx .nx-wopt:has(> .nx-tick:not(.nx-on)) .nx-wt,
.nx .nx-row:has(> .nx-ctl > .nx-toggle:not(.nx-on)) .nx-lab .nx-k,.nx .nx-row:has(> .nx-ctl > .nx-tick:not(.nx-on)) .nx-lab .nx-k,
.nx .nx-arow3:has(.nx-toggle:not(.nx-on)) .nx-lab2,
.nx .nx-mi:has(> .nx-tick:not(.nx-on)){color:var(--muted)}
.nx .nx-toggle{vertical-align:middle}
.nx .nx-atable td .nx-toggle{margin-left:auto}
.nx .nx-scrl .nx-al{display:inline-flex;align-items:center;gap:8px}
.nx .nx-scrl .nx-numf.nx-rg{height:44px;border:0;border-bottom:1px solid var(--line);border-radius:0;margin-bottom:-1px;background:none}
.nx .nx-scrl .nx-numf.nx-rg:focus-within{border-bottom-color:var(--blue)}
.nx .nx-scrl .nx-numf.nx-rg input{width:auto;padding-left:8px}
.nx .nx-scrl .nx-numf.nx-qin{height:44px;border:0;border-bottom:1px solid var(--line);border-radius:0;margin:0 0 -1px;background:none}
.nx .nx-scrl .nx-numf.nx-qin:focus-within{border-bottom-color:var(--blue)}
.nx .nx-scrl .nx-to{font-size:12.5px;color:var(--muted);margin:0 10px 0 14px}
.nx .nx-scrl.nx-nt{grid-template-columns:0 minmax(0,1fr) 90px}
.nx .nx-scrl.nx-nt.nx-wq{grid-template-columns:0 minmax(0,1fr) 90px 96px 84px}
.nx .nx-scrtot{display:flex;justify-content:flex-end;padding:10px 0 2px;font-size:12.5px;font-weight:600}
.nx .nx-scrtot.nx-ok{color:var(--green-ink)}.nx .nx-scrtot.nx-warn{color:var(--amber)}.nx .nx-scrtot.nx-bad{color:var(--red)}
.nx #sFoot .nx-warnt{color:var(--amber)!important}
.nx .nx-pickrow.nx-libq{cursor:pointer}.nx .nx-pickrow.nx-libq:hover .nx-nm{color:var(--blue)}
.nx .nx-ownline{margin-top:16px;font-size:13.5px;color:var(--navy)}
.nx .nx-arow3.nx-fin{padding-bottom:0}
.nx .nx-arow3.nx-fin .nx-field{margin-bottom:-1px}
.nx .nx-arow3.nx-fin i[data-i]{font-size:15px;color:var(--faint);flex:none}
.nx .nx-prev2{display:grid;grid-template-columns:1fr 1fr;column-gap:0;margin-top:12px}
.nx .nx-prev2 .nx-pv{padding:6px 0 6px 0}
.nx .nx-prev2 .nx-pv.nx-de{padding-left:24px;border-left:1px solid var(--hair)}
.nx .nx-prev2 .nx-pv:first-child{padding-right:24px}
.nx .nx-prev2 .nx-pv .nx-arow3{padding-top:4px}
.nx .nx-prev2 .nx-pv .nx-arow3 .nx-field.nx-pvq{font-size:15px;font-weight:600;margin-bottom:-1px}
.nx .nx-prev2 .nx-pvl{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:10px}
.nx .nx-prev2 .nx-pvq{font-size:15px;font-weight:600;color:var(--navy);margin-bottom:10px}
.nx .nx-prev2 input.nx-pvq{width:100%}
.nx .nx-prev2 .nx-pva{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--navy);padding:5px 0}
.nx .nx-prev2 .nx-pva i[data-i]{font-size:15px;color:var(--faint)}
@media (max-width:600px){.nx .nx-prev2{grid-template-columns:1fr;row-gap:12px}.nx .nx-scrl.nx-wq{grid-template-columns:28px minmax(0,1fr) 56px 70px 64px;column-gap:6px}}
.nx .nx-feas.nx-busy .nx-lot.nx-mini{width:22px;height:22px;display:inline-block;vertical-align:middle;margin:-4px 2px -4px -4px}
.nx .nx-feas.nx-busy .nx-lot.nx-mini svg{display:block}
.nx .nx-busylot .nx-lot{width:180px;height:180px}
.nx .nx-busylot .nx-lot svg{display:block}
.nx .nx-busylot .nx-bt{font-size:15px;font-weight:600;color:var(--navy)}
.nx .nx-busylot .nx-bs{font-size:13px;color:var(--muted)}
.nx .nx-appveil{position:fixed;inset:0;z-index:95;display:none;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;background:rgba(var(--paper-rgb),.78);backdrop-filter:blur(3px)}
.nx .nx-appveil.nx-on{display:flex}
.nx .nx-appveil .nx-lot{width:220px;height:220px}
.nx .nx-appveil .nx-bt{font-size:17px;font-weight:600;color:var(--navy)}
.nx .nx-appveil .nx-bs{font-size:13.5px;color:var(--muted)}
.nx .nx-pbar{height:3px;background:var(--soft);position:relative;overflow:hidden;margin:0 0 6px}
.nx .nx-pbar span{position:absolute;left:0;top:0;bottom:0;width:38%;background:var(--blue);animation:nx-pb 1.4s cubic-bezier(.4,0,.2,1) infinite}
@keyframes nx-pb{0%{left:-40%}100%{left:100%}}
.nx .nx-skel{height:14px;border-radius:99px;background:var(--soft);animation:nx-sk 1.4s ease-in-out infinite}
@keyframes nx-sk{0%,100%{opacity:1}50%{opacity:.45}}
.nx .nx-skrow{display:flex;justify-content:space-between;align-items:center;min-height:44px;border-bottom:1px solid var(--hair)}

/* template preview rows: neutral chip for the variable, answers as
   blue-tint value pills, the quota share faint inside the pill */
.nx .nx-tgrow{display:flex;align-items:flex-start;gap:12px;padding:9px 0;border-bottom:1px solid var(--hair)}
.nx .nx-tgrows .nx-tgrow:last-child{border-bottom:0;padding-bottom:2px}
.nx .nx-tgk{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--muted);
background:var(--soft);border-radius:5px;padding:4px 8px;flex:none;margin-top:1px;white-space:nowrap}
.nx .nx-tgvals{display:flex;flex-wrap:wrap;gap:6px;min-width:0}

/* country as a select in the Choose-a-template style: title-size value,
   faint chevron that inks on row hover, no line (it is a selector) */
/* flag at figure height, its bottom flush with the name and chevron */
.nx .nx-cselect{display:inline-flex;align-items:flex-end;gap:11px;cursor:pointer}
.nx .nx-cselect .nx-cnw{display:inline-flex;align-items:center;gap:7px;height:19px}
.nx .nx-cselect .nx-cnw .nx-tplcv{transform:translateY(2px)}
.nx .nx-cselect .nx-cn{font-size:13.5px;font-weight:500;color:var(--muted);transition:color .12s ease}
.nx .nx-cselect:hover .nx-cn{color:var(--navy)}
.nx .nx-npbig > span:not(.nx-sepv){display:flex;flex-direction:column;justify-content:flex-start}
.nx .nx-npbig .nx-cselect{margin-top:auto;padding-bottom:7px}

/* a name field over no rule keeps its hairline at rest (agreed for the
   new project flow); hover and focus behave as everywhere else */
.nx .nx-field.nx-ln:not(:hover):not(:focus){border-bottom-color:var(--line)}
.nx .nx-field.nx-ln.nx-big{max-width:none;font-size:16px} /* 29 Aug: 16px, so phones do not zoom */
.nx .nx-mi .nx-flag.nx-sm{width:16px;margin-right:2px}

.nx .nx-aiband{display:flex;align-items:center;gap:10px;padding:11px 14px;margin:0 0 20px;
border-radius:var(--r);background:var(--blue-tint);font-size:13px;color:var(--blue-ink)}
.nx .nx-aiband i[data-i]{font-size:16px;flex:none}
.nx .nx-field.nx-aiv{border-bottom-style:dashed;border-bottom-color:var(--blue)}
.nx .nx-aitag{display:grid;place-items:center;width:24px;height:24px;border-radius:var(--r);
color:var(--blue);cursor:pointer;flex:none}
.nx .nx-aitag:hover{background:var(--blue-tint)}
.nx .nx-aitag i[data-i]{font-size:15px}
.nx .nx-wc.nx-ok.nx-ai{color:var(--blue)}
.nx .nx-mi.nx-off{opacity:.45;pointer-events:none}
.nx .nx-mlay{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:0 0 16px}
.nx .nx-wc{display:grid;place-items:center;width:26px;height:26px;border-radius:var(--r)}
.nx .nx-wc.nx-ok{color:var(--green)}
.nx .nx-wc.nx-ok i[data-i]{font-size:16px}
.nx .nx-wc.nx-ok,.nx .nx-wc.nx-gap{cursor:pointer}
.nx .nx-wc.nx-gap{width:9px;height:9px;border-radius:50%;background:var(--amber-tint);
box-shadow:inset 0 0 0 1px var(--amber)}
.nx .nx-wc.nx-gap:hover{background:var(--amber)}
.nx .nx-wc.nx-dash{color:var(--line);font-size:15px}



/* the toast can carry one action */
.nx .nx-toast .nx-tundo{background:none;border:0;padding:0;margin-left:16px;font-family:inherit;
font-size:13px;font-weight:500;color:var(--on-ink-link);cursor:pointer}
.nx .nx-toast .nx-tundo:hover{color:var(--on-blue);text-decoration:underline}
/* a picked market column, so the clipboard has a target */
.nx .nx-mgrid.nx-mhead .nx-mc.nx-sel{background:var(--blue-tint);color:var(--blue-ink)}
.nx .nx-mgrid.nx-mhead .nx-mc.nx-sel small{color:var(--blue)}
.nx .nx-mgrid .nx-mc.nx-selc{background:var(--info-tint)}
.nx .nx-kbd2{display:inline-block;font-family:var(--mono);font-size:11px;color:var(--muted);
background:var(--soft);border-radius:4px;padding:1px 6px;margin-left:2px}

/* =============================================================
   13. MARKETS AND LANGUAGES. A tick matrix for who asks what, and
   one market at a time for the wording. Empty stays empty.
   ============================================================= */
.nx .nx-mgrid{display:grid;align-items:center;column-gap:0}
.nx .nx-mgrid.nx-mhead{position:sticky;top:0;background:var(--paper);z-index:3;padding:6px 0 8px;
border-bottom:1px solid var(--line)}
.nx .nx-mgrid.nx-mrow{border-bottom:1px solid var(--hair);border-radius:4px}
.nx .nx-mgrid.nx-mrow:hover{box-shadow:inset 0 1px 0 var(--line-3),inset 0 -1px 0 var(--line-3)}
.nx .nx-mgrid.nx-mrow:focus-within{background:none;box-shadow:none}
.nx .nx-mgrid .nx-ml{font-size:14px;color:var(--navy);padding:11px 14px 11px 0;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nx .nx-mgrid .nx-mc{display:grid;place-items:center}
.nx .nx-mgrid.nx-mhead .nx-mc{cursor:pointer;font-family:var(--mono);font-size:12px;color:var(--navy);
padding:4px 0;border-radius:var(--r);line-height:1.5}
.nx .nx-mgrid.nx-mhead .nx-mc:hover{background:var(--soft)}
.nx .nx-mgrid.nx-mhead .nx-mc small{display:block;font-family:var(--sans);font-size:11px;color:var(--faint)}



.nx .nx-mgrid .nx-tick{cursor:pointer}

.nx .nx-mkchip{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;
border-radius:var(--r);background:var(--soft);font-family:var(--mono);font-size:12.5px;
color:var(--muted);cursor:pointer;transition:background .12s ease}
.nx .nx-mkchip:hover{background:var(--hover-soft);color:var(--navy)}
.nx .nx-mkchip.nx-on{background:var(--blue-tint);color:var(--blue-ink)}
/* a second language in the same market sits tight against the first */
.nx .nx-mkchip.nx-sib{margin-left:-4px}
.nx .nx-mkbar{display:flex;align-items:center;flex-wrap:wrap;padding:0 0 18px;gap:10px}
.nx .nx-mkchip i[data-i]{font-size:15px;color:var(--green)}
.nx .nx-mkchip .nx-mkm{min-width:17px;height:17px;padding:0 5px;border-radius:99px;background:var(--amber-tint);
color:var(--amber-ink);font-family:var(--sans);font-size:10.5px;font-weight:600;line-height:17px;text-align:center}

.nx .nx-pair2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 26px;
align-items:center;padding:7px 0;border-bottom:1px solid var(--hair)}
.nx .nx-pair2:focus-within,.nx .nx-pair2:focus-within:hover{background:none;box-shadow:none}
.nx .nx-pair2 .nx-src2{display:flex;align-items:baseline;gap:10px;font-size:14px;color:var(--muted)}
.nx .nx-pair2 .nx-src2 .nx-rk{width:18px;flex:none}
.nx .nx-pair2 .nx-withx{display:flex;align-items:center;gap:8px}
/* the row's own hairline is the separator, so the field does not draw a
   second one 8px above it. It appears when you reach for it. */

.nx .nx-pair2 .nx-field.nx-aiv,.nx .nx-pair2:hover .nx-field.nx-aiv{border-bottom-color:var(--blue);border-bottom-style:dashed}
.nx .nx-pair2 .nx-withx .nx-field{flex:1}
.nx .nx-pair2 .nx-withx .nx-ico{opacity:0}
.nx .nx-pair2:hover .nx-withx .nx-ico{opacity:1}

/* an answer that is not asked here keeps its place in the list */
.nx .nx-pair2.nx-offrow .nx-src2{color:var(--faint)}
.nx .nx-pair2.nx-offrow .nx-withx .nx-ico{opacity:1;color:var(--faint)}
.nx .nx-pair2.nx-offrow:hover .nx-withx .nx-ico{color:var(--blue)}
.nx .nx-offtxt{flex:1;font-size:13px;color:var(--faint)}

.nx .nx-pastebox{padding:14px 16px 12px;margin:0 0 14px;background:var(--wash);border-radius:var(--r)}
.nx .nx-pastebox .nx-ta{margin-top:8px;background:var(--paper);border-bottom-color:var(--line)}
.nx .nx-pbf{display:flex;align-items:center;gap:10px;padding-top:10px;flex-wrap:wrap}

/* 21 Sep: the matrix inside the question slider. It scrolls sideways, the answer column stays put. */
.nx .nx-trmatrix .nx-cscroll{margin:0 -26px;padding:0 26px}
.nx .nx-trmatrix .nx-cscroll .nx-mgrid{min-width:max-content}
.nx .nx-trmatrix .nx-mgrid .nx-ml{position:sticky;left:0;background:var(--paper);z-index:2;min-width:170px;max-width:170px}
.nx .nx-trmatrix .nx-mgrid.nx-mrow:hover{background:none;box-shadow:none}
.nx .nx-trmatrix .nx-mlay{margin-bottom:10px}
.nx .nx-trmatrix .nx-secfoot{margin-top:16px}
.nx .nx-mgrid.nx-asklist .nx-ml{white-space:normal;padding:12px 14px 12px 0;position:static;min-width:0;max-width:none}
.nx .nx-mgrid.nx-asklist{border-radius:0}
@media (max-width:760px){
  .nx .nx-cscroll .nx-mgrid{min-width:max-content}
  .nx .nx-mgrid .nx-ml{position:sticky;left:0;background:var(--paper);z-index:2;min-width:150px;max-width:150px}
  .nx .nx-mgrid.nx-mrow:hover{background:none;box-shadow:none}
  .nx .nx-pair2{grid-template-columns:minmax(0,1fr);gap:4px;padding:12px 0 7px}
}

/* -------------------------------------------------------------
   14. One line per row, and the field owns the part it sits on.

   A field in a row that already has a rule does not draw its own
   line 8px higher. Its underline is pushed down to sit exactly on
   the row's rule, so hover and focus colour that segment only,
   the width of the field, and the rest of the rule stays hairline.
   A field with no rule under it keeps the section 27 behaviour.
   ------------------------------------------------------------- */
.nx .nx-pair2 .nx-withx,.nx .nx-pair2 .nx-withx .nx-field{align-self:stretch}
.nx .nx-pair2 .nx-field{border-bottom-color:transparent;padding:6px 0 8px;border-bottom:1px solid transparent;margin-bottom:-8px}
.nx .nx-pair2:hover .nx-field{border-bottom-color:var(--focus)}
.nx .nx-pair2 .nx-field:not(:disabled):hover{border-bottom-color:var(--line-3)}
.nx .nx-pair2 .nx-field:focus{border-bottom-color:var(--blue)}

/* the age table: the number's line lands on the cell rule */
.nx .nx-agrid td{padding:9px 12px 9px 0;font-size:14px;color:var(--navy);position:relative;vertical-align:bottom} /* every cell sits on the number's line */
.nx .nx-agrid td:not(.nx-nin){padding-bottom:4px} /* the number has 9px under its glyphs before its line; other cells match its centre */

.nx .nx-agrid td .nx-num3{field-sizing:content;width:auto;min-width:48px;height:auto;border:0;
border-bottom:1px solid transparent;border-radius:0;
padding:0 0 9px;margin-bottom:-1px;text-align:left;background:none;display:inline-block;vertical-align:bottom}
/* quota cells hold xx.yy, so they get more room; value stays right-aligned on the wider line */
.nx .nx-agrid td.nx-r .nx-num3{text-align:right;min-width:64px}
.nx .nx-agrid td.nx-nin{padding-bottom:0;vertical-align:bottom;cursor:text}
/* hover and focus exactly as the wording rows in Markets and languages:
   silent at rest, row hover lights each field's segment, the field's own
   hover darkens it, focus turns it blue */
.nx .nx-agrid tr:hover td .nx-num3{border-bottom-color:var(--focus)}
.nx .nx-agrid td .nx-num3:not(:disabled):hover,.nx .nx-agrid td.nx-nin:hover .nx-num3:not(:focus){border-bottom-color:var(--line-3)}
.nx .nx-agrid td .nx-num3:focus{border-bottom-color:var(--blue)}
/* the total is a row of the table, so its figures sit exactly under their columns */
.nx .nx-agrid tfoot td{border-bottom:0;padding-top:12px}
.nx .nx-agrid tfoot .nx-qtl{font-size:13px;color:var(--muted);white-space:nowrap}

/* the panel title has no rule of its own, so it draws one */
.nx .nx-shd .nx-nameinput:not(:disabled):hover{border-bottom-color:var(--focus)}
.nx .nx-shd .nx-nameinput:focus{border-bottom-color:var(--blue)}

.nx .nx-sel i[data-i],.nx .nx-statusctl i[data-i],.nx .nx-tmenu i[data-i],.nx .nx-selbox i[data-i]{
transition:color .12s ease,transform .12s ease,background .12s ease}

/* =============================================================
   15. SCHEDULING. Three switchable blocks in the audience slider.
   A block is a titled rule with its toggle on the right; its
   content indents under it, no card and no nested box. The
   interval tracker is derived, not configured: it appears only
   after Build schedule and shows how the completes get sliced.
   ============================================================= */
.nx .nx-schsec{margin-bottom:30px}
.nx .nx-schsec .nx-lb{display:flex;align-items:center;gap:12px;height:40px;border-bottom:1px solid var(--hair);
font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.nx .nx-schsec .nx-lb .nx-st{margin-left:auto;display:flex;align-items:center;gap:14px;
font-size:12px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted)}
.nx .nx-schsec .nx-schb{padding-top:14px}
.nx .nx-schsec.nx-off .nx-schb{display:none}
.nx .nx-schsec .nx-hp2{font-size:12.5px;color:var(--muted);margin:0 0 14px}



/* the tracker is a readout: rows of when, how many, what state */
.nx .nx-btn.nx-danger{background:var(--paper);border-color:var(--red-line);color:var(--red)}
.nx .nx-btn.nx-danger:hover{border-color:var(--red)}

/* =============================================================
   16. WHEN. One block, three decisions, and the plan they make.
   Start, pace and stop are answers to one question, so they read
   as a sentence rather than three switchable features. The fill
   plan underneath is derived, never configured.
   ============================================================= */
.nx .nx-whenq{padding:16px 0;border-bottom:1px solid var(--hair)}
.nx .nx-whenq:last-of-type{border-bottom:0}
.nx .nx-whenq .nx-qk{font-size:13.5px;font-weight:600;color:var(--navy);margin-bottom:10px}
.nx .nx-whenq .nx-qopts{display:flex;flex-direction:column;gap:2px}
.nx .nx-wopt{display:flex;align-items:flex-start;gap:11px;padding:7px 0;cursor:pointer}
.nx .nx-wopt .nx-tick,.nx .nx-row .nx-tick,.nx .nx-atable .nx-tick{align-items:center;height:21px;margin-top:0}
.nx .nx-atable td .nx-tick,.nx .nx-row .nx-ctl .nx-tick{height:19px}

.nx .nx-atable td .nx-tick{vertical-align:middle;display:inline-flex}
.nx .nx-stabs:empty{display:none} /* a slider with no tabs shows no empty tab row */
.nx .nx-wopt .nx-wt{font-size:13.5px;color:var(--text);line-height:21px}
.nx .nx-wopt.nx-on .nx-wt{color:var(--navy);font-weight:500}
.nx .nx-wopt.nx-inl .nx-wt{display:flex;align-items:center;flex-wrap:wrap;gap:7px;line-height:28px}
.nx .nx-wopt.nx-inl .nx-tick{height:28px}
.nx .nx-wopt .nx-wsub.nx-inl{padding:0;margin:0;display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:7px}
.nx .nx-wopt .nx-wsub.nx-inl.nx-ro{display:inline;color:var(--muted);font-weight:400} /* 29 Aug: the sentence reads in every state */
.nx .nx-wopt .nx-wsub.nx-inl.nx-ro b{font-weight:500;color:var(--text)}
.nx .nx-wopt .nx-wsub{padding-left:29px;margin-top:9px;display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.nx .nx-wopt .nx-wsub .nx-numf{margin-bottom:0}
/* a setting that is one sentence stays one sentence: the values sit in
   the line, so no column labels and no dividers between them */
.nx .nx-phr{display:inline-flex;align-items:center;flex-wrap:wrap;gap:7px;font-size:13px;color:var(--muted)}
.nx .nx-phr .nx-numf{height:auto;padding:0 0 3px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none}
.nx .nx-phr .nx-numf input{width:44px;font-size:14px;font-weight:600;color:var(--navy);text-align:center;padding:0}
.nx .nx-phr .nx-numf:not(:has(input:disabled,textarea:disabled)):hover{border-bottom-color:var(--line-3)}
.nx .nx-phr .nx-numf:focus-within{border-bottom-color:var(--blue)}
.nx .nx-phr .nx-selbox{height:auto;padding:0 0 3px;margin:0;color:var(--navy);font-size:13px}
.nx .nx-phr .nx-selbox:hover{color:var(--blue-ink)}
.nx .nx-lb .nx-rt .nx-selbox.nx-sm2,.nx .nx-lb .nx-rt .nx-phr.nx-sm2{font-size:12.5px;letter-spacing:0;text-transform:none;font-weight:400;color:var(--text)}
.nx .nx-lb .nx-rt .nx-phr.nx-sm2 .nx-selbox{font-size:12.5px;padding:0}
/* the plan: a readout of what the choices produce */
.nx .nx-planhd{display:flex;align-items:baseline;gap:10px;margin:2px 0 12px}
.nx .nx-planhd .nx-pt{font-size:13.5px;font-weight:600;color:var(--navy)}
.nx .nx-planhd .nx-ps{font-size:12.5px;color:var(--muted)}
.nx .nx-plan{display:flex;flex-direction:column;gap:0}
.nx .nx-prow{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--hair);font-size:13px}
.nx .nx-prow:last-child{border-bottom:0}
.nx .nx-prow .nx-pw{color:var(--muted);width:120px;flex:none}

.nx .nx-prow .nx-pst{margin-left:auto;color:var(--muted);white-space:nowrap}
.nx .nx-prow .nx-pst i[data-i]{font-size:14px;vertical-align:-2px;margin-right:6px;color:var(--faint)}
.nx .nx-prow.nx-now .nx-pst{color:var(--blue-ink)} .nx .nx-prow.nx-now .nx-pst i[data-i]{color:var(--blue)}
.nx .nx-prow.nx-done .nx-pst{color:var(--navy)}
/* our own date and time picker, so the clock is ours and not the browser's */
/* a date opens a picker, so it is a selector: no underline, and the
   calendar icon carries the affordance (rule R1) */
.nx .nx-dtsel{display:inline-flex;align-items:baseline;gap:8px;cursor:pointer;padding-bottom:5px;
border-radius:var(--r);transition:background .12s ease,color .12s ease}
.nx .nx-dtsel:hover{background:var(--dt-hover)}
.nx .nx-dtsel:hover .nx-dv2,.nx .nx-dtsel.nx-open .nx-dv2{color:var(--navy)}
.nx .nx-dtsel.nx-open i[data-i]{color:var(--blue)}
.nx .nx-dtsel .nx-dv2{font-size:14px;font-weight:500;color:var(--navy)}
.nx .nx-dtsel .nx-dv2.nx-ph{color:var(--faint);font-weight:400}
.nx .nx-dtsel i[data-i]{color:var(--faint);font-size:15px;align-self:center}
.nx .nx-dtpick{display:flex;gap:0}
.nx .nx-dtcal{padding:10px 12px 12px;flex:1;min-width:0}
.nx .nx-dtcal .nx-cmh{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.nx .nx-dtcal .nx-cmh .nx-cm{font-size:13px;font-weight:600;color:var(--navy);flex:1;text-align:center}
.nx .nx-dtcal .nx-cmh .nx-ico{width:26px;height:26px}
.nx .nx-dtgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px}
.nx .nx-dtgrid span{font-size:12px;text-align:center;padding:6px 0;border-radius:5px;cursor:pointer;color:var(--text)}
.nx .nx-dtgrid span.nx-wd{font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--faint);cursor:default;text-transform:uppercase}
.nx .nx-dtgrid span.nx-out{color:var(--faint)}
.nx .nx-dtgrid span.nx-today{font-weight:600;color:var(--blue-ink)}
.nx .nx-dtgrid span.nx-sel{background:var(--blue-fill);color:var(--on-blue);font-weight:600}
.nx .nx-dtgrid span:not(.nx-wd):not(.nx-sel):hover{background:var(--soft)}
.nx .nx-dttime{width:96px;flex:none;border-left:1px solid var(--hair);max-height:236px;overflow:auto;padding:8px 6px}
.nx .nx-dttime .nx-th{font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--faint);text-transform:uppercase;
padding:0 6px 6px;position:sticky;top:0;background:var(--paper)}
.nx .nx-dttime span{display:block;font-size:12.5px;padding:6px 8px;border-radius:5px;cursor:pointer;
color:var(--text);font-variant-numeric:tabular-nums}
.nx .nx-dttime span:hover{background:var(--soft)}
.nx .nx-dttime span.nx-sel{background:var(--blue-fill);color:var(--on-blue);font-weight:600}

/* =============================================================
   17. ELIMINATIONS and RECONTACTS. Two separate features that
   happen to share one part: a source of people. So the source
   list is one component used by both, and each tab keeps its own
   question at the top. Sources are rows, never cards, and the
   picker takes over the slider body rather than stacking a modal
   on top of an open panel.
   ============================================================= */
.nx .nx-srcrow{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--hair)}
.nx .nx-srcrow:last-of-type{border-bottom:0}
.nx .nx-srcrow .nx-si{color:var(--faint);flex:none}
.nx .nx-srcrow .nx-sn{font-size:13.5px;color:var(--navy);min-width:0}
.nx .nx-srcrow .nx-sd{font-size:12.5px;color:var(--muted);margin-top:3px}
.nx .nx-srcrow .nx-sc{margin-left:auto;font-size:13px;color:var(--muted);white-space:nowrap}
.nx .nx-srcrow .nx-sc b{color:var(--navy);font-variant-numeric:tabular-nums}
.nx .nx-srcrow .nx-ico{flex:none}
.nx .nx-empty.nx-filtered{font-size:13px;color:var(--muted);padding:16px 0 18px}
/* the picker, taking over the body */
.nx .nx-pickhd{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.nx .nx-pickhd .nx-bk{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--blue);cursor:pointer}
.nx .nx-pkproj{margin-bottom:22px}
.nx .nx-pkproj .nx-pj{font-size:13px;font-weight:600;color:var(--navy);padding:0 0 8px;border-bottom:1px solid var(--hair)}
.nx .nx-pkrow{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--hair);cursor:pointer}
.nx .nx-pkrow:last-child{border-bottom:0}
.nx .nx-pkrow .nx-pid{font-family:var(--mono);font-size:11.5px;color:var(--faint);flex:none;width:64px}
.nx .nx-pkrow .nx-pnm{font-size:13.5px;color:var(--text)}
.nx .nx-pkrow.nx-on .nx-pnm{color:var(--navy);font-weight:500}
.nx .nx-pkrow .nx-pc2{margin-left:auto;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.nx .nx-pkrow.nx-used{opacity:.45;pointer-events:none}

/* =============================================================
   18. THE DAY STRIP. Four cards above the project list, each one
   a filter rather than a statistic: what needs me, what lands
   soon, what came in today, and what is left to spend. When
   nothing needs attention the strip says so in one line instead
   of showing a row of zeros.
   ============================================================= */
.nx .nx-daystrip{display:flex;gap:0;margin:0 0 26px;padding-top:20px;border-top:1px solid var(--hair);
border-bottom:1px solid var(--hair)}
.nx .nx-dcard{flex:1;min-width:0;padding:2px 20px 4px;margin-bottom:18px;cursor:pointer;
border-left:1px solid var(--hair)}
.nx .nx-dcard:first-child{padding-left:0;border-left:0}
.nx .nx-dcard .nx-dk{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
color:var(--faint);display:flex;align-items:center;gap:6px}
.nx .nx-dcard .nx-dk i[data-i]{font-size:14px}
.nx .nx-dcard .nx-dn{font-size:26px;font-weight:600;letter-spacing:-.02em;color:var(--navy);
margin-top:9px;line-height:1.1;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:8px}
.nx .nx-dcard .nx-dn em{font-style:normal;font-size:13px;font-weight:400;color:var(--muted)}
.nx .nx-dcard .nx-ds{font-size:12.5px;color:var(--muted);margin-top:6px}
.nx .nx-dcard:hover .nx-dn{color:var(--blue-ink)}
.nx .nx-dcard.nx-on .nx-dn{color:var(--blue-ink)}
.nx .nx-dcard.nx-on .nx-dk{color:var(--blue)}
.nx .nx-dcard.nx-att .nx-dn,.nx .nx-dcard.nx-att:hover .nx-dn{color:var(--amber)}
.nx .nx-dcard.nx-att .nx-dk{color:var(--amber)}
.nx .nx-dcard.nx-low .nx-dn{color:var(--red)}
.nx .nx-daycalm{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);
padding:2px 0 18px;margin-bottom:22px;border-bottom:1px solid var(--hair)}
.nx .nx-daycalm b{color:var(--navy)}
.nx .nx-daycalm .nx-lnk{margin-left:auto}
@media (max-width:900px){.nx .nx-daystrip{flex-wrap:wrap}
  .nx .nx-dcard{flex:1 1 45%;border-left:0;padding:2px 0 16px}
  .nx .nx-dcard:nth-child(even){padding-left:20px;border-left:1px solid var(--hair)}}

/* =============================================================
   19. ACCOUNT. Five tabs of settings for the person and the
   company. Same grammar as everywhere: titled rules, hairline
   rows, no cards, no bordered inputs, numbers keep their lines.
   ============================================================= */
/* the account lives in the right slider, like every other editing
   surface in Next, so it is one column and the rows are close together */
.nx .nx-acct{padding:0 0 10px}
.nx .nx-acct .nx-acols{display:block}
.nx .nx-acct .nx-acols > div{max-width:none}







.nx .nx-acols{display:flex;gap:46px;flex-wrap:wrap}
.nx .nx-acols > div{flex:1;min-width:300px;max-width:470px}
/* label left, value in a column beside it: a value pinned to the far edge
   of a wide screen stops belonging to its label */
/* the row carries no bottom padding of its own: the field owns it, so the
   field's own bottom edge IS the row's rule and the two lines coincide */
/* a field inside a row that already has a rule pushes its underline down
   onto that rule, the same as everywhere else in the platform */
/* one heading style for the whole account page, inside the columns too */
.nx .nx-acct .nx-lb{display:flex;align-items:center;gap:12px;height:40px;border-bottom:1px solid var(--hair);
font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.nx .nx-acct .nx-lb .nx-rt{margin-left:auto;display:flex;align-items:center;gap:16px;
font-size:12px;font-weight:400;letter-spacing:0;text-transform:none}
.nx .nx-acct .nx-ss{margin-bottom:34px}
/* password is one action that opens its own fields, not a form sitting
   open forever asking to be filled in */
.nx .nx-pwopen{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-end;margin-top:14px}
.nx .nx-pwopen > span{flex:1;min-width:160px;max-width:210px}
.nx .nx-pwopen .nx-hp{margin:0 0 7px}
/* account table: text rows */
.nx .nx-atable th{padding-bottom:10px}
.nx .nx-atable td{vertical-align:middle;padding:12px 12px 12px 0;font-size:13px;color:var(--text)}
.nx .nx-ntable th.nx-r,.nx .nx-ntable td.nx-r{width:120px}
.nx .nx-ntable td .nx-tick{justify-content:flex-end;width:auto}
@media (max-width:760px){.nx .nx-acct{padding:16px 0 40px}
  .nx .nx-arow{flex-wrap:wrap;gap:6px}.nx .nx-arow .nx-v{margin-left:0;text-align:left;width:100%}}

/* =============================================================
   20. SAMPLE PROJECTS. A project either carries our own survey or
   sends people to someone else's. Same block, two contents: the
   kind sits on the survey eyebrow, because it decides what that
   whole block is.
   ============================================================= */
.nx .nx-rdz{margin-top:4px}
.nx .nx-rdhelp{font-size:12.5px;color:var(--muted);line-height:1.5;padding:6px 0 4px 136px} /* 136 = the label column plus its gap: the help starts where the values start, measured */
.nx .nx-rdhelp.nx-warn{color:var(--amber)}
.nx .nx-rdhelp.nx-lead{padding-left:0;padding-top:10px} /* a block intro sits with the labels; help for one field sits under that field */
.nx .nx-rdhelp i[data-i]{font-size:14px;vertical-align:-2px;margin-right:6px}
.nx .nx-rdrow .nx-rdv .nx-dim{color:var(--faint)}
.nx .nx-rdrow .nx-rdv b{font-weight:600;color:var(--navy)}

.nx .nx-rdrow > *{padding-bottom:11px}
.nx .nx-rdrow:last-child{border-bottom:0}
.nx .nx-rdrow .nx-k{font-size:13px;color:var(--muted);flex:none;width:120px}
.nx .nx-rdrow .nx-v{flex:1;min-width:0;display:flex;align-items:flex-end;gap:10px;padding-bottom:0}
.nx .nx-rdrow .nx-v .nx-inp{flex:1;min-width:0;display:flex;align-items:flex-end;padding-bottom:11px;
margin-bottom:-1px;line-height:20px;border-bottom:1px solid transparent;transition:border-color .12s ease}
.nx .nx-rdrow .nx-v .nx-inp:hover{border-bottom-color:var(--line-3)}
.nx .nx-rdrow .nx-v .nx-inp:focus-within{border-bottom-color:var(--blue)}
.nx .nx-rdrow.nx-miss .nx-v .nx-inp{border-bottom-color:var(--red)}
.nx .nx-rdrow .nx-v .nx-inp:has(input:placeholder-shown):not(:hover):not(:focus-within){border-bottom-color:var(--line)}
/* a read only link is a value: plain text, no line, nothing to focus */
.nx .nx-rdrow .nx-v .nx-rdv{flex:1;min-width:0;font-family:var(--mono);font-size:12px;color:var(--muted);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px;padding-bottom:11px}
.nx .nx-rdrow{display:flex;align-items:stretch;gap:16px;padding:11px 0 0;border-bottom:1px solid var(--hair);position:relative}
.nx .nx-rdrow .nx-v input{flex:1;min-width:0;border:0;outline:0;background:none;font-family:var(--mono);
font-size:12px;color:var(--navy);padding:0}
.nx .nx-rdrow .nx-v input::placeholder{color:var(--faint)}
.nx .nx-rdrow .nx-v .nx-ico{flex:none;align-self:flex-start;margin:-3px 0 0}
/* the return links are read only, so they are values: no line, ever */

/* =============================================================
   21. INTERLOCKED QUOTAS. A quota on a combination of answers
   rather than on each question separately. Rows are cells, the
   answers are value pills, and the two figures follow the field
   rule: their line sits on the row's own rule.
   ============================================================= */
/* the cell column, everything else is the age grid unchanged */
.nx .nx-agrid td .nx-cell{display:flex;flex-wrap:wrap;gap:6px;padding:0 0 9px}
.nx .nx-agrid tr.nx-editing td{background:var(--wash)}
.nx .nx-agrid tr.nx-editing td .nx-chip{background:var(--paper)}
/* the editor opens in the table, directly under the row it belongs to */
.nx .nx-agrid tr.nx-edrow td{padding:0;background:var(--wash);border-bottom:1px solid var(--hair)}
.nx .nx-ilqed{padding:4px 0 16px}
.nx .nx-ilqed .nx-edh{display:flex;align-items:center;gap:12px;height:34px;font-size:11px;font-weight:600;
letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.nx .nx-ilqed .nx-edh .nx-rt{margin-left:auto;display:flex;align-items:center;gap:14px;
font-size:12px;font-weight:400;letter-spacing:0;text-transform:none}
.nx .nx-ilqed .nx-ilqvar{border-bottom:0;padding:8px 0}
.nx .nx-ilqed .nx-chips span{background:var(--paper)}
.nx .nx-ilqed .nx-chips span.nx-on{background:var(--blue-fill);color:var(--on-blue)}
.nx .nx-agrid .nx-panelct.nx-none{color:var(--red)}
.nx .nx-agrid .nx-panelct.nx-low{color:var(--amber)}
.nx .nx-ilqvar{padding:14px 0;border-bottom:1px solid var(--hair)}
.nx .nx-ilqvar:last-child{border-bottom:0}
.nx .nx-ilqvar .nx-vh{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.nx .nx-ilqvar .nx-vk{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--muted);
background:var(--soft);border-radius:5px;padding:4px 8px}
.nx .nx-ilqvar .nx-vq{font-size:13px;color:var(--text)}
.nx .nx-ilqvar .nx-chips{display:flex;flex-wrap:wrap;gap:7px}
.nx .nx-ilqvar .nx-chips span{font-size:12.5px;padding:5px 11px;border-radius:6px;cursor:pointer;
color:var(--text);background:var(--soft)}
.nx .nx-ilqvar .nx-chips span:hover{color:var(--navy)}
.nx .nx-ilqvar .nx-chips span.nx-on{background:var(--blue-fill);color:var(--on-blue);font-weight:500}

/* =============================================================
   22. LAUNCH. A picking list, so the tick leads every row and sits
   on the name's line, not in the middle of a two line block. The
   flag travels with the name, as in every other audience row, and
   the figures line up in columns so they can be compared down the
   list rather than read row by row.
   ============================================================= */
.nx .nx-lnrow{display:flex;align-items:flex-start;gap:12px;padding:13px 0;border-bottom:1px solid var(--hair)}
.nx .nx-lnrow:last-of-type{border-bottom:0}
.nx .nx-lnrow .nx-tick{align-items:center;height:20px;flex:none}
.nx .nx-lnrow .nx-who{flex:1;min-width:0}
.nx .nx-lnrow .nx-n1{display:flex;align-items:center;gap:9px;line-height:20px}
.nx .nx-lnrow .nx-n1 .nx-flag{width:19px;flex:none}
.nx .nx-lnrow .nx-n1 .nx-nm{font-size:13.5px;font-weight:500;color:var(--navy)}
.nx .nx-lnrow .nx-lt{font-size:12px;color:var(--faint);margin-top:4px}
.nx .nx-lnrow .nx-col{width:92px;flex:none;text-align:right;font-size:13.5px;font-weight:600;color:var(--navy);
font-variant-numeric:tabular-nums;line-height:20px}
.nx .nx-lnrow .nx-col em{font-style:normal;font-size:12px;font-weight:400;color:var(--muted);margin-left:4px}
.nx .nx-lnrow .nx-amt2{width:104px;flex:none;text-align:right;font-size:14px;font-weight:600;color:var(--navy);
font-variant-numeric:tabular-nums;line-height:20px}
.nx .nx-lnrow.nx-pick{cursor:pointer}
.nx .nx-lnrow.nx-pick:hover .nx-nm{color:var(--blue-ink)}
.nx .nx-lnrow.nx-out{padding-left:30px}
.nx .nx-lnrow.nx-out .nx-nm{color:var(--muted);font-weight:400}
.nx .nx-lnrow.nx-out .nx-lt{color:var(--amber)}
.nx .nx-lnrow.nx-out .nx-lt i[data-i]{font-size:13px;vertical-align:-2px;margin-right:5px}
.nx .nx-lnhead{display:flex;gap:12px;padding:0 0 8px;font-size:11px;font-weight:600;letter-spacing:.12em;
text-transform:uppercase;color:var(--faint)}
.nx .nx-lnhead .nx-sp1{width:30px;flex:none}
.nx .nx-lnhead .nx-who{flex:1}
.nx .nx-lnhead .nx-col{width:92px;flex:none;text-align:right}
.nx .nx-lnhead .nx-amt2{width:104px;flex:none;text-align:right}
/* 29 Aug: the cost lines use the audience rows' last column, so figures sit under COST */
.nx .nx-sumrow.nx-lnsum{display:flex;align-items:baseline;gap:12px}
.nx .nx-sumrow.nx-lnsum > span:first-child{flex:1;min-width:0}
.nx .nx-sumrow.nx-lnsum .nx-amt2{width:104px;flex:none;text-align:right;font-variant-numeric:tabular-nums;font-weight:600;color:var(--navy)}
.nx .nx-sumrow.nx-lnsum.nx-tot .nx-amt2{font-size:15px}

/* =============================================================
   23. HELP. One assistant in the corner: it answers questions
   about the platform and links into the knowledge base. Not a
   floating card with its own colour scheme, but the same calm
   surface as a panel, so it belongs to the product.
   ============================================================= */
.nx .nx-helpfab{position:fixed;right:22px;bottom:calc(22px + var(--nx-footlift, 0px));z-index:120;width:46px;height:46px;border-radius:50%;
background:var(--blue-fill);color:var(--on-blue);display:flex;align-items:center;justify-content:center;cursor:pointer;
box-shadow:0 6px 20px rgba(var(--blue-rgb),.32);transition:transform .12s ease,background .12s ease,bottom .18s ease}
.nx .nx-helpfab:hover{background:var(--blue-dark);transform:translateY(-1px)}
.nx .nx-helpfab i[data-i]{font-size:20px}
.nx .nx-helpfab .nx-dot2{position:absolute;top:9px;right:9px;width:8px;height:8px;border-radius:50%;
background:var(--on-blue);box-shadow:0 0 0 2px var(--blue-fill)}
.nx .nx-helpwin{position:fixed;right:22px;bottom:calc(22px + var(--nx-footlift, 0px));z-index:121;
width:min(560px,calc(100vw - 32px)); /* 16 Sep: one size, wide enough for a long answer */
max-height:min(80vh,calc(100vh - 44px));display:flex;flex-direction:column;background:var(--paper);
border:1px solid var(--line);border-radius:10px;box-shadow:0 18px 50px rgba(var(--ink-rgb),.18);overflow:hidden;
animation:nx-helpIn .16s cubic-bezier(.2,.7,.3,1)}
@keyframes nx-helpIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.nx .nx-helpwin .nx-shead{height:auto;min-height:82px;padding:8px 26px 6px;flex:none}  /* the slider's two-row head, same sizes */
.nx .nx-helpbody{flex:1;overflow:auto;padding:18px 26px 6px}
.nx .nx-hmsg{display:flex;gap:10px;margin-bottom:16px;font-size:13px;line-height:1.55}
.nx .nx-hmsg .nx-av2{width:24px;height:24px;border-radius:50%;flex:none;display:flex;align-items:center;
justify-content:center;background:var(--blue-tint);color:var(--blue);margin-top:1px}
.nx .nx-hmsg .nx-av2 i[data-i]{font-size:14px}
.nx .nx-hmsg.nx-me{justify-content:flex-end}
.nx .nx-hmsg.nx-me .nx-bub{background:var(--soft);color:var(--navy);border-radius:12px 12px 4px 12px;padding:9px 12px;
max-width:82%}
.nx .nx-hmsg .nx-bub{color:var(--text);min-width:0}
.nx .nx-hmsg .nx-bub b{color:var(--navy)}
.nx .nx-hmsg .nx-bub ul{margin:8px 0 0;padding-left:16px}
.nx .nx-hmsg .nx-bub li{margin-bottom:4px}
.nx .nx-hmsg .nx-src{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.nx .nx-hmsg .nx-src span{font-size:12px;color:var(--blue);cursor:pointer}
.nx .nx-hmsg .nx-src span:hover{text-decoration:underline;text-underline-offset:3px}
.nx .nx-hsug{display:flex;flex-wrap:wrap;gap:7px;padding:0 26px 12px}
.nx .nx-hsug span{font-size:12.5px;padding:6px 11px;border-radius:99px;background:var(--soft);color:var(--text);
cursor:pointer}
.nx .nx-hsug span:hover{color:var(--navy)}
.nx .nx-helpfoot{align-items:flex-end;gap:8px;padding-top:10px;padding-bottom:10px}  /* the slider footer band, with the composer in it */
.nx .nx-helpfoot textarea{flex:1;border:0;outline:0;resize:none;font-family:inherit;font-size:13px;
color:var(--navy);background:none;max-height:96px;line-height:1.5;padding:6px 0}
.nx .nx-helpfoot textarea::placeholder{color:var(--faint)}
.nx .nx-helpfoot .nx-send{width:30px;height:30px;border-radius:8px;background:var(--blue-fill);color:var(--on-blue);flex:none;
display:flex;align-items:center;justify-content:center;cursor:pointer}
.nx .nx-helpfoot .nx-send.nx-off{background:var(--line-2);cursor:default}
.nx .nx-htyping{display:flex;gap:4px;padding:2px 0}
.nx .nx-htyping span{width:6px;height:6px;border-radius:50%;background:var(--line-3);animation:nx-hdot 1s infinite}
.nx .nx-htyping span:nth-child(2){animation-delay:.15s}
.nx .nx-htyping span:nth-child(3){animation-delay:.3s}
@keyframes nx-hdot{0%,60%,100%{opacity:.35}30%{opacity:1}}
@media (max-width:600px){.nx .nx-helpwin{right:8px;left:8px;bottom:8px;width:auto;max-height:78vh}
  .nx .nx-helpfab{right:14px;bottom:14px}}

/* =============================================================
   24. HISTORY. Comments and the change log. The log is filtered by
   one row of chips rather than a menu holding a single checkbox,
   and it is grouped by day so the timestamp stops repeating on
   every line. Only the columns that carry information stay.
   ============================================================= */
.nx .nx-hday{display:flex;align-items:baseline;gap:10px;padding:20px 0 8px;font-size:11px;font-weight:600;
letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.nx .nx-hday .nx-cnt{letter-spacing:0;text-transform:none;font-weight:400;font-size:12px;color:var(--faint);margin-left:auto}
.nx .nx-hrow{display:flex;gap:14px;padding:11px 0;border-bottom:1px solid var(--hair);font-size:13px}
.nx .nx-hrow:last-child{border-bottom:0}
.nx .nx-hrow .nx-tm{width:52px;flex:none;color:var(--faint);font-variant-numeric:tabular-nums;line-height:20px}
.nx .nx-hrow .nx-main{flex:1;min-width:0}
.nx .nx-hrow .nx-act{color:var(--text);line-height:20px}
.nx .nx-hrow .nx-act b{color:var(--navy);font-weight:500}
.nx .nx-hrow .nx-meta{font-size:12px;color:var(--faint);margin-top:3px;display:flex;flex-wrap:wrap;gap:6px}
.nx .nx-hrow .nx-meta .nx-who2{color:var(--muted)}
.nx .nx-hrow .nx-det{margin-top:7px;font-size:12.5px;color:var(--muted);background:var(--soft);border-radius:6px;
padding:9px 11px;font-family:var(--mono);white-space:pre-wrap;word-break:break-word}
.nx .nx-hrow .nx-more{font-size:12px;color:var(--blue);cursor:pointer;margin-top:5px;display:inline-block}
.nx .nx-hrow .nx-delta2{flex:none;text-align:right;font-size:13px;font-variant-numeric:tabular-nums;
color:var(--navy);font-weight:600;line-height:20px;white-space:nowrap}
.nx .nx-hrow .nx-delta2 em{font-style:normal;font-weight:400;color:var(--faint);font-size:12px;margin-left:5px}
/* comments read as a thread, so they are messages, not table rows */
.nx .nx-cmt{display:flex;gap:11px;padding:14px 0;border-bottom:1px solid var(--hair)}
.nx .nx-cmt:last-of-type{border-bottom:0}
.nx .nx-cmt .nx-av3{width:28px;height:28px;border-radius:50%;flex:none;background:var(--soft);color:var(--muted);
display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600}
.nx .nx-cmt .nx-cb{flex:1;min-width:0}
.nx .nx-cmt .nx-ch{display:flex;align-items:baseline;gap:8px}
.nx .nx-cmt .nx-ch .nx-nm5{font-size:13px;font-weight:600;color:var(--navy)}
.nx .nx-cmt .nx-ch .nx-wh{font-size:12px;color:var(--faint)}
.nx .nx-cmt .nx-ct2{font-size:13px;color:var(--text);margin-top:4px;line-height:1.55;white-space:pre-wrap}

/* =============================================================
   25. KNOWLEDGE BASE. Reached from the assistant, so it opens in
   the slider like everything else: areas on the way in, articles
   inside an area, then the article itself. A back link at each
   level rather than a tree that has to be navigated.
   ============================================================= */
.nx .nx-kbsearch{margin:0 0 8px}
.nx .nx-kbarea{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-bottom:1px solid var(--hair);
cursor:pointer}
.nx .nx-kbarea:last-of-type{border-bottom:0}
.nx .nx-kbarea .nx-kbi{width:30px;height:30px;border-radius:8px;flex:none;background:var(--blue-tint);color:var(--blue);
display:flex;align-items:center;justify-content:center;margin-top:1px}
.nx .nx-kbarea .nx-kbi i[data-i]{font-size:16px}
.nx .nx-kbarea .nx-kt{font-size:13.5px;font-weight:500;color:var(--navy)}
.nx .nx-kbarea:hover .nx-kt{color:var(--blue-ink)}
.nx .nx-kbarea .nx-kd{font-size:12.5px;color:var(--muted);margin-top:3px}
.nx .nx-kbarea .nx-kn{margin-left:auto;font-size:12px;color:var(--faint);flex:none;padding-top:2px}
.nx .nx-kbtopic{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding:22px 0 6px;border-bottom:1px solid var(--line)}
.nx .nx-kbtopic:first-child{padding-top:14px}
.nx .nx-kbcrumb{display:flex;align-items:center;margin-bottom:14px}
.nx .nx-kbcrumb .nx-kbback{margin-bottom:0}
.nx .nx-kbhere{font-size:13.5px;font-weight:600;color:var(--navy)}
.nx .nx-kbhere::before{content:"";display:inline-block;width:1px;height:12px;background:var(--line-2);margin:0 12px 0 10px;vertical-align:-1px}
.nx .nx-kbart{display:flex;align-items:baseline;gap:12px;padding:12px 0;border-bottom:1px solid var(--hair);cursor:pointer}
.nx .nx-kbart:last-of-type{border-bottom:0}
.nx .nx-kbart .nx-kt2{font-size:13.5px;color:var(--text);flex:1;min-width:0}
.nx .nx-kbart:hover .nx-kt2{color:var(--blue-ink)}
.nx .nx-kbart .nx-rd{font-size:12px;color:var(--faint);flex:none}
.nx .nx-kbback{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--blue);cursor:pointer;
margin-bottom:14px}
.nx .nx-kbdoc h4{margin:0 0 6px;font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--navy)}
.nx .nx-kbdoc .nx-sub2{font-size:12.5px;color:var(--faint);margin-bottom:18px}
.nx .nx-kbdoc p{margin:0 0 13px;font-size:13.5px;line-height:1.65;color:var(--text)}
.nx .nx-kbdoc h5{margin:22px 0 8px;font-size:13px;font-weight:600;color:var(--navy)}
.nx .nx-kbdoc ul{margin:0 0 13px;padding-left:18px}
.nx .nx-kbdoc li{font-size:13.5px;line-height:1.65;color:var(--text);margin-bottom:5px}
 /* 29 Aug: ink and glyph, like every other message */

.nx .nx-kbdoc .nx-rel{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.nx .nx-kbdoc .nx-rel span{font-size:12.5px;color:var(--blue);cursor:pointer}
.nx .nx-kbdoc .nx-rel span:hover{text-decoration:underline;text-underline-offset:3px}

/* =============================================================
   26. SURVEY LOGIC. A rule is a sentence, so it is written as one:
   after a question, if something is true, do this, otherwise do
   that. The values inside the sentence are selectors, which
   removes the need for a view mode and an edit mode: the readable
   version and the editable version are the same thing.
   ============================================================= */
.nx .nx-lgrule.nx-cur{box-shadow:-12px 0 0 var(--wash),12px 0 0 var(--wash);background:var(--wash)}
.nx .nx-lgrule{padding:16px 0;border-bottom:1px solid var(--hair)}
.nx .nx-lgrule:last-of-type{border-bottom:0}
.nx .nx-lgh{display:flex;align-items:center;gap:10px;margin-bottom:2px}
.nx .nx-lgh .nx-n7{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.nx .nx-lgh .nx-ico{margin-left:auto}
.nx .nx-lgline{display:flex;align-items:center;flex-wrap:wrap;gap:7px;padding:7px 0;font-size:13.5px;
color:var(--muted);line-height:26px}
.nx .nx-lgline .nx-kw{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
width:44px;flex:none}
.nx .nx-lgline .nx-kw.nx-q2{color:var(--faint)}
.nx .nx-lgline .nx-selbox{color:var(--navy);height:auto;padding:0 0 3px;margin:0}
.nx .nx-lgline .nx-selbox:hover{color:var(--blue-ink)}
.nx .nx-lgline .nx-vals{display:inline-flex;flex-wrap:wrap;gap:6px}
.nx .nx-lgline .nx-vals .nx-addv{font-size:12.5px;color:var(--blue);cursor:pointer;padding:3px 2px}
.nx .nx-lgline .nx-drop{margin-left:auto;flex:none}
.nx .nx-lgacts{display:flex;gap:16px;padding:8px 0 0 51px}
.nx .nx-lgacts .nx-lnk{font-size:12.5px}
.nx .nx-lgsum{font-size:13px;color:var(--muted);padding:2px 0 8px 51px}
.nx .nx-lgsum b{color:var(--navy);font-weight:500}

/* =============================================================
   27. SURVEY HISTORY. Versions are a list you scan, not one
   version behind a selector. Each row says what changed against
   the one before it, because "3 questions" tells you nothing on
   its own and the difference is the reason anyone is here.
   ============================================================= */
.nx .nx-vrow{display:flex;gap:14px;padding:13px 0;border-bottom:1px solid var(--hair)}
.nx .nx-vrow:last-of-type{border-bottom:0}
.nx .nx-vrow .nx-vn{width:56px;flex:none;font-size:13.5px;font-weight:600;color:var(--navy);line-height:20px;
font-variant-numeric:tabular-nums}
.nx .nx-vrow .nx-vm{flex:1;min-width:0}
.nx .nx-vrow .nx-vw{font-size:13px;color:var(--text);line-height:20px}
.nx .nx-vrow .nx-vmeta{font-size:12px;color:var(--faint);margin-top:3px}
.nx .nx-vrow .nx-vch{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.nx .nx-vrow .nx-vch span{font-size:12px;padding:3px 8px;border-radius:5px;background:var(--soft);color:var(--muted)}
.nx .nx-vrow .nx-vch span.nx-add{color:var(--green-ink)}
.nx .nx-vrow .nx-vch span.nx-del{color:var(--red)}
.nx .nx-vrow .nx-vact{flex:none;align-self:center}
.nx .nx-vrow.nx-live .nx-vn{color:var(--blue)}
.nx .nx-vrow.nx-sel{background:var(--blue-tint);border-radius:8px;padding-left:12px;padding-right:12px;
margin:0 -12px;border-bottom-color:transparent}
.nx .nx-vlive{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);
background:var(--blue-tint);border-radius:5px;padding:3px 7px;margin-left:8px}

/* the export preview: what the document will look like, not a mock of it */
.nx .nx-sxprev{border:1px solid var(--line);border-radius:8px;padding:16px 18px;background:var(--paper)}
.nx .nx-sxprev .nx-sxq{font-size:13.5px;font-weight:600;color:var(--navy);margin-bottom:10px}
.nx .nx-sxprev .nx-sxa{font-size:13px;color:var(--text);padding:4px 0 4px 16px;position:relative}
.nx .nx-sxprev .nx-sxa:before{content:"";position:absolute;left:2px;top:11px;width:5px;height:5px;
border-radius:50%;background:var(--line-3)}
.nx .nx-sxprev .nx-sxa.nx-more2{color:var(--faint);font-style:italic}
.nx .nx-sxprev .nx-sxa.nx-mono2{font-family:var(--mono);font-size:11.5px;color:var(--muted);word-break:break-all}
.nx .nx-sxprev .nx-sxid{font-family:var(--mono);font-size:11px;color:var(--faint);margin-right:8px}
.nx .nx-sxprev .nx-sxlg{font-size:12.5px;color:var(--muted);margin-top:12px;padding-top:10px;
border-top:1px solid var(--hair)}

/* =============================================================
   28. MEDIA LIBRARY. A grid of what you have, sized to the image
   rather than the filename: the picture is what people recognise.
   The name is one line under it, truncated, and where a file is
   used matters more than how big it is.
   ============================================================= */
.nx .nx-mlgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:14px;margin-top:14px}
.nx .nx-mltile{cursor:pointer}
.nx .nx-mlth{position:relative;aspect-ratio:1;border-radius:8px;background:var(--soft);overflow:hidden;
display:flex;align-items:center;justify-content:center}
.nx .nx-mlth img{width:100%;height:100%;object-fit:cover;display:block}
.nx .nx-mlth .nx-ph2{font-size:22px;color:var(--line-3)}
.nx .nx-mltile.nx-on .nx-mlth{outline:2px solid var(--blue);outline-offset:2px}
.nx .nx-mlth .nx-pick{position:absolute;top:6px;left:6px;width:20px;height:20px;border-radius:50%;background:var(--paper);
display:none;align-items:center;justify-content:center;color:var(--blue);box-shadow:0 1px 3px rgba(var(--ink-rgb),.2)}
.nx .nx-mltile.nx-on .nx-mlth .nx-pick{display:flex}
.nx .nx-mlth .nx-kb2{position:absolute;top:4px;right:4px;background:rgba(var(--paper-rgb),.94);border-radius:6px;
opacity:0;transition:opacity .12s}
.nx .nx-mltile:hover .nx-mlth .nx-kb2{opacity:1}
.nx .nx-mlnm{font-size:12px;color:var(--text);margin-top:7px;white-space:nowrap;overflow:hidden;
text-overflow:ellipsis}
.nx .nx-mlmeta{font-size:11.5px;color:var(--faint);margin-top:2px;display:flex;gap:6px}
.nx .nx-mlmeta .nx-used{color:var(--blue-ink)}
.nx .nx-mlmeta .nx-unused{color:var(--faint)}
.nx .nx-mldrop{border:1px dashed var(--line-2);border-radius:10px;padding:26px 20px;text-align:center;
background:var(--soft);margin-top:14px}
.nx .nx-mldrop .nx-t5{font-size:13.5px;font-weight:500;color:var(--navy)}
.nx .nx-mldrop .nx-s5{font-size:12.5px;color:var(--muted);margin-top:5px}
.nx .nx-mldrop .nx-fldrow{justify-content:center;margin-top:14px}

/* =============================================================
   29. SURVEY LINKS. Two links that do different jobs, so each one
   states its job first and carries its own action. The URL is a
   value, not a field: no box, no line, just the text and the two
   things you do with it.
   ============================================================= */
.nx .nx-lkblock{padding:14px 0 4px}
.nx .nx-lkhead{display:flex;align-items:baseline;gap:10px}
.nx .nx-lkhead .nx-t6{font-size:13.5px;font-weight:600;color:var(--navy)}
.nx .nx-lkhead .nx-rt{margin-left:auto;display:flex;align-items:center;gap:14px}
.nx .nx-lkurl{display:flex;align-items:baseline;gap:12px;margin-top:12px;padding-bottom:11px;
border-bottom:1px solid var(--hair)}
.nx .nx-lkurl .nx-u2{flex:1;min-width:0;font-family:var(--mono);font-size:11.5px;color:var(--muted);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}
.nx .nx-lkurl .nx-ico{flex:none;align-self:flex-start;margin:-3px 0 0}
.nx .nx-lkwarn{font-size:12.5px;color:var(--amber);margin-top:10px;display:flex;align-items:baseline;gap:6px}
.nx .nx-lkwarn i[data-i]{font-size:14px;align-self:center}

/* =============================================================
   30. NEW QUESTION. The editor is the same one used for an
   existing question, so nothing new is learned: type first,
   because it decides what the rest of the panel is, then the
   question, then its answers as rows you can type straight into.
   ============================================================= */
.nx .nx-nqtype{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:12px}
.nx .nx-nqt{display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px solid var(--line);
border-radius:8px;cursor:pointer;font-size:13px;color:var(--text);background:var(--paper)}
.nx .nx-nqt:hover{border-color:var(--line-2);color:var(--navy)}
.nx .nx-nqt.nx-on{border-color:var(--blue);background:var(--blue-tint);color:var(--blue-ink);font-weight:500}
.nx .nx-nqt i[data-i]{font-size:16px;color:var(--faint);flex:none}
.nx .nx-nqt.nx-on i[data-i]{color:var(--blue)}
.nx .nx-nqans{display:flex;align-items:baseline;gap:12px;padding:9px 0 0;border-bottom:1px solid var(--hair)}
.nx .nx-nqans > *{padding-bottom:9px}
.nx .nx-nqans .nx-an2{width:26px;flex:none;font-family:var(--mono);font-size:11px;color:var(--faint);line-height:20px}
.nx .nx-nqans .nx-aw{flex:1;min-width:0;padding-bottom:0}
.nx .nx-nqans .nx-aw input{width:100%;border:0;outline:0;background:none;font-family:inherit;font-size:13.5px;
color:var(--navy);padding:0 0 9px;margin-bottom:-1px;line-height:20px;
border-bottom:1px solid transparent;transition:border-color .12s ease}
.nx .nx-nqans .nx-aw input::placeholder{color:var(--faint)}
.nx .nx-nqans .nx-aw input:hover{border-bottom-color:var(--line-3)}
.nx .nx-nqans .nx-aw input:focus{border-bottom-color:var(--blue)}
.nx .nx-nqans .nx-aw input:placeholder-shown:not(:hover):not(:focus){border-bottom-color:var(--line)}
.nx .nx-nqans .nx-ico{flex:none;align-self:flex-start;margin:-3px 0 0}
.nx .nx-nqpaste textarea{width:100%;min-height:120px}

/* =============================================================
   31. QUESTION TYPES. Twenty five of them, so the job is finding
   one: search and categories decide what is on screen, and the
   card itself is the button. Each card carries a small drawing of
   the type and one line on when to use it, which the name alone
   cannot give you (a grid and a matrix look identical as words).
   ============================================================= */
.nx .nx-qtwrap{display:flex;gap:22px;align-items:flex-start}
.nx .nx-qtside{width:170px;flex:none}
.nx .nx-qtside .nx-qc{display:flex;align-items:baseline;gap:8px;padding:7px 0;font-size:13px;color:var(--muted);
cursor:pointer}
.nx .nx-qtside .nx-qc:hover{color:var(--navy)}
.nx .nx-qtside .nx-qc.nx-on{color:var(--blue);font-weight:500}
.nx .nx-qtside .nx-qc .nx-n2{margin-left:auto;font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.nx .nx-qtgrid{flex:1;min-width:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px 10px}
/* 29 Aug: no box around a box. The preview tile is the card; the border went. */
.nx .nx-qtcard{border:0;border-radius:8px;padding:6px;cursor:pointer;background:none;transition:background .12s ease}
.nx .nx-qtcard:hover{background:var(--wash)}
.nx .nx-qtcard:hover .nx-qtprev{background:var(--line)}
.nx .nx-qtcard.nx-on .nx-qtprev{box-shadow:inset 0 0 0 2px var(--blue)}
.nx .nx-qtcard.nx-on .nx-qth .nx-nm8{color:var(--blue)}
.nx .nx-qtcard .nx-qth{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.nx .nx-qtcard .nx-qth .nx-nm8{font-size:13px;font-weight:500;color:var(--navy)}
.nx .nx-qtcard .nx-qth i[data-i]{font-size:15px;color:var(--faint);margin-left:auto}
.nx .nx-qtcard.nx-on .nx-qth i[data-i]{color:var(--blue)}
.nx .nx-qtcard .nx-qd2{font-size:12px;color:var(--muted);line-height:1.45}
/* the drawing: grey bars for text, blue for what the person picked */
.nx .nx-qtprev{background:var(--soft);border-radius:7px;padding:8px 10px;margin-bottom:7px;display:flex;
flex-direction:column;gap:4px;min-height:56px;justify-content:center;transition:background .12s ease}
.nx .nx-qtprev .nx-bar{height:5px;border-radius:3px;background:var(--line-2)}
.nx .nx-qtprev .nx-bar.nx-b1{width:78%} .nx .nx-qtprev .nx-bar.nx-b2{width:46%} .nx .nx-qtprev .nx-bar.nx-b3{width:62%}
.nx .nx-qtprev .nx-opt2{display:flex;align-items:center;gap:6px}
.nx .nx-qtprev .nx-dot3{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--line-3);flex:none}
.nx .nx-qtprev .nx-dot3.nx-sq{border-radius:2px}
.nx .nx-qtprev .nx-dot3.nx-on{background:var(--blue);border-color:var(--blue)}
.nx .nx-qtprev .nx-row3{display:flex;gap:5px;align-items:center}
.nx .nx-qtprev .nx-cell3{flex:1;height:8px;border-radius:2px;background:var(--line-2)}
.nx .nx-qtprev .nx-cell3.nx-on{background:var(--blue)}
.nx .nx-qtprev .nx-box3{height:26px;border-radius:4px;background:var(--paper);border:1px solid var(--line)}
.nx .nx-qtprev .nx-st3{display:flex;gap:3px}
.nx .nx-qtprev .nx-st3 i{width:9px;height:9px;border-radius:2px;background:var(--line-2)}
.nx .nx-qtprev .nx-st3 i.nx-on{background:var(--blue)}

/* =============================================================
   32. LANGUAGES. One home instead of five menu entries. Each
   language is a row carrying its own state and its own actions,
   so validation stops being a modal you summon and becomes what
   the row already says.
   ============================================================= */
.nx .nx-lgrow{display:flex;align-items:flex-start;gap:14px;padding:14px 0;border-bottom:1px solid var(--hair)}
.nx .nx-lgrow:last-of-type{border-bottom:0}
.nx .nx-lgrow .nx-sq2{width:30px;height:22px;border-radius:4px;flex:none;background:var(--soft);color:var(--muted);
display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;letter-spacing:.04em;
margin-top:1px}
.nx .nx-lgrow .nx-lm{flex:1;min-width:0}
.nx .nx-lgrow .nx-ln3{font-size:13.5px;font-weight:500;color:var(--navy);line-height:20px;display:flex;
align-items:center;gap:9px}
.nx .nx-lgrow .nx-src2{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
background:var(--blue-tint);border-radius:5px;padding:2px 7px}
.nx .nx-lgrow .nx-lst{font-size:12.5px;margin-top:4px;display:flex;flex-wrap:wrap;gap:5px;align-items:baseline}
.nx .nx-lgrow .nx-lst .nx-ok2{color:var(--green-ink)}
.nx .nx-lgrow .nx-lst .nx-miss2{color:var(--amber)}
.nx .nx-lgrow .nx-lst .nx-rev{color:var(--amber)}
.nx .nx-lgrow .nx-lst i[data-i]{font-size:13px;vertical-align:-2px;margin-right:4px}
.nx .nx-lgrow .nx-lacts{flex:none;display:flex;gap:14px;align-items:center;padding-top:1px}
.nx .nx-lgbar{height:4px;border-radius:2px;background:var(--line);overflow:hidden;margin-top:8px;max-width:220px}
.nx .nx-lgbar span{display:block;height:100%;background:var(--blue)}

/* =============================================================
   33. FEASIBILITY. Scenarios are what this screen is for: the
   question is never "can it run" but "what would make it run".
   So an audience shows its scenarios as comparable rows, the
   breakdown explains which answer is the constraint, and running
   the check is a state on the row rather than a separate screen.
   ============================================================= */
.nx .nx-fsblock{padding:0 0 6px}
.nx .nx-fsrow{display:flex;align-items:stretch;gap:12px;padding:0;min-height:44px;cursor:pointer;border-bottom:1px solid var(--hair);
font-size:13px}
.nx .nx-fsrow:last-of-type{border-bottom:0}
.nx .nx-fsrow.nx-cur{background:var(--wash);margin:0 -12px;padding-left:12px;padding-right:12px;
border-radius:8px;border-bottom-color:transparent}
.nx .nx-fsrow .nx-tag2{width:34px;flex:none;font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--muted);
text-transform:uppercase}
.nx .nx-fsrow.nx-cur .nx-tag2{color:var(--navy)}
.nx .nx-fsrow .nx-fc{width:74px;flex:none;text-align:right;font-variant-numeric:tabular-nums;color:var(--navy);
font-weight:600}
.nx .nx-fsrow .nx-fc em{font-style:normal;font-weight:400;color:var(--faint);font-size:12px;margin-left:4px}
/* 4 Oct: a unit sits on its figure's baseline, so figure and unit are one inline box, never two flex items */
.nx .nx-fsrow .nx-fc .nx-fcn{display:inline;white-space:nowrap}
.nx .nx-fsrow .nx-fv{flex:1;min-width:0;display:flex;align-items:center;gap:9px;justify-content:flex-end}
.nx .nx-fsrow .nx-verdict{font-size:12.5px;white-space:nowrap}
.nx .nx-fsrow .nx-verdict.nx-ok3{color:var(--green-ink)}
.nx .nx-fsrow .nx-verdict.nx-no3{color:var(--red)}
.nx .nx-fsrow .nx-verdict i[data-i]{font-size:14px;vertical-align:-2px;margin-right:5px}
.nx .nx-fshead{display:flex;gap:12px;padding:0 0 8px;font-size:11px;font-weight:600;letter-spacing:.12em;
text-transform:uppercase;color:var(--faint)}
.nx .nx-fshead .nx-tag2{width:34px;flex:none}
.nx .nx-fshead .nx-fc{width:74px;flex:none;text-align:right}
.nx .nx-fshead .nx-fv{flex:1;text-align:right}
/* the breakdown: one bar per answer, against what the audience asks for */
.nx .nx-fbrow{display:flex;align-items:center;gap:12px;padding:7px 0;font-size:13px}
.nx .nx-fbrow .nx-fbn{width:340px;flex:none;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* 8 Oct: room for a long answer on one line (was 120px) */
.nx .nx-fbrow .nx-fbq{width:152px;flex:none;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--muted)} /* 8 Oct: one line, one width, so every bar starts on the same edge (was 120px, wrapped; auto on phones, bars drifted) */
.nx .nx-fbrow .nx-fbq b{color:var(--navy)}
.nx .nx-fbrow .nx-track{flex:1;min-width:60px;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.nx .nx-fbrow .nx-track span{display:block;height:100%;background:var(--blue)}
.nx .nx-fbrow.nx-short .nx-track span{background:var(--amber)}
.nx .nx-fbrow.nx-none4 .nx-track span{background:var(--red)}
.nx .nx-fbrow.nx-none4 .nx-fbq b{color:var(--red)}
.nx .nx-fbgrp{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
padding:16px 0 4px}

/* =============================================================
   34. CROSS TABLES. A table people read for an hour, so the
   chrome gets out of the way: one control row, sticky headers,
   and the figure the eye needs first. Every question is a block
   with its own base line rather than one endless grid, because a
   percentage means nothing without knowing what it is a
   percentage of.
   ============================================================= */
/* 5 Oct: a results table scrolls inside its own box, which starts under the bar and runs to the bottom of the screen.
   The header then sticks to the top of that box, always, at any width, and the rows pass under it. */
.nx .nx-xtwrap{margin-top:6px;overflow:auto;max-height:calc(100vh - var(--sticky-top, 200px) - 8px)}
/* cross table: separate borders so sticky cells keep their rules */
.nx .nx-xt{border-collapse:separate;border-spacing:0;font-size:13px}
.nx .nx-xt th,.nx .nx-xt td{padding:8px 10px;white-space:nowrap}
/* text sits on the rule's ends, as in Compare */
.nx .nx-xt tr > :first-child{padding-left:0}
.nx .nx-xt tr > :last-child{padding-right:0}
.nx .nx-xt thead th{letter-spacing:.1em;text-align:right;border-bottom:1px solid var(--line)}
.nx .nx-xt thead th.nx-grp4.nx-blvl{color:var(--navy);letter-spacing:.04em;border-bottom:1px solid var(--hair);border-left:1px solid var(--hair)}
.nx .nx-xt thead th.nx-grp4{text-align:center;color:var(--muted);letter-spacing:.06em;border-bottom:0;
padding-bottom:2px}
.nx .nx-xt thead th.nx-lbl4{text-align:left}
.nx .nx-xt thead th .nx-bn{display:block;font-size:11px;font-weight:400;letter-spacing:0;text-transform:none;
color:var(--faint);margin-top:2px;font-variant-numeric:tabular-nums}
.nx .nx-xt tbody th{position:sticky;left:0;background:var(--paper);z-index:1;text-align:left;font-weight:400;
color:var(--text);min-width:230px;max-width:320px;white-space:normal;
border-bottom:1px solid var(--hair)}
.nx .nx-xt tbody td{text-align:right;color:var(--navy)}
.nx .nx-xt tr.nx-qhead th{font-weight:600;color:var(--navy);padding-top:20px;background:var(--paper);cursor:pointer}
.nx .nx-xt tr.nx-qhead .nx-cv{font-size:14px;margin-right:8px;vertical-align:-2px;transition:transform .2s}
.nx .nx-xt tr.nx-qhead.nx-folded .nx-cv{transform:rotate(-90deg)}
.nx .nx-xt tr.nx-qhead:hover th{color:var(--blue-ink)}
.nx .nx-xt tr.nx-qhead td{padding-top:20px}
.nx .nx-xt tr.nx-qhead .nx-qn{display:block;font-size:12px;font-weight:400;color:var(--faint);margin-top:3px}
.nx .nx-xt tr.nx-base th,.nx .nx-xt tr.nx-base td{color:var(--muted);font-size:12px;border-bottom:1px solid var(--line)}
/* cross table row hover: the row's own rules, above and below, get darker. Nothing else moves. */
.nx .nx-xt tbody tr:not(.nx-qhead):not(.nx-base):hover th,.nx .nx-xt tbody tr:not(.nx-qhead):not(.nx-base):hover td{
  background:var(--paper);box-shadow:inset 0 1px 0 var(--line-3),inset 0 -1px 0 var(--line-3)}
.nx .nx-xt td.nx-low4{color:var(--faint)}
.nx .nx-xt td.nx-mark{font-weight:600} /* 29 Aug: was .hi, which the dashboard greeting also owns */
.nx .nx-xt td.nx-zero{color:var(--faint)}
.nx .nx-xt.nx-rsp td.nx-l{text-align:left}
.nx .nx-xt.nx-rsp th.nx-idc,.nx .nx-xt.nx-rsp td.nx-idc{background:var(--wash)}
.nx .nx-xt.nx-rsp .nx-ok2{color:var(--navy)}
.nx .nx-xt.nx-rsp .nx-rev{color:var(--amber-ink)}
.nx .nx-xt.nx-rsp td.nx-l .nx-zero,.nx .nx-xt.nx-rsp td .nx-zero{color:var(--faint)}
.nx .nx-xt.nx-rsp th:first-child,.nx .nx-xt.nx-rsp tbody th{width:1%;white-space:nowrap}
.nx .nx-xt.nx-rsp tbody th.nx-mono{font-family:var(--mono);font-size:12px;color:var(--muted)}
.nx .nx-xtnote{font-size:12.5px;color:var(--muted);margin-top:14px;display:flex;align-items:baseline;gap:6px}
.nx .nx-xtnote i[data-i]{font-size:14px;align-self:center;color:var(--faint)}

/* the detail view: one file, everything about it, with the actions that
   only make sense for that file */
.nx .nx-mldet{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start}
.nx .nx-mldet .nx-big{width:260px;flex:none;aspect-ratio:1;border-radius:10px;display:flex;align-items:center;
justify-content:center;color:var(--line-3);font-size:30px}
.nx .nx-mldet .nx-info{flex:1;min-width:240px}
.nx .nx-mlused{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--hair);
font-size:13px}
.nx .nx-mlused:last-child{border-bottom:0}
.nx .nx-mlused .nx-qid2{font-family:var(--mono);font-size:11px;color:var(--faint);width:34px;flex:none}

/* =============================================================
   38. 29 AUGUST DECISIONS. Focus, disabled, row hover, help
   button, mobile inputs, touch targets. Each decision is one rule.
   ============================================================= */
/* focus: one ring, keyboard only. Inputs keep the blue underline
   as their focus signal and never take the ring. */
.nx .nx-btn:focus-visible,.nx .nx-lnk:focus-visible,.nx .nx-go:focus-visible,.nx .nx-selbox:focus-visible,.nx .nx-sel:focus-visible,
.nx .nx-statusctl:focus-visible,.nx .nx-tmenu:focus-visible,.nx .nx-tab:focus-visible,.nx .nx-stabs .nx-t:focus-visible,
.nx .nx-mi:focus-visible,.nx .nx-tick:focus-visible,.nx .nx-toggle:focus-visible,.nx .nx-seg span:focus-visible,
.nx .nx-qtcard:focus-visible,.nx .nx-cal td:focus-visible,.nx .nx-ico:focus-visible,.nx .nx-gico:focus-visible,.nx .nx-kind:focus-visible,
.nx .nx-wopt:focus-visible,.nx .nx-crow:focus-visible,.nx .nx-pkrow:focus-visible,.nx .nx-srcrow:focus-visible,.nx .nx-vrow:focus-visible,
.nx .nx-lgrow:focus-visible,.nx .nx-fsrow:focus-visible,.nx .nx-logo:focus-visible{
  outline:2px solid var(--blue);outline-offset:2px;border-radius:var(--r)}
.nx .nx-seg span:focus-visible{outline-offset:-2px}
.nx input:focus-visible,.nx textarea:focus-visible,.nx select:focus-visible{outline:0}
.nx :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),textarea,select){background-color:var(--paper)} /* the browser white, under every rule of ours */

/* disabled: one treatment for controls. Fields are not here on
   purpose: a disabled field is a value and renders as plain text
   (locked mode, section 28). */
.nx .nx-btn:disabled,.nx .nx-btn[aria-disabled=true],.nx .nx-btn.nx-is-disabled,
.nx .nx-selbox:disabled,.nx .nx-selbox[aria-disabled=true],.nx .nx-selbox.nx-is-disabled,
.nx .nx-toggle[aria-disabled=true],.nx .nx-toggle.nx-is-disabled,
.nx .nx-tick[aria-disabled=true],.nx .nx-tick.nx-is-disabled,
.nx .nx-seg[aria-disabled=true],.nx .nx-seg.nx-is-disabled,
.nx .nx-lnk:disabled,.nx .nx-lnk[aria-disabled=true],.nx .nx-lnk.nx-is-disabled,
.nx .nx-go:disabled,.nx .nx-go[aria-disabled=true],.nx .nx-go.nx-is-disabled,
.nx .nx-locked .nx-seg,.nx .nx-locked .nx-toggle,.nx .nx-locked .nx-lnk,.nx .nx-locked .nx-tick,.nx .nx-locked .nx-go{
  opacity:.4;pointer-events:none;cursor:default}
.nx .nx-btn:disabled:hover,.nx .nx-btn.nx-pri:disabled{background:var(--blue)} /* colour stays, opacity says disabled */
.nx .nx-btn.nx-sec:disabled,.nx .nx-btn.nx-cancel:disabled{background:var(--soft);border-color:var(--soft);color:var(--faint);opacity:1} /* a white button at 40% reads as live on a white footer; the soft fill says disabled */

/* hover: every clickable row whispers the same way */
/* one row hover for the whole product (29 Aug): the row's own rules, above and
   below, one shade darker. No fill, nothing moves, the text stays where it is. */
.nx .nx-wopt,.nx .nx-fsrow,.nx .nx-vrow,.nx .nx-lgrow,.nx .nx-srcrow,.nx .nx-pkrow,.nx .nx-aline,.nx .nx-crow,.nx .nx-nrow{border-radius:0}
.nx .nx-wopt:hover,.nx .nx-fsrow:hover,.nx .nx-vrow:hover,.nx .nx-lgrow:hover,.nx .nx-srcrow:hover,.nx .nx-pkrow:hover,.nx .nx-aline:hover,.nx .nx-crow:hover,.nx .nx-nrow:hover{
  background:none;box-shadow:inset 0 1px 0 var(--line-3),inset 0 -1px 0 var(--line-3)}
.nx .nx-locked .nx-wopt:hover{background:none;box-shadow:none}

/* help, 21 Sep: one anchor. The button and the window sit 22px from the right edge of the screen;
   while a slider is open they sit 22px from the slider's live left edge instead, whatever its width
   (a resize observer writes it into --slw), the button centred on the slider footer's buttons and the
   window's bottom on their bottom edge. The window never leaves the screen on the left: when there is
   no room it rides over the slider by the shortfall. Under 760px the slider is the whole screen, so the
   button hides. A modal still hides it. */
.nx:has(.nx-modal.nx-on) .nx-helpfab{display:none}
@media (min-width:761px){
  .nx:has(.nx-slider.nx-on) .nx-helpfab{right:calc(var(--slw, 700px) + 22px);bottom:11px}
  .nx:has(.nx-slider.nx-on) .nx-helpwin{right:auto;left:max(22px, 100vw - var(--slw, 700px) - 22px - 560px);bottom:14px}
}
@media (max-width:760px){.nx:has(.nx-slider.nx-on) .nx-helpfab{display:none}
  .nx .nx-demo .nx-vdiv{display:none}} /* the slider covers the topbar there */

/* feasibility on a phone: the head stacks, and the scenario table scrolls
   inside its own strip instead of widening the page. Column widths are
   shared by head and rows, so the columns line up. */
@media (max-width:760px){
  .nx .nx-fsblock{overflow-x:auto;margin:0 -16px;padding:0 16px 6px;scrollbar-width:none}
  .nx .nx-fsblock::-webkit-scrollbar{display:none}
  .nx .nx-fshead,.nx .nx-fsrow{min-width:740px}
  .nx .nx-fsrow.nx-cur{margin:0;padding-left:8px;padding-right:8px}
  .nx .nx-fsblock > .nx-fldrow,.nx .nx-fsblock > div[style]{position:sticky;left:0;min-width:0}
}

/* launch list on a phone: name on one line, the three figures on the next */
@media (max-width:760px){
  .nx .nx-lnhead{display:none}
  .nx .nx-lnrow{flex-wrap:wrap;gap:6px 12px}
  .nx .nx-lnrow .nx-who{flex:1 0 calc(100% - 32px)}
  .nx .nx-lnrow.nx-out .nx-who{flex-basis:100%}
  .nx .nx-lnrow .nx-col,.nx .nx-lnrow .nx-amt2{width:auto;flex:0 0 auto;text-align:left;font-size:13px}
  .nx .nx-lnrow .nx-col:first-of-type{margin-left:30px}
  .nx .nx-lnrow.nx-out .nx-lnk{margin-left:0}
  .nx .nx-sumrow.nx-lnsum .nx-amt2{width:auto}
}

/* export kinds as rows */
.nx .nx-lgrow.nx-krow{align-items:center;padding:13px 0}
.nx .nx-lgrow.nx-krow .nx-sq2{width:34px;height:34px;border-radius:8px;display:grid;place-items:center}
.nx .nx-lgrow.nx-krow .nx-sq2 i[data-i]{font-size:17px}

.nx .nx-lgrow.nx-krow .nx-lacts{gap:14px}
/* 8 Oct: on phones the action sits under the text, left aligned, like the past-file rows below (was right aligned) */
@media (max-width:760px){.nx .nx-lgrow.nx-krow{flex-wrap:wrap}.nx .nx-lgrow.nx-krow .nx-lm{flex:1 0 calc(100% - 48px)}.nx .nx-lgrow.nx-krow .nx-lacts{flex:1 0 calc(100% - 48px);margin-left:48px}}

/* small screens: a text input under 16px zooms the page on iOS */
@media (max-width:480px){.nx input:not([type=checkbox]):not([type=radio]),.nx textarea,.nx select{font-size:16px}}

/* touch: 44px to aim at, glyphs unchanged. Hit areas come from a
   pseudo-element where the box has to stay small; this block sits
   last and matches the specificity of what it overrides. */
@media (hover:none){
  .nx .nx-rowacts,.nx .nx-secbar .nx-rowacts{opacity:1}
  .nx .nx-gut .nx-gico,.nx .nx-srow .nx-spick,.nx .nx-pair2 .nx-withx .nx-ico{opacity:1}
  .nx .nx-btn,.nx .nx-btn.nx-sm,.nx .nx-go{min-height:44px}
  .nx .nx-selbox,.nx .nx-sel,.nx .nx-statusctl,.nx .nx-tmenu{min-height:44px}
  .nx .nx-tab,.nx .nx-tab.nx-kb{padding-top:9px;padding-bottom:14px}
  .nx .nx-stabs .nx-t{padding-top:14px;padding-bottom:14px}
  .nx .nx-mi{min-height:44px}
  .nx .nx-ico,.nx .nx-caret{width:44px;height:44px}
  .nx .nx-kind{padding:10px 0}
  .nx .nx-tick,.nx .nx-toggle,.nx .nx-gico,.nx .nx-lnk,.nx .nx-logo{position:relative}
  .nx .nx-tick::before,.nx .nx-toggle::before,.nx .nx-gico::before,.nx .nx-lnk::before,.nx .nx-logo::before{
    content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
  .nx .nx-tick::before{left:-12px;right:-12px}
  .nx .nx-gico::before{left:-10px;right:-10px}
}

/* 29 Aug #2, single choice: the three per-answer controls are always in the row
   and take the shared disabled state when their setting is off. */
.nx .nx-arow3 .nx-aslot{flex:none;display:inline-flex;align-items:center;justify-content:center}
.nx .nx-arow3 .nx-aslot.nx-is-disabled{opacity:.4;pointer-events:none}
.nx .nx-imgslot{width:34px;height:34px;border:1px dashed var(--line-3);border-radius:5px;color:var(--faint);cursor:pointer;background:var(--paper);display:inline-grid;place-items:center}
.nx .nx-imgslot:hover{border-color:var(--blue);color:var(--blue-ink)}
.nx .nx-imgslot.nx-has{border:1px solid var(--line);background:linear-gradient(135deg,var(--img-a),var(--img-b))}
.nx .nx-imgslot.nx-has i[data-i]{color:var(--navy);opacity:.55}
.nx .nx-acode{width:52px;height:20px;line-height:20px;font-family:var(--mono);font-size:12px;color:var(--navy);border:0;background:none;padding:0;text-align:center;outline:0}
.nx .nx-arow3 .nx-aslot.nx-code{position:relative;align-self:stretch}
.nx .nx-arow3 .nx-aslot.nx-is-disabled::after{display:none}
.nx .nx-acode:disabled{color:var(--faint);pointer-events:none}
.nx .nx-imgpop{width:300px;padding:10px}
.nx .nx-imgpop .nx-big{height:200px;border-radius:6px;background:linear-gradient(135deg,var(--img-a),var(--img-b));display:grid;place-items:center;color:var(--navy);opacity:.9}
.nx .nx-imgpop .nx-big i[data-i]{font-size:34px;opacity:.5}
.nx .nx-imgpop .nx-nm{font-size:12.5px;color:var(--muted);margin:10px 0 8px;font-family:var(--mono)}
.nx .nx-imgpop .nx-acts{display:flex;gap:14px}

.nx .nx-subrow.nx-is-disabled{opacity:.4;pointer-events:none}
.nx .nx-subrow .nx-lab2{flex:1}
.nx .nx-subrow .nx-numf{height:30px}
.nx .nx-subrow .nx-numf input{width:46px;text-align:center}
.nx .nx-subrow em{font-style:normal;color:var(--muted);font-size:12.5px}
.nx .nx-cssarea{margin:8px 0 4px 31px;border:1px solid var(--line);border-radius:5px;background:var(--soft);font-family:var(--mono);font-size:12px;color:var(--muted);padding:10px 12px;min-height:72px;display:flex;gap:12px}
.nx .nx-cssarea.nx-is-disabled{opacity:.4;pointer-events:none}
.nx .nx-cssarea .nx-ln{color:var(--faint)}

.nx .nx-acols2{display:flex;align-items:center;gap:10px;padding:6px 0 4px;font-size:11px;color:var(--faint)}
.nx .nx-acols2 .nx-sp{width:15px;flex:none}
.nx .nx-acols2 .nx-colhd{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:4px;height:22px;border-radius:4px;color:var(--faint);cursor:pointer;position:relative}
.nx .nx-acols2 .nx-colhd.nx-tip::after{text-transform:none;letter-spacing:0;font-weight:400}
.nx .nx-acols2 .nx-colhd i[data-i]{font-size:15px}
.nx .nx-acols2 .nx-colhd:hover{color:var(--blue-ink)}
.nx .nx-acols2 .nx-colhd.nx-on{color:var(--blue)}
.nx .nx-acols2 .nx-colhd.nx-w18{width:18px}.nx .nx-acols .nx-colhd.nx-w34{width:34px}.nx .nx-acols .nx-colhd.nx-w52{width:52px}
.nx .nx-acols2 .nx-lbl{flex:1;color:var(--faint)}

/* import answers: lines, not a box. The area grows with the paste. */
.nx .nx-qimp{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);margin:0 0 4px}
.nx .nx-qimpta{display:block;width:100%;min-height:72px;resize:none;overflow:hidden;border:0;border-bottom:1px solid var(--line);background:none;padding:6px 0 8px;font:inherit;font-size:13.5px;line-height:22px;color:var(--navy);outline:0}
.nx .nx-qimpta::placeholder{color:var(--line-2)}
.nx .nx-qimpta:not(:disabled):hover{border-bottom-color:var(--line-3)}
.nx .nx-qimpta:focus{border-bottom-color:var(--blue)}

.nx .nx-oefield{padding:4px 0 0}
.nx .nx-oebox{border:1px solid var(--line);border-radius:6px;min-height:84px;padding:10px 12px;color:var(--faint);font-size:13.5px;background:var(--paper)}
.nx .nx-oeopt{display:flex;align-items:center;gap:7px;margin-top:10px;font-size:13px;color:var(--muted)}
.nx .nx-oeopt i[data-i]{color:var(--line-3);font-size:15px}

.nx .nx-scalepv .nx-cells{display:flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.nx .nx-scalepv .nx-cells span{flex:1;text-align:center;padding:10px 0;font-size:13.5px;color:var(--muted);border-left:1px solid var(--hair)}
.nx .nx-scalepv .nx-cells span:first-child{border-left:0}
.nx .nx-scalepv .nx-ends{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);margin-top:6px}

.nx .nx-starpv{display:flex;gap:10px;padding:8px 0 4px;color:var(--line-3)}
.nx .nx-starpv i[data-i]{font-size:30px}

.nx .nx-sldpv{padding:10px 0 0}
.nx .nx-sldpv .nx-track{position:relative;height:6px;border-radius:3px;background:var(--line)}
.nx .nx-sldpv .nx-fill{position:absolute;left:0;top:0;height:100%;border-radius:3px;background:var(--blue);opacity:.45}
.nx .nx-sldpv .nx-knob{position:absolute;top:50%;width:18px;height:18px;border-radius:50%;background:var(--blue);transform:translate(-50%,-50%);box-shadow:0 1px 3px rgba(var(--ink-rgb),.25)}
.nx .nx-sldpv .nx-ticks{position:absolute;left:0;right:0;top:12px;display:flex;justify-content:space-between}
.nx .nx-sldpv .nx-ticks span{width:1px;height:6px;background:var(--line-3)}
.nx .nx-sldpv .nx-ends{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);margin-top:22px}
.nx .nx-sldpv .nx-ends .nx-cur{color:var(--navy);font-weight:600}

.nx .nx-mediabox{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:1px dashed var(--line-3);border-radius:6px;color:var(--faint);font-size:13px}
.nx .nx-mediabox i[data-i]{font-size:28px}
.nx .nx-mediabox.nx-pick{cursor:pointer}
.nx .nx-mediabox.nx-pick:hover{border-color:var(--blue);color:var(--blue-ink)}
.nx .nx-mediabox.nx-has{border:1px solid var(--line);background:linear-gradient(135deg,var(--img-a),var(--img-b));color:var(--navy)}
.nx .nx-cjattr{margin-bottom:8px}

/* a field inside a row draws its line on the row's line (29 Aug #2 rule) */
.nx .nx-row.nx-setting .nx-ctl .nx-numf,.nx .nx-subrow .nx-numf{align-self:stretch;height:auto;position:relative;border:0;border-radius:0;background:none;padding:0 0 0 4px}
.nx .nx-row.nx-setting .nx-ctl .nx-numf::after,.nx .nx-subrow .nx-numf::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:transparent}
.nx .nx-subrow .nx-numf::after{bottom:-9px}
.nx .nx-row.nx-setting .nx-ctl .nx-numf:not(:has(input:disabled,textarea:disabled)):hover::after,.nx .nx-subrow .nx-numf:not(:has(input:disabled,textarea:disabled)):hover::after{background:var(--line-3)}
.nx .nx-row.nx-setting .nx-ctl .nx-numf:focus-within::after,.nx .nx-subrow .nx-numf:focus-within::after{background:var(--blue)}
/* the control cell of a row with a field is pinned to the full row height, no :has, no flex guesswork */
.nx .nx-row.nx-setting{align-items:center;position:relative}
.nx .nx-row.nx-setting .nx-ctl.nx-num{position:absolute;right:0;top:0;bottom:0;display:flex;align-items:stretch;margin:0;padding:0}
.nx .nx-row.nx-setting .nx-ctl.nx-num .nx-phr{align-self:stretch;display:inline-flex;align-items:stretch;height:auto}
.nx .nx-row.nx-setting .nx-ctl.nx-num .nx-phr em{align-self:center}
.nx .nx-row.nx-setting .nx-ctl.nx-num .nx-numf{align-self:stretch;height:auto;display:inline-flex;align-items:center}
.nx .nx-row.nx-setting .nx-ctl.nx-num .nx-numf::after{bottom:-1px}
.nx .nx-row.nx-setting .nx-lab{flex:1;width:auto;padding-right:120px}
.nx .nx-row.nx-setting .nx-ctl .nx-phr{align-self:stretch;display:inline-flex;align-items:center}
.nx .nx-row.nx-setting .nx-ctl .nx-numf input,.nx .nx-subrow .nx-numf input{font-size:14px;font-weight:600;color:var(--navy);text-align:center}
.nx .nx-subrow{display:flex;align-items:center;gap:10px;padding:8px 0 8px 31px;font-size:13px;color:var(--navy);border-bottom:1px solid var(--hair);position:relative}
.nx .nx-subrow.nx-is-disabled .nx-numf::after{display:none}

/* results cards for the remaining types (29 Aug #2) */
.nx .nx-stk{display:flex;height:18px;border-radius:4px;overflow:hidden;flex:1;min-width:0;gap:1px}
.nx .nx-stk span{display:flex;align-items:center;justify-content:center;height:100%;position:relative;font-size:11px;font-weight:600;color:var(--on-blue);font-variant-numeric:tabular-nums;overflow:hidden;white-space:nowrap}
.nx .nx-stk span.nx-dk{color:var(--navy)}
.nx .nx-stklg{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--muted);padding:8px 0 4px}
.nx .nx-stklg i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.nx .nx-stkrow{display:flex;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--hair)}
.nx .nx-stkrow .nx-al{flex:0 0 240px;font-size:15px;color:var(--navy);letter-spacing:-.01em;display:flex;flex-direction:column;gap:2px}
.nx .nx-stkrow .nx-al small.nx-u{font-size:12px;color:var(--faint)}
.nx .nx-stkrow .nx-an{width:76px;text-align:right;font-size:15px;font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums}
.nx .nx-stkrow .nx-an small{display:block;font-size:10.5px;font-weight:400;color:var(--faint);letter-spacing:.06em;text-transform:uppercase}
.nx .nx-stkrow .nx-an.nx-neg{color:var(--red)}
.nx .nx-stkrow .nx-dvg2.nx-sc{flex:1;height:10px}
.nx .nx-mdhead{display:flex;justify-content:space-between;padding:8px 0 0 254px;margin-right:70px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.nx .nx-npsbig{display:flex;align-items:baseline;gap:12px;padding:10px 0 4px;flex-wrap:wrap}
.nx .nx-npsbig .nx-score{font-size:34px;font-weight:700;color:var(--navy);letter-spacing:-.02em}
.nx .nx-npsbig .nx-score.nx-sm{font-size:22px;margin-left:14px}
.nx .nx-npsbig .nx-lbl{font-size:12.5px;color:var(--muted)}
.nx .nx-npsbig .nx-stkwrap{flex:1;min-width:220px;margin-left:16px}
.nx .nx-npsbig .nx-rt{margin-left:auto}
.nx .nx-starsv i[data-i]{font-size:22px;color:var(--line-2)}
.nx .nx-starsv i.nx-on i[data-i]{color:var(--blue)}
.nx .nx-starsv.nx-sm i[data-i]{font-size:14px}
.nx .nx-hist{display:flex;gap:10px;align-items:flex-end;padding:10px 0 4px}
.nx .nx-hist .nx-hb{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative}
.nx .nx-hist .nx-bar2{width:100%;height:120px;background:var(--soft);border-radius:4px;display:flex;align-items:flex-end;overflow:hidden}
.nx .nx-hist .nx-bar2 span{display:block;width:100%;background:var(--blue);border-radius:4px 4px 0 0}
.nx .nx-hist .nx-hv{font-size:14px;font-weight:600;color:var(--navy)}
.nx .nx-hist .nx-hl{font-size:11.5px;color:var(--muted);text-align:center}
.nx .nx-hmimg{position:relative;height:260px;border-radius:6px;background:linear-gradient(135deg,var(--hm-a),var(--hm-b));border:1px solid var(--line);overflow:hidden}
.nx .nx-hmimg .nx-heat{position:absolute;width:70px;height:70px;border-radius:50%;transform:translate(-50%,-50%);filter:blur(10px);opacity:.5}
.nx .nx-hmimg .nx-heat.nx-p{background:var(--green-dot)}.nx .nx-hmimg .nx-heat.nx-n{background:var(--red-dot)}
.nx .nx-hmimg .nx-heat,.nx .nx-hmimg .nx-mark{transition:opacity .25s ease}
.nx .nx-hmimg.nx-noheat .nx-heat,.nx .nx-hmimg.nx-nolikes .nx-mark.nx-p,.nx .nx-hmimg.nx-nodislikes .nx-mark.nx-n{opacity:0!important}
.nx .nx-hmimg .nx-mark{position:absolute;width:18px;height:18px;border-radius:50%;transform:translate(-50%,-50%);background:var(--paper);font-size:12px;font-weight:700;display:grid;place-items:center;box-shadow:0 1px 3px rgba(var(--ink-rgb),.3)}
.nx .nx-hmimg .nx-mark.nx-p{color:var(--green-dot)}.nx .nx-hmimg .nx-mark.nx-n{color:var(--red-dot)}
.nx .nx-hmimg .nx-hmname{position:absolute;right:10px;bottom:8px;font-family:var(--mono);font-size:11px;color:var(--muted)}
.nx .nx-hmcmts{padding-top:8px}
.nx .nx-hmc{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--hair);font-size:13.5px;color:var(--navy)}
.nx .nx-hmc .nx-mark.nx-inline{position:static;transform:none;flex:none;background:none;box-shadow:none;width:14px;font-size:14px}
.nx .nx-hmc .nx-val2{flex:1}

.nx .nx-rtip{position:fixed;z-index:60;min-width:220px;max-width:300px;padding:12px 14px;background:var(--tip-bg);color:var(--on-ink);border-radius:8px;box-shadow:0 10px 30px rgba(var(--ink-rgb),.28);opacity:0;pointer-events:none;transform:translateY(4px);transition:opacity .12s ease,transform .12s ease;font-size:12.5px;line-height:1.35}
.nx .nx-rtip.nx-on{opacity:1;transform:none}
.nx .nx-rtip .nx-rs{color:rgba(var(--on-ink-rgb),.7);margin-bottom:6px}
.nx .nx-rtip .nx-rc{display:flex;align-items:center;gap:8px;font-weight:600}
.nx .nx-rtip .nx-rc i{width:10px;height:10px;border-radius:2px;flex:none;box-shadow:0 0 0 1px rgba(var(--on-ink-rgb),.25)}
.nx .nx-rtip .nx-rv{font-size:26px;font-weight:700;letter-spacing:-.02em;margin:6px 0 8px;display:flex;align-items:baseline;gap:10px}
.nx .nx-rtip .nx-rv small{font-size:12px;font-weight:400;color:rgba(var(--on-ink-rgb),.7)}
.nx .nx-rtip .nx-rm{display:flex;height:6px;border-radius:99px;overflow:hidden;gap:1px}
.nx .nx-rtip .nx-rm span{display:block;height:100%}

/* results motion (29 Aug #2) */
@keyframes nx-rsUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes nx-rsStar{from{opacity:.2;transform:scale(.6)}to{opacity:1;transform:none}}
.nx #resView .nx-obj:not(.nx-live) .nx-bar > span,.nx #resView .nx-obj:not(.nx-live) .nx-stk > span,.nx #resView .nx-obj:not(.nx-live) .nx-hist .nx-bar2 span,.nx #resView .nx-obj:not(.nx-live) .nx-dvg2 .nx-fx{width:0!important}
.nx #resView .nx-obj:not(.nx-live) .nx-hist .nx-bar2 span{width:100%!important;height:0!important}
.nx #resView .nx-obj:not(.nx-live) .nx-hmimg .nx-mark,.nx #resView .nx-obj:not(.nx-live) .nx-hmimg .nx-heat{opacity:0}
.nx .nx-obj.nx-live{animation:nx-rsUp .5s cubic-bezier(.2,.7,.2,1) both}

.nx .nx-obj.nx-live .nx-stk{transform-origin:left}

@media (prefers-reduced-motion:reduce){.nx .nx-obj.nx-live *{animation:none!important;transition:none!important}}
.nx .nx-menu .nx-mi.nx-kb,.nx .nx-menu .nx-pk.nx-kb{background:var(--soft)}
.nx .nx-menu .nx-mi.nx-danger{color:var(--red)}
.nx .nx-caret.nx-warn{position:relative}
.nx .nx-caret.nx-warn::before{content:"";position:absolute;top:2px;right:1px;width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 2px var(--paper)}

/* survey head (29 Aug #2): two bands with rules. Name and id; then facts on the left and the
   tools on the right, where the search field's line is the band's own line. */
.nx .nx-survobj .nx-facts{padding:14px 0 0;border-bottom:1px solid var(--hair);align-items:flex-end;margin-bottom:6px}
.nx .nx-survobj .nx-facts > span{padding-bottom:14px}
.nx .nx-survobj .nx-facts .nx-rt{margin-left:auto;display:inline-flex;align-items:flex-end;gap:18px;padding-bottom:0}

.nx .nx-survobj .nx-facts .nx-rowfilter:focus-within{border-bottom-color:var(--blue)}
.nx .nx-survobj .nx-facts .nx-rowfilter input{width:240px;text-align:right}
.nx .nx-survobj .nx-facts .nx-rowfilter{margin:0 0 -1px;height:36px;padding:0 0 8px;align-items:center;border:0;border-bottom:1px solid var(--line);border-radius:0;flex-direction:row-reverse}
.nx .nx-survobj .nx-facts .nx-selbox{margin-bottom:9px}

.nx .nx-label .nx-selbox.nx-kindsel{margin-left:14px;height:26px;font-size:12.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--navy);border:1px solid var(--line);border-radius:5px;padding:0 6px 0 9px}
.nx .nx-label .nx-rt{display:inline-flex;align-items:center;gap:16px}
.nx .nx-label .nx-eyefact{font-size:12.5px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted);margin-left:18px}
.nx .nx-label .nx-eyefact b{color:var(--navy);font-weight:600}
.nx .nx-survobj .nx-ident{align-items:center}
.nx .nx-survobj .nx-ident .nx-caret{align-self:center;margin-top:1px}
.nx .nx-survobj .nx-ident .nx-oid{align-self:center}

/* the one / all switch on the audience eyebrow: quiet words, the active one underlined on the eyebrow's own rule */
.nx .nx-label .nx-rt .nx-eyemode{display:inline-flex;gap:18px;align-self:stretch;align-items:stretch;margin-left:6px}
.nx .nx-label .nx-rt .nx-eyemode span{display:inline-flex;align-items:center;font-size:13.5px;font-weight:400;color:var(--label);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;padding:0 0 0}
.nx .nx-label .nx-rt .nx-eyemode span:hover{color:var(--blue-ink)}
.nx .nx-label .nx-rt .nx-eyemode span.nx-on{color:var(--navy);font-weight:500;border-color:var(--blue)}
.nx .nx-label .nx-rt{align-self:stretch}

@media (max-width:600px){
  .nx .nx-ss .nx-lb{flex-wrap:wrap;height:auto;min-height:40px;row-gap:6px;padding:6px 0}
  .nx .nx-ss .nx-lb .nx-rt{flex:1 0 100%;justify-content:flex-start;gap:12px}
  .nx .nx-ss .nx-lb .nx-acols2{margin-left:0}
  /* stacked rows: label on its own line, the bar takes the full width under it */
  .nx .nx-stkrow{flex-wrap:wrap;gap:8px 12px}
  .nx .nx-stkrow .nx-al{flex:1 0 100%}
  .nx .nx-stkrow .nx-stk,.nx .nx-stkrow .nx-dvg2.nx-sc{flex:1 1 auto;min-width:0}
  .nx .nx-mdhead{padding-left:0;margin-right:70px}
  /* survey head: the search drops to its own line, full width */
  .nx .nx-survobj .nx-facts .nx-rt{flex:1 0 100%;justify-content:flex-start}
  .nx .nx-survobj .nx-facts .nx-rowfilter{flex:1;flex-direction:row}
  .nx .nx-survobj .nx-facts .nx-rowfilter input{width:100%;text-align:left}
  /* eyebrows on a phone: word, chevron, the kind selector on the first line; the state line under it; no last-edited */
  .nx .nx-label{padding:0 0 10px}
  .nx .nx-label .nx-cv{order:0;margin-left:-4px}
  .nx .nx-label .nx-selbox.nx-kindsel{margin-left:auto}
  .nx .nx-label .nx-eyefact{display:none}
  .nx .nx-label > .nx-rt{margin-top:6px}
  /* the language head: menu stays on the name line */
  .nx .nx-survobj .nx-ohead{flex-wrap:nowrap}
  .nx .nx-survobj .nx-otools{flex:none;margin-left:auto}
  /* section and block bars: name, count and the chevron on line one; the actions and the note under it */
  .nx .nx-secbar{flex-wrap:wrap;row-gap:4px}
  .nx .nx-secbar .nx-ct{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .nx .nx-secbar .nx-cv{order:1;margin-left:auto}
  .nx .nx-secbar .nx-rowacts{order:2;flex:1 0 100%;opacity:1;justify-content:flex-start;margin-left:0}
  .nx .nx-secbar .nx-bnote{order:3;flex:1 0 100%}
}

/* ---------- 2 Sep: images in results cards ---------- */
.nx .nx-rthumb{width:32px;height:32px;flex:none;border-radius:5px;border:1px solid var(--line);background:linear-gradient(135deg,var(--img-a),var(--img-b));display:inline-grid;place-items:center;color:var(--navy);cursor:pointer;vertical-align:middle}
.nx .nx-rthumb i[data-i]{font-size:14px;opacity:.55}
.nx .nx-rthumb:hover{border-color:var(--blue)}
.nx .nx-rthumb.nx-none{visibility:hidden;cursor:default}
.nx .nx-stklg .nx-rthumb.nx-sm{width:20px;height:20px;border-radius:4px;margin-right:6px}
.nx .nx-stklg > span{display:inline-flex;align-items:center}
/* 4 Sep: grid with nominal columns in Compare, a statement head above its grid-column rows */
.nx .nx-stmthead{grid-column:1/-1;font-size:13.5px;font-weight:600;color:var(--navy);padding:16px 0 2px}
.nx .nx-cgrid.nx-crow.nx-sub .nx-lab{padding-left:16px;color:var(--label)} /* the chip only, not the thumbnail inside it */
.nx .nx-stklg .nx-rthumb.nx-sm i[data-i]{font-size:10px;margin:0;width:1em;height:1em;display:inline-flex;border-radius:0} /* the legend's swatch rule also matched this i; undo it */
.nx .nx-rthumb.nx-q{width:144px;height:96px}
.nx .nx-rthumb.nx-q i[data-i]{font-size:26px}
.nx .nx-qimg{padding:10px 0 2px}
.nx .nx-arow .nx-ln2 .nx-rthumb{align-self:center}
.nx .nx-cgrid .nx-lab.nx-wi,.nx .nx-brow2 .nx-bl.nx-wi{display:flex;flex-direction:row;align-items:center;gap:10px}
.nx .nx-stkrow .nx-al.nx-wi{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;align-items:center}
.nx .nx-stkrow .nx-al.nx-wi .nx-rthumb{grid-row:1/3}
.nx .nx-stkrow .nx-al.nx-wi small.nx-u{grid-column:2}
.nx .nx-cgrid .nx-lab.nx-wi .nx-lt2{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-width:0}
.nx .nx-acodeq{font-family:var(--mono);font-size:12.5px;color:var(--muted)}
@media (max-width:480px){.nx .nx-rthumb{width:24px;height:24px}.nx .nx-rthumb i[data-i]{font-size:11px}.nx .nx-rthumb.nx-q{width:120px;height:80px}}

/* ---------- 3 Sep: open ended answers as a table ---------- */
.nx .nx-oet{display:grid;grid-template-columns:88px 132px minmax(0,1fr) 28px;align-items:center;column-gap:14px;padding:12px 0;border-bottom:1px solid var(--hair);font-size:14px;color:var(--navy)}
.nx .nx-oet.nx-head{padding:16px 0 7px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.nx .nx-oet .nx-mono{font-size:12.5px;color:var(--muted)}
.nx .nx-oet .nx-when{font-size:12.5px;color:var(--muted);white-space:nowrap}
.nx .nx-oet .nx-txt{line-height:1.45;min-width:0;overflow-wrap:anywhere}
.nx .nx-oepg{display:flex;align-items:center;justify-content:flex-end;gap:6px;padding:10px 0 4px;font-size:12.5px;color:var(--muted)}
.nx .nx-oepg .nx-oeper{display:inline-flex;align-items:center;gap:8px;margin-right:14px}
.nx .nx-oepg .nx-oecount{margin-right:10px;font-variant-numeric:tabular-nums}
.nx .nx-oepg .nx-ico.nx-off{color:var(--line-3);cursor:default;pointer-events:none}



.nx .nx-oesum{padding-bottom:8px}
.nx .nx-oesum .nx-dhelp{margin-bottom:4px}
@media (max-width:480px){.nx .nx-oet{grid-template-columns:64px minmax(0,1fr) 28px}.nx .nx-oet .nx-when{display:none}.nx .nx-oepg{flex-wrap:wrap;justify-content:flex-start}.nx .nx-oepg .nx-oeper{margin-right:0;width:100%}}


/* ---------- 5 Sep: field metrics ---------- */



.nx .nx-chart.nx-cjs{padding:12px 0 4px}
.nx .nx-cjsleg{display:flex;justify-content:center;gap:22px;font-size:12.5px;color:var(--label);padding:0 0 10px}
.nx .nx-cjsleg span{display:inline-flex;align-items:center;gap:7px}
.nx .nx-cjsleg i{width:10px;height:10px;border-radius:50%;display:inline-block}
.nx .nx-cjsleg i.nx-tgi{width:16px;height:0;border-top:2px dashed var(--faint);border-radius:0}
.nx .nx-cjsleg i.nx-pri{width:16px;height:0;border-top:2px dashed var(--blue);border-radius:0}
.nx .nx-cjsleg .nx-lgt{cursor:pointer;padding:2px 6px;margin:-2px -6px;border-radius:var(--r)}
.nx .nx-cjsleg .nx-lgt:hover{background:var(--soft)}
.nx .nx-cjsleg .nx-lgt.nx-off{color:var(--faint);text-decoration:line-through}
.nx .nx-cjsleg .nx-lgt.nx-off i{background:var(--line-3)!important}
.nx .nx-cjsbox{position:relative}
.nx .nx-cjsbox svg{display:block;width:100%;height:230px;overflow:visible}
.nx .nx-cjs .nx-ln{fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.nx .nx-cjs .nx-ln.nx-dash{stroke-dasharray:5 6}
.nx .nx-cjsbox .nx-cdot{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--c);border:1.5px solid var(--on-blue);transform:translate(-50%,-50%);pointer-events:none;box-sizing:content-box}
.nx .nx-cjsbox .nx-cdot.nx-fc{background:var(--on-blue);border-color:var(--c)}
.nx .nx-cjsbox .nx-cdot.nx-big{width:10px;height:10px}
.nx .nx-cjs .nx-gl{stroke:var(--hair)}
.nx .nx-cjs .nx-tg{stroke:var(--faint);stroke-width:1.5;stroke-dasharray:6 6}
.nx .nx-cjsbox .nx-ax{position:absolute;font-size:11px;color:var(--faint);line-height:1;white-space:nowrap;pointer-events:none}
.nx .nx-cjsbox .nx-ax.nx-yl{transform:translate(-100%,-50%)}
.nx .nx-cjsbox .nx-ax.nx-yr{transform:translateY(-50%)}
.nx .nx-cjsbox .nx-ax.nx-xl{bottom:8px;transform:translateX(-50%)}
.nx .nx-cjsbox .nx-ax.nx-tgl{color:var(--muted)}
.nx .nx-cjsbox .nx-hit{position:absolute;top:18px;bottom:34px;width:24px;margin-left:-12px;cursor:crosshair;touch-action:none}
.nx .nx-cjsbox{touch-action:pan-y}
.nx .nx-cband{position:absolute;top:0;bottom:30px;background:rgba(var(--blue-rgb),.08);border-left:1px solid rgba(var(--blue-rgb),.35);border-right:1px solid rgba(var(--blue-rgb),.35);pointer-events:none}
.nx .nx-cread{display:inline-flex;align-items:center;gap:6px;margin-left:8px;padding:2px 4px 2px 10px;border:1px solid var(--line);border-radius:99px;color:var(--navy);font-weight:500}
.nx .nx-cread .nx-ico{width:22px;height:22px}
.nx .nx-chandle{position:absolute;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--paper);border:1px solid var(--line-3);color:var(--muted);box-shadow:0 1px 3px rgba(var(--ink-rgb),.12);cursor:grab;touch-action:none;z-index:2}
.nx .nx-chandle:active{cursor:grabbing}
.nx .nx-chandle.nx-y{transform:translate(-50%,-50%)}
.nx .nx-chandle.nx-x{bottom:22px;transform:translate(-50%,50%)}
.nx .nx-chandle i[data-i]{font-size:13px}
.nx .nx-cendline{position:absolute;top:18px;bottom:34px;border-left:1.5px dashed var(--faint);pointer-events:none;transform:translateX(-0.5px)}
.nx .nx-cendlab{top:2px;transform:translateX(-50%);color:var(--muted)}
.nx .nx-scenrow{display:flex;align-items:center;gap:10px;height:56px;padding:0}
.nx .nx-scenrow .nx-wt{font-size:14px;color:var(--navy);white-space:nowrap}
.nx .nx-scenrow .nx-numf{height:36px}
.nx .nx-scenrow .nx-selbox{height:36px}
.nx .nx-scenrow .nx-rt{margin-left:auto;display:inline-flex;align-items:center;gap:18px}
.nx .nx-scenrow .nx-lnk.nx-off{color:var(--faint);cursor:default}
@media (max-width:760px){.nx .nx-scenrow{height:auto;flex-wrap:wrap;row-gap:8px;padding:10px 0}.nx .nx-scenrow .nx-rt{flex:1 0 100%;margin-left:0;justify-content:flex-end}}













.nx .nx-cjsbox .nx-hit::after{bottom:auto;top:-4px}

.nx .nx-fcline{display:flex;align-items:center;gap:14px;padding:10px 0 2px;font-size:13.5px;color:var(--navy)}
.nx .nx-fcline b.nx-late{color:var(--amber)}
.nx .nx-fcline .nx-rt{margin-left:auto;display:inline-flex;align-items:center;gap:12px}

.nx .nx-hcols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:44px}
.nx .nx-hcols .nx-sublabel{margin-top:8px}
/* against the estimate and where people are, one grid for both */
.nx .nx-winrow{display:flex;justify-content:flex-end;padding:14px 0 0}
.nx .nx-estl{display:grid;grid-template-columns:minmax(0,1fr) 72px 72px 78px;align-items:center;column-gap:14px;min-height:44px;border-bottom:1px solid var(--hair);font-size:13.5px;color:var(--navy)}
.nx .nx-estl.nx-head{min-height:30px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:600}
.nx .nx-estl.nx-head.nx-oh{grid-template-columns:minmax(0,1fr) 44px 46px;column-gap:10px}
.nx .nx-estl .nx-r{text-align:right}
.nx .nx-estl .nx-ml{display:inline-flex;align-items:center;gap:10px}
.nx .nx-estl .nx-ml i[data-i]{font-size:14px;color:var(--faint)}
.nx .nx-estl .nx-est{text-align:right;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.nx .nx-estl .nx-n{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.nx .nx-sevchip{display:inline-block;justify-self:end;min-width:0;text-align:center;box-sizing:border-box;padding:2px 8px;border-radius:99px;font-size:12px;font-weight:600}
.nx .nx-sevchip.nx-ok{background:none;color:var(--green-ink)}.nx .nx-sevchip.nx-warn{background:var(--sev-warn-bg);color:var(--sev-warn-ink)}.nx .nx-sevchip.nx-bad{background:var(--sev-bad-bg);color:var(--red)}
.nx .nx-sublabel .nx-outbar.nx-hd{display:flex;flex:1;height:10px;border-radius:3px;overflow:hidden;margin:0 14px 0 18px}
.nx .nx-sublabel .nx-outbar.nx-hd span{display:block;height:100%}
.nx .nx-hcols .nx-sublabel .nx-rt{margin-left:0}
.nx .nx-outrow{display:grid;grid-template-columns:10px minmax(0,1fr) 44px 46px;align-items:center;column-gap:10px;min-height:44px;border-bottom:1px solid var(--hair);font-size:13.5px;color:var(--navy)}
.nx .nx-outrow i{width:10px;height:10px;border-radius:2px;display:inline-block}
.nx .nx-outrow .nx-on{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.nx .nx-outrow b{text-align:right;font-weight:600}
@media (max-width:600px){.nx .nx-estl{grid-template-columns:minmax(0,1fr) 56px 56px 64px;column-gap:8px}.nx .nx-sevchip{min-width:44px;padding:2px 6px}}
.nx .nx-notice.nx-ok{color:var(--green-ink)}
.nx .nx-tqgrp{padding:8px 0 14px}
.nx .nx-tqhead{display:grid;grid-template-columns:minmax(0,1fr) 90px 90px 110px;column-gap:14px;align-items:end;padding:8px 0 6px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.nx .nx-tqname{color:var(--navy);font-size:12px}
.nx .nx-tqhead .nx-tqk{text-align:right}
.nx .nx-tqcell{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 90px 90px 110px;column-gap:14px;align-items:center;padding:10px 0 14px;border-bottom:1px solid var(--hair)}

.nx .nx-tqcell .nx-tqn{text-align:right;font-size:14px;font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums}
.nx .nx-tqcell .nx-tqn.nx-qok{color:var(--green-ink)}
.nx .nx-tqcell .nx-tqn.nx-tqav{color:var(--muted);font-weight:500;display:inline-flex;justify-content:flex-end;align-items:center;gap:5px}
.nx .nx-tqcell .nx-tqn.nx-tqav i[data-i]{font-size:14px}
.nx .nx-tqbar{position:absolute;left:0;right:0;bottom:-1px;height:6px;border-radius:99px;background:var(--soft);overflow:hidden}
.nx .nx-tqbar span{display:block;height:100%}
@media (max-width:900px){.nx .nx-hcols{grid-template-columns:1fr;row-gap:16px}}
@media (max-width:600px){.nx .nx-tqhead,.nx .nx-tqcell{grid-template-columns:minmax(0,1fr) 60px 60px 80px;column-gap:8px}.nx .nx-cjsbox svg{height:190px}}

/* ---------- 15 Sep: long labels, aligned figures ----------
   Every list now carries at least one label long enough to wrap. Labels wrap, figures keep their column.
   Checked by measurement at 1440 and 390: figure text edges line up across the rows of each list. */
/* audience list: the metric strip is a set of fixed columns, so every row lines up with the one above */
@media (min-width:761px){
  .nx .nx-lrow .nx-mets > .nx-met{box-sizing:border-box;width:164px;flex:none}
  .nx .nx-lrow .nx-mets > .nx-met:first-child{width:138px}
  .nx .nx-lrow .nx-mets .nx-grp2 .nx-met{box-sizing:border-box;width:112px;flex:none}
  .nx .nx-lrow .nx-mets .nx-grp2 .nx-met:last-child{width:106px}
}
/* dashboard audience lines: the share column is wide enough for 100%, the name gives way first */
.nx .nx-aline .nx-apc{width:56px}
.nx .nx-aline .nx-anm{min-width:0;white-space:normal;text-overflow:clip;line-height:1.4}
.nx .nx-aline .nx-ico{flex:none}
/* dashboard projects: the name wraps, the id and the status keep their places */
.nx .nx-prow2 .nx-ph3 .nx-onm{white-space:normal;text-overflow:clip;min-width:0;line-height:1.3}
.nx .nx-prow2 .nx-ph3 .nx-oid,.nx .nx-prow2 .nx-pst{flex:none}
/* against the estimate: every chip hugs its text with the same padding, the plain green ones included,
   so the figures end on one edge */
.nx .nx-estl .nx-ml{align-items:flex-start}
.nx .nx-estl .nx-ml i[data-i]{margin-top:3px}
/* table heads on a phone: a head wider than its column grows to the left, never into its neighbour */
.nx .nx-estl.nx-head .nx-r,.nx .nx-tqhead .nx-tqk{display:flex;justify-content:flex-end;white-space:nowrap}
@media (max-width:600px){
  .nx .nx-sevchip{min-width:0;padding:2px 6px}
  .nx .nx-estl.nx-head,.nx .nx-tqhead{letter-spacing:.04em}
  .nx .nx-tqhead,.nx .nx-tqcell{grid-template-columns:minmax(0,1fr) 72px 68px 80px}
}
/* a quota cell chip can be a long region name: it wraps inside the chip column */


/* survey rows on a phone: the question takes its own line with the chevron, the facts sit under it */
@media (max-width:760px){
  .nx .nx-qrow{row-gap:6px}
  .nx .nx-qrow .nx-qt{flex:1 1 0;min-width:calc(100% - 40px);order:0}
  .nx .nx-qrow .nx-cv{order:1;margin-left:auto}
  .nx .nx-qrow .nx-qid{order:2}
  .nx .nx-qrow .nx-rowflag,.nx .nx-qrow .nx-qcount{order:3}
  .nx .nx-qrow .nx-rowacts{order:4;margin-left:auto}
}

/* ---------- 15 Sep #2: small phones, the project head, sticky Results menu, the help bubble ---------- */
/* screening rows on a phone: the same two lines as the survey rows (question and chevron, then id and count) */
@media (max-width:760px){
  .nx .nx-qrow .nx-tgt,.nx .nx-qrow .nx-feas,.nx .nx-qrow .nx-setcount{order:3}
}
/* the header on phones under 380px: tighter gaps, the bell and the avatar always on screen */
@media (max-width:380px){
  .nx .nx-topbar{gap:8px}
  .nx .nx-topbar > .nx-spacer{display:none}
  .nx .nx-topbar > #bellSlot{margin-left:auto}
  .nx .nx-topbar > .nx-tmenu{min-width:0;flex:0 1 auto;overflow:hidden;white-space:nowrap}
}
@media (max-width:340px){
  .nx .nx-topbar > .nx-tmenu{font-size:13px}
}
/* the project head on a phone: the public links icon sits on the title's first line, no empty band */
@media (max-width:760px){
  .nx .nx-phead{align-items:flex-start;column-gap:12px}
  .nx .nx-phead h1{flex:1 1 0;min-width:0}
  .nx .nx-phead > .nx-tab.nx-kb{height:44px;align-items:center;padding:0;margin:-10px 0}
  .nx .nx-phead > .nx-tabs{flex:1 0 100%}
}
/* Results: the sub-tabs stay under the top of the screen while you scroll; on a desktop the view row too */
.nx #resView > .nx-subtabs{position:sticky;top:0;z-index:15;background:var(--paper);margin-top:10px;padding-top:12px}
@media (min-width:761px){
  .nx #resView > .nx-subtabs{height:46px;box-sizing:border-box}
  
}
/* the help bubble lifts above whatever footer is showing (--nx-footlift is measured by the script) */
@media (max-width:600px){
  .nx .nx-helpfab{width:40px;height:40px;bottom:calc(14px + var(--nx-footlift, 0px))}
  .nx .nx-helpfab i[data-i]{font-size:18px}
  .nx .nx-helpfab .nx-dot2{top:7px;right:7px}
  .nx .nx-helpwin{bottom:calc(8px + var(--nx-footlift, 0px))}
}
/* ---------- 15 Sep: dashboard head ----------
   Title, then the tabs row with Filter and search at its right end, closed by the project head's rule. */
.nx .nx-dhead{border-bottom:1px solid var(--line)}
.nx .nx-dhead .nx-hi{padding:30px 0 18px}
.nx .nx-dtabs{display:flex;align-items:flex-end;gap:24px}
.nx .nx-dtabs .nx-tabs{margin-left:-12px}
.nx .nx-dtools{margin-left:auto;display:flex;align-items:flex-end;gap:18px}
.nx .nx-dtools .nx-addfilt{font-size:13px;line-height:18px;padding:1px 0;margin-bottom:16px} /* same size, line and bottom as the search input, so the two share a baseline */
.nx .nx-dtools .nx-rowfilter input{line-height:18px}
.nx .nx-dtools .nx-rowfilter{margin:0 0 -1px;height:auto;padding-bottom:16px}
.nx .nx-dhead + .nx-dash .nx-subkinds{padding:14px 0 0}
@media (max-width:760px){
  .nx .nx-dhead{border-bottom:0}
  .nx .nx-dhead .nx-hi{padding:18px 0 12px}
  .nx .nx-dtabs{flex-wrap:wrap;gap:0}
  .nx .nx-dtabs .nx-tabs{margin-left:-10px;width:calc(100% + 10px)}
  .nx .nx-dtools{order:2;flex:1 0 100%;align-items:center;margin:0;padding:8px 0 0;gap:14px;border-top:1px solid var(--line)}
  .nx .nx-dtools .nx-rowfilter{order:-1;flex:1 1 auto;width:auto}
  .nx .nx-dtools .nx-addfilt{flex:none;align-self:flex-end;margin-bottom:17px}
  .nx .nx-dtools .nx-rowfilter{margin:0;height:38px}
}

/* 15 Sep: project rows breathe. More room above the name, the progress line clear of the facts,
   and the name one step below the project head's 18px so fifteen of them read calm */
.nx .nx-prow2 .nx-facts{padding-bottom:18px}
.nx .nx-prow2 .nx-ph3 .nx-onm{font-size:16px}
@media (max-width:760px){.nx .nx-prow2 .nx-facts{padding-bottom:16px}}

/* 15 Sep: the billing states read as sub-tabs (underline on the picked one, a rule under the row),
   and a warning in the facts sits on the facts' baseline */
.nx .nx-dhead + .nx-dash .nx-subkinds,.nx .nx-subkinds{align-items:flex-end;padding-top:14px;border-bottom:1px solid var(--line)}
.nx .nx-subkinds .nx-skind{padding-bottom:10px;margin-bottom:-1px;border-bottom:2px solid transparent}
.nx .nx-subkinds .nx-skind.nx-on{border-bottom-color:var(--blue)}
.nx .nx-facts .nx-feas{align-items:baseline}
.nx .nx-facts .nx-feas i[data-i]{align-self:center}
@media (max-width:760px){.nx .nx-subkinds{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;white-space:nowrap}.nx .nx-subkinds::-webkit-scrollbar{display:none}.nx .nx-subkinds .nx-skind{flex:none}}

/* 15 Sep: metric values one step down (16 to 14px), so the audience name leads: name 18, values 14,
   the completes line 13, labels 12 */
.nx .nx-met .nx-n2,.nx .nx-mets .nx-met .nx-n2{font-size:14px}
@media (max-width:760px){.nx .nx-met .nx-n2,.nx .nx-mets .nx-met .nx-n2{font-size:14px}}

/* ---------- 15 Sep: icons sit on the first line of their label ----------
   A row whose label can wrap aligns on the first baseline; its icons are nudged by a fixed, measured
   amount so their centre meets the centre of that first line, whether the label wraps or not. */
.nx .nx-aline > .nx-flag,.nx .nx-aline > .nx-ico{position:relative}
.nx .nx-aline > .nx-ico{top:3px}
.nx .nx-pickrow.nx-bhead{align-items:baseline}
.nx .nx-pickrow.nx-bhead > .nx-flag{position:relative;top:1px}
.nx .nx-pickrow.nx-bhead > .nx-cv{position:relative;top:3.5px}
.nx .nx-lnrow .nx-n1{align-items:baseline}
.nx .nx-lnrow .nx-n1 > .nx-flag{position:relative;top:1px}
.nx .nx-arow3:has(> .nx-val2.nx-edit){align-items:flex-start}
.nx .nx-arow3:not(:has(> .nx-val2.nx-edit)) > .nx-gr{position:relative;top:2.7px}
.nx .nx-arow3 > .nx-val2.nx-edit{align-items:flex-start;padding-top:7px}
.nx .nx-arow3:has(> .nx-val2.nx-edit) > .nx-gr{margin-top:8.5px}
.nx .nx-arow3:has(> .nx-val2.nx-edit) > .nx-ico{margin-top:3px}
.nx .nx-arow .nx-ln2 .nx-rthumb{align-self:baseline;position:relative;top:1.5px}
.nx .nx-xtnote i[data-i]{align-self:baseline;position:relative;top:2.5px}
.nx .nx-nqans > .nx-ico{position:relative;top:6px}
.nx .nx-row .nx-ctl > .nx-cv{align-self:flex-start;margin-top:3px}
.nx .nx-tab.nx-kb i[data-i]{position:relative;top:-2.7px}
.nx .nx-shd .nx-ttl > span.nx-nameinput.nx-id + .nx-caret{position:relative;top:-6px}
.nx .nx-scrl .nx-tick{align-items:center}
.nx .nx-row.nx-setting > .nx-si{align-self:flex-start;margin-top:1.5px}
@media (max-width:760px){
  .nx .nx-tab.nx-kb i[data-i]{top:0}
  .nx .nx-arow .nx-ln2 .nx-rthumb{top:0}
  .nx .nx-arow3:has(> .nx-val2.nx-edit) > .nx-gr{margin-top:8px}
  .nx .nx-qrow > .nx-cv,.nx .nx-qrow > .nx-qt{align-self:flex-start}
  .nx .nx-qrow > .nx-cv{margin-top:1px}
}

/* ---------- 15 Sep: feasibility table and list rhythm ----------
   Now is a plain row like the scenarios; a typed figure's underline sits on its row's line; every row
   folds open its own breakdown. Project rows and audience rows share one rhythm: 48px from the line
   above to the name, 22px from the last content to the line below (36 and 18 on a phone). */
.nx .nx-fsrow > *{display:flex;align-items:center}
.nx .nx-fsrow .nx-fc{justify-content:flex-end}
.nx .nx-fsrow.nx-cur{background:none;margin:0;padding:0;border-radius:0;border-bottom-color:var(--hair)}
.nx .nx-fsrow .nx-fold2,.nx .nx-fshead .nx-fold2{width:16px;flex:none;color:var(--faint);font-size:15px}
.nx .nx-fsrow .nx-fold2{transition:transform .15s ease;align-self:center}
.nx .nx-fsrow.nx-open .nx-fold2{transform:rotate(90deg)}
.nx .nx-fsrow .nx-fc .nx-numf{height:auto;align-self:stretch;width:100%;justify-content:flex-end;border:0;border-bottom:1px solid var(--line);border-radius:0;margin-bottom:-1px;background:none;padding:0}
.nx .nx-fsrow .nx-fc .nx-numf:focus-within{border-bottom-color:var(--blue);box-shadow:none}
.nx .nx-fsrow .nx-fc .nx-numf input{width:100%;height:auto;border:0;background:none;padding:0;text-align:right;font-size:13px;font-weight:600;color:var(--navy);box-shadow:none}
.nx .nx-fsbrk{padding:6px 0 14px 28px;border-bottom:1px solid var(--hair)}
@media (max-width:760px){
  .nx .nx-fsrow .nx-fold2{order:0}
  .nx .nx-fsbrk{position:sticky;left:0;width:calc(100vw - 32px);box-sizing:border-box;padding-left:0}
  /* phones: the answer takes a line of its own, the figures and the bar sit under it on one line */
  .nx .nx-fsbrk .nx-fbrow{flex-wrap:wrap;row-gap:4px}
  .nx .nx-fsbrk .nx-fbrow .nx-fbn{width:100%;flex:1 0 100%;white-space:normal;line-height:1.3}
  .nx .nx-fsbrk .nx-fbrow .nx-track{flex:1 1 60px}
  .nx .nx-fsbrk .nx-fbrow .nx-fbq{width:152px}
}
.nx .nx-lrow{padding-top:45px;padding-bottom:15px}
.nx .nx-lrow > .nx-ohead{padding-top:0}
.nx .nx-prow2 .nx-facts{padding-bottom:var(--pr-b,20px)}
@media (max-width:760px){
  .nx .nx-prow2{padding-top:36px}
  .nx .nx-lrow{padding-top:33px;padding-bottom:13px}
  .nx #feasView .nx-lrow{padding-bottom:11px}
  .nx .nx-prow2 .nx-facts{padding-bottom:var(--pr-bm,16px)}
}

/* 15 Sep: the closed slider casts no shadow (it bled 40px into the page's right edge); the close
   button stays on the title row on a phone, the only tool there is the close */
.nx .nx-slider:not(.nx-on){box-shadow:none}
@media (max-width:760px){
  .nx .nx-shd.nx-wide{grid-template-columns:minmax(0,1fr) auto}
  .nx .nx-shd.nx-wide > .nx-tz{grid-column:2;grid-row:1}
  .nx .nx-shd.nx-wide > .nx-sub{grid-column:1/3;grid-row:2}
  .nx .nx-slider.nx-pnl{width:100vw} /* panels were 96vw, a strip of the page showed on the left */
}

/* 15 Sep: notification rows sit on the title's first line when a title wraps */
.nx .nx-nrow .nx-ndot{align-self:start;margin-top:8px}
.nx .nx-nrow .nx-nt{align-items:flex-start;align-self:start}
.nx .nx-nrow .nx-nt > .nx-nsev{margin-top:3.5px}
.nx .nx-nrow .nx-nright{margin-top:-2.5px}

/* 15 Sep: the scenario underline is drawn at the row's line, not by a stretched box with a negative
   margin (Safari sizes that one pixel taller); number keyboard on phones */
.nx .nx-fsrow .nx-fc .nx-numf{position:relative;border-bottom:0;margin-bottom:0}
.nx .nx-fsrow .nx-fc .nx-numf::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--line)}
.nx .nx-fsrow .nx-fc .nx-numf:focus-within::after{background:var(--blue)}

/* 15 Sep: row line and field underline are drawn the same way (a 1px box at the row's bottom edge),
   so Safari snaps them to the same device pixel; a border and a positioned box could land a pixel apart */
.nx .nx-fsrow,.nx .nx-fsrow.nx-cur{position:relative;border-bottom:0}
.nx .nx-fsrow::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--hair);pointer-events:none}
.nx .nx-fsrow:last-of-type::before{display:none}
.nx .nx-fsrow .nx-fc .nx-numf::after{bottom:0;z-index:1}
.nx .nx-fsrow .nx-fc .nx-numf input{-webkit-appearance:none;appearance:none;margin:0;border-radius:0}

/* 15 Sep: quota cell rows. Every cell sits on one baseline (chips, panel count, the two figures,
   the menu), each figure keeps its own underline on the row's line, right columns keep a gap, and
   on touch screens the underlines show at rest because there is no hover to reveal them */
.nx .nx-agrid td,.nx .nx-agrid td.nx-nin{vertical-align:baseline}
.nx .nx-agrid td:not(.nx-nin){padding-bottom:0}
.nx .nx-agrid td .nx-cell{padding:0;flex-wrap:nowrap}
.nx .nx-agrid td .nx-num3{vertical-align:baseline}
.nx .nx-agrid th.nx-r,.nx .nx-agrid td.nx-r{padding-left:16px}
.nx .nx-agrid td .nx-ico{position:relative;top:4.5px}
@media (hover:none),(max-width:760px){
  .nx .nx-agrid td .nx-num3:not(:focus){border-bottom-color:var(--line)}
}
@media (max-width:760px){
  .nx .nx-agrid td.nx-r .nx-num3{min-width:44px}
  .nx .nx-agrid th.nx-r,.nx .nx-agrid td.nx-r{padding-left:8px}
}

/* ---------- 15 Sep: header, quiet version ----------
   Left: logo, then the project switcher. Right: Access next, New project (outlined), help, the bell,
   and one account button (avatar and chevron). The bar is 16px lower than before. */
.nx .nx-topbar .nx-logo{border-right:0;padding-right:6px}
.nx .nx-topbar .nx-btn.nx-sec{height:32px;padding:0 12px}
.nx .nx-topbar .nx-acct{gap:8px;padding:0}
.nx .nx-topbar .nx-acct .nx-av{flex:none}
@media (max-width:760px){
  .nx .nx-topbar{gap:12px}
  .nx .nx-topbar .nx-btn.nx-sec{width:40px;height:40px;flex:none;padding:0;justify-content:center}
  .nx .nx-topbar .nx-btn.nx-sec i[data-i]{margin:0}
  .nx .nx-topbar > .nx-spacer{display:block}
  .nx .nx-topbar > #bellSlot{margin-left:0}
}
@media (max-width:420px){
  .nx .nx-topbar{gap:10px}
}
@media (max-width:380px){
  .nx .nx-topbar{gap:8px}
  .nx .nx-topbar .nx-acct > i[data-i]{display:none}
}
/* the switcher list: status dot, the name on one line, the id on the right */
.nx .nx-menu .nx-pmi{gap:10px}
.nx .nx-menu .nx-pmi .nx-dot{width:7px;height:7px;border-radius:50%;flex:none}
.nx .nx-menu .nx-pmi .nx-pnm{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nx .nx-menu .nx-pmi .nx-oid{flex:none;margin-left:8px}
.nx .nx-menu .nx-pmi.nx-on .nx-pnm{font-weight:600}
.nx .nx-menu .nx-pnone{color:var(--muted);cursor:default}

/* 16 Sep: CPI and total spent are money, so the pair on the right is right-aligned, label and value,
   ending on the column edge (on a phone the strip is a two-column grid and stays left) */
@media (min-width:761px){
  .nx .nx-mets .nx-grp2 .nx-met{text-align:right;align-items:flex-end}
  .nx .nx-mets .nx-grp2 .nx-met .nx-v{justify-content:flex-end}
}

/* 16 Sep: the Results image lightbox shows the whole image, fitted to the screen; ticks pop only when clicked */
.nx .nx-tick.nx-on i[data-i]{animation:none}
.nx .nx-tick.nx-on.nx-pop i[data-i]{animation:nx-slTick .18s cubic-bezier(.2,.7,.3,1)}
.nx .nx-modal.nx-lightbox{width:auto;max-width:92vw;padding:0 16px 16px}
.nx .nx-lightbox .nx-lbhead{display:flex;align-items:center;gap:12px;height:52px}
.nx .nx-lightbox .nx-lbname{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--muted)}
.nx .nx-lightbox .nx-lbbody{display:flex;justify-content:center}
.nx .nx-lightbox .nx-lbbody img{display:block;max-width:calc(92vw - 32px);max-height:calc(88vh - 68px);width:auto;height:auto;object-fit:contain;border-radius:4px}

/* 16 Sep: files made so far, on a phone: the name and its scope pill get the full width (the pill
   under the name), the facts wrap as a line, the actions sit on their own line under them */
@media (max-width:760px){
  .nx .nx-lgrow.nx-frow{flex-wrap:wrap;row-gap:8px}
  .nx .nx-lgrow.nx-frow .nx-lm{flex:1 0 calc(100% - 48px)}
  .nx .nx-lgrow.nx-frow .nx-ln3{flex-wrap:wrap;row-gap:6px}
  .nx .nx-lgrow.nx-frow .nx-ln3 .nx-src2{white-space:normal}
  .nx .nx-lgrow.nx-frow .nx-lst .nx-mono{display:inline-block;max-width:100%;overflow-wrap:anywhere}
  .nx .nx-lgrow.nx-frow .nx-lacts{flex:1 0 calc(100% - 48px);margin-left:48px;justify-content:space-between}
}

/* 16 Sep: in a column chip the letter and the count sit on the name's baseline (they are smaller,
   so centring left them about a pixel high) */
.nx .nx-colchip .nx-cb{position:relative;top:1.2px}
.nx .nx-colchip .nx-cl{position:relative;top:1.5px}

/* 16 Sep: small phones. The chart legend wraps; the chart keeps room on its right for the second
   axis labels; a long question in a logic line wraps instead of widening the panel */
@media (max-width:760px){
  .nx .nx-cjsleg{flex-wrap:wrap;row-gap:6px;column-gap:18px}
  .nx .nx-lgline .nx-selbox{max-width:100%;min-width:0;white-space:normal;text-align:left}
}
@media (max-width:420px){
  .nx .nx-cjsbox{margin-right:22px}
}

/* 16 Sep: Now keeps an empty slot where a scenario has its remove, so every "available" ends on one edge */
.nx .nx-fsrow .nx-fv .nx-ico.nx-slot,.nx .nx-fshead .nx-fv .nx-ico.nx-slot{visibility:hidden;pointer-events:none}
.nx .nx-fshead .nx-fv{display:flex;justify-content:flex-end;gap:9px}
.nx .nx-fshead .nx-fv .nx-ico.nx-slot{height:0;min-height:0;overflow:hidden}

/* 16 Sep: two right edges. State (status, Available) ends on the status control; actions (menu, remove, these links) end on the outer edge. The links sit on the buttons' baseline;
   on a phone they take their own line, still ending on the right edge */
.nx .nx-fldrow .nx-fsl{margin-left:auto;display:flex;gap:14px;align-items:center;position:relative;top:.7px}
@media (max-width:760px){
  .nx .nx-fldrow .nx-fsl{flex:1 0 100%;justify-content:flex-end;flex-wrap:wrap;margin-right:0;top:0}
}

/* 16 Sep: Check feasibility waits in place: the small cat and "Checking…" inside the button. Both labels
   share one grid cell, so the button keeps its size while it waits */
.nx .nx-fsgo .nx-bst{display:grid}
.nx .nx-fsgo .nx-b1,.nx .nx-fsgo .nx-b2{grid-area:1/1;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.nx .nx-fsgo .nx-b2{visibility:hidden}
.nx .nx-fsgo.nx-busy .nx-b1{visibility:hidden}
.nx .nx-fsgo.nx-busy .nx-b2{visibility:visible}
.nx .nx-fsgo .nx-lot.nx-mini{width:22px;height:22px;margin:-4px -2px -4px -4px;flex:none}
.nx .nx-fsgo .nx-lot.nx-mini svg{display:block}

/* 16 Sep: the remove and the audience menu share the last column; Available ends on the status control's edge */
@media (min-width:761px){
  .nx .nx-fsrow .nx-fv,.nx .nx-fshead .nx-fv{gap:12px}
}
/* head letters end on the figures' edge: the trailing letter spacing is shifted out */
.nx .nx-fshead .nx-fc,.nx .nx-fshead .nx-fv > span{position:relative;left:.12em}

/* 16 Sep: the first heading of Design, Feasibility and Billing sits 36px under what is above it
   (the project summary or a warning), not 66px */
.nx #feasView > .nx-label{margin-top:36px}
.nx #designView > #audEyebrow,.nx #billingView > .nx-label:first-child{margin-top:34px}
@media (max-width:760px){
  .nx #designView > #audEyebrow{margin-top:43px}
  .nx #billingView > .nx-label:first-child{margin-top:34px}
}

/* 16 Sep: the same on and off reading everywhere: a row whose tick or toggle is off has a grey label */
.nx .nx-row:has(> .nx-tick:not(.nx-on)) .nx-lab .nx-k,
.nx .nx-subrow:has(> .nx-toggle:not(.nx-on)) .nx-lab2,
.nx .nx-opt:has(> .nx-tick:not(.nx-on)) .nx-t,
.nx .nx-lnrow.nx-pick:has(> .nx-tick:not(.nx-on)) .nx-nm{color:var(--muted)}

/* 16 Sep: account head avatar; notification column heads centred over their toggles */
.nx .nx-av.nx-hav{display:inline-grid;vertical-align:middle;margin-right:12px;position:relative;top:-2px}
.nx .nx-ntable th .nx-over{display:inline-block;width:var(--tgw,38px);text-align:center;white-space:nowrap;overflow:visible}
.nx .nx-ntable tr.nx-hd th.nx-r{text-align:right;padding-right:0}

/* 16 Sep: account tables. Right columns have right heads; every cell sits on the first line's baseline;
   a note keeps its distance from the table above. On a phone the tables fit the width: deposits and
   invoices drop the id column, an address stacks its fields */
.nx .nx-table tr.nx-hd th.nx-r,.nx .nx-table thead th.nx-r{text-align:right}
.nx .nx-acct .nx-atable td{vertical-align:baseline}
.nx .nx-acct .nx-atable tr.nx-hd th.nx-r{padding-right:0}
.nx .nx-acct .nx-atable tr.nx-hd th.nx-r{position:relative;left:.12em}
.nx .nx-acct .nx-atable + .nx-hp{margin-top:12px}
@media (max-width:600px){
  .nx .nx-acct .nx-ss:has(> .nx-atable){overflow-x:visible}
  .nx .nx-acct .nx-atable{min-width:0;width:100%}
  .nx .nx-acct .nx-dep tr > :first-child{display:none}
  .nx .nx-acct .nx-addr tr.nx-hd{display:none}
  .nx .nx-acct .nx-addr tr{display:block;padding:12px 0;border-bottom:1px solid var(--hair)}
  .nx .nx-acct .nx-addr td{display:block;padding:0;border:0;line-height:1.5}
  .nx .nx-acct .nx-addr td.nx-r{text-align:left;margin-top:6px}
  .nx .nx-acct .nx-addr td[data-l]::before{content:attr(data-l) "  ";color:var(--muted);white-space:pre}
}

/* 16 Sep: the delivery deadline uses the slider's setting rows; off greys the labels like everywhere else */
.nx .nx-schsec .nx-row.nx-setting .nx-ctl{margin-left:auto;display:flex;align-items:center;gap:10px}
.nx .nx-schsec .nx-row.nx-setting .nx-lab{flex:1 1 auto;width:auto;padding-right:20px}

/* 16 Sep: a picked day keeps the cell's centring (a shared .nx-sel rule made it a flex box) */
.nx .nx-dtgrid span.nx-sel{display:block}

/* 16 Sep: the assistant hands a question it cannot answer to the account manager */
.nx .nx-helpwin .nx-hask{display:block;margin-top:10px}

/* 16 Sep: status as information in the settings head; the demo request in the assistant */
.nx .nx-statusro{display:inline-flex;align-items:center;gap:8px}
.nx .nx-statusro .nx-dot{width:7px;height:7px;border-radius:50%;flex:none}
.nx .nx-helpwin .nx-hdemo{border-top:1px solid var(--hair)}
.nx .nx-helpwin .nx-hdh{display:flex;align-items:center;gap:8px;padding:11px 26px;font-size:13px;
  font-weight:500;color:var(--navy);cursor:pointer}
.nx .nx-helpwin .nx-hdh:hover{background:var(--soft)}
.nx .nx-helpwin .nx-hdh .nx-cv{margin-left:auto;color:var(--faint);font-size:15px;transition:transform .15s ease}
.nx .nx-helpwin .nx-hdemo.nx-on .nx-hdh .nx-cv{transform:rotate(180deg)}
.nx .nx-helpwin .nx-hdb{padding:0 26px 14px;font-size:12.5px;color:var(--muted);line-height:1.6}
.nx .nx-helpwin .nx-hdb .nx-btn{margin-top:10px}

/* 16 Sep: the assistant can be made larger for long answers; the account manager button says what it does */
.nx .nx-helpwin .nx-hasknote{display:block;margin-top:6px;font-size:12px;color:var(--muted)}
@media (max-width:600px){.nx .nx-helpwin{width:auto;max-height:78vh}}
/* ---- block 2 ---- */
/* ===== 22 Sep: test data ===== */
/* one row per audience: the name block flows (flag, name, id inline), the figure sits on the row's line */
.nx .nx-row.nx-frow.nx-tdrow{align-items:flex-end}
.nx .nx-row.nx-tdrow .nx-lab{flex:1;width:auto;padding-bottom:10px;line-height:20px;color:var(--navy)}
.nx .nx-row.nx-tdrow .nx-lab .nx-flag.nx-sm{display:inline-block;vertical-align:baseline;position:relative;top:1px;margin-right:8px}
/* the last row has no line of its own, so the field's underline is the row's bottom */
.nx .nx-row.nx-tdrow:last-child .nx-ctl .nx-num3{margin-bottom:0}
.nx .nx-row.nx-tdrow .nx-lab .nx-tdid{font-size:12px;line-height:1;color:var(--faint);margin-left:6px;white-space:nowrap}
.nx .nx-row.nx-tdrow .nx-ctl{flex:none;margin-left:auto;align-items:flex-end;gap:8px}
.nx .nx-row.nx-tdrow .nx-ctl .nx-num3{width:56px;height:auto;padding:0 0 10px;margin-bottom:-1px;line-height:20px;text-align:right;
  border:0;border-bottom:1px solid var(--line);border-radius:0;background:none}
.nx .nx-row.nx-tdrow .nx-ctl .nx-num3:not(:disabled):hover{border-bottom-color:var(--line-3)}
.nx .nx-row.nx-tdrow .nx-ctl .nx-num3:focus{border-bottom-color:var(--blue)}
.nx .nx-row.nx-tdrow .nx-ctl .nx-tdu{color:var(--muted);line-height:20px;margin-bottom:10px}
.nx .nx-tdnote{margin-top:18px}
/* three actions do not fit one phone line, so they wrap */
.nx #tdNotice .nx-acts{flex-wrap:wrap;row-gap:8px}
/* phones set fields at 16px so they do not zoom; one more pixel under the text keeps it on the name's baseline */
@media (max-width:760px){.nx .nx-row.nx-tdrow .nx-ctl .nx-num3{width:52px;padding-bottom:11px}}
/* ---- block 3 ---- */
/* ===== 22 Sep: footnote rule ===== */
.nx .nx-fnote .nx-off.nx-fw{color:var(--amber)}
.nx .nx-fnote .nx-off.nx-fw > i[data-i]{align-self:baseline;position:relative;top:2px;font-size:13px}
/* ---- block 4 ---- */
/* 22 Sep: the statistics panel's labels take the width they need, one row each */
.nx .nx-qstat .nx-row .nx-lab{width:auto;flex:0 1 auto}
.nx .nx-qstat .nx-row .nx-ctl{flex:1 1 auto;min-width:0}
/* ---- block 5 ---- */
/* ===== 23 Sep: the 1300 frame (from the 22 Sep width demo, signed off). One page width on every tab;
   results tables fill it, wider ones scroll inside it with the label pinned ===== */
.nx .nx-wrap,.nx .nx-launch .nx-in,.nx .nx-switch .nx-in{max-width:calc(1300px + 80px)}
body.nx{--labmin:240px}
.nx .nx-fit .nx-cscroll .nx-cgrid{min-width:var(--gmin,0)}
.nx .nx-fit .nx-cgrid .nx-lab,.nx .nx-fit .nx-chead .nx-qidcell{position:sticky;left:0;z-index:2;align-self:stretch}
/* the pinned label fills its whole row, so nothing scrolls into view above, below or beside it */
.nx .nx-fit .nx-cgrid{overflow-x:visible;overflow-y:clip}
.nx .nx-fit .nx-cgrid .nx-lab{display:flex;align-items:center;overflow:visible;-webkit-line-clamp:unset}
.nx .nx-fit .nx-cgrid .nx-lab > .nx-lt2{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-width:0}
.nx .nx-fit .nx-cscroll.nx-hscrolled .nx-cgrid .nx-lab::before,.nx .nx-fit .nx-cscroll.nx-hscrolled .nx-chead .nx-qidcell::before{
  content:"";position:absolute;top:-40px;bottom:-40px;left:0;right:-10px;background:var(--paper);z-index:-1}
@media (max-width:760px){ body.nx{--labmin:0px} .nx .nx-fit .nx-cscroll .nx-cgrid{min-width:max-content}
  .nx .nx-fit .nx-cscroll .nx-cgrid .nx-lab::before,.nx .nx-fit .nx-cscroll .nx-chead .nx-qidcell::before,
  .nx .nx-fit .nx-cscroll.nx-hscrolled .nx-cgrid .nx-lab::before,.nx .nx-fit .nx-cscroll.nx-hscrolled .nx-chead .nx-qidcell::before{
    content:"";position:absolute;top:-40px;bottom:-40px;left:-16px;right:-10px;background:var(--paper);z-index:-1} }
/* long answers read in full on desktop, Compare, Totals and Cross tables alike */
@media (min-width:761px){
  .nx .nx-fit .nx-cgrid .nx-lab > .nx-lt2,.nx .nx-cgrid .nx-lab.nx-wi .nx-lt2,
  .nx .nx-arow .nx-al,.nx .nx-xt tbody th .nx-cl2{display:block;-webkit-line-clamp:unset;overflow:visible}
  .nx .nx-colbar{flex-wrap:nowrap}
}
/* the column chips: wrap onto the next row when they do not fit (7 Oct; was one line with sideways scroll) */
.nx .nx-chipstrip{display:flex;flex-wrap:wrap;align-items:center;gap:8px;flex:1 1 0;min-width:0;padding:2px 0}
.nx .nx-chipstrip > *{flex:none}
@media (max-width:760px){.nx .nx-chipstrip{flex:1 0 100%}.nx .nx-chipstrip .nx-colchip{max-width:none}}
/* a head that travels with the page sits above the rows and pinned labels */
.nx .nx-chead.nx-stuck{z-index:6}
/* cross tables: the figure columns keep one width, the question column takes the rest, as in Compare */
.nx .nx-xt:not(.nx-rsp){width:100%}
.nx .nx-xt:not(.nx-rsp) tbody th{max-width:none;width:100%}
.nx .nx-xt:not(.nx-rsp) tbody td,.nx .nx-xt:not(.nx-rsp) thead tr:last-child th:not(:first-child){min-width:92px}
.nx .nx-xt:not(.nx-rsp) thead th{background:var(--paper);position:sticky;z-index:4}
.nx .nx-cscroll.nx-fits{overflow:visible}
.nx .nx-xt:not(.nx-rsp) thead tr:first-child th:first-child{position:sticky;left:0;z-index:5}
/* ---- block 6 ---- */
/* ===== 29 Sep: clips. A short recording of the feature, kept in the article's Media section and shown
   at the top of the article and under the assistant's answer. No sound, no autoplay when motion is reduced ===== */
.nx .nx-clip{margin:14px 0 18px;border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;background:var(--paper)}
.nx .nx-clip video,.nx .nx-clip canvas,.nx .nx-clip img{display:block;width:100%;max-height:380px;object-fit:contain;background:var(--paper)}
.nx .nx-clip .nx-clipbar{display:flex;align-items:center;gap:8px;padding:6px 8px 6px 4px;border-top:1px solid var(--hair)}
.nx .nx-clip .nx-clipbar .nx-cc{flex:1;min-width:0;font-size:12.5px;color:var(--muted);line-height:17px}
.nx .nx-clip.nx-chat{margin:10px 0 2px}
.nx .nx-clip.nx-chat video,.nx .nx-clip.nx-chat canvas,.nx .nx-clip.nx-chat img{max-height:220px}
/* ---- block 7 ---- */
/* ===== 29 Sep: running text uses proportional figures, so hyphens are not set as wide as digits ===== */
.nx .nx-kbdoc,.nx .nx-hmsg .nx-bub{font-variant-numeric:normal}
/* ===== 29 Sep: the library picker and postcode collections ===== */
.nx .nx-libtools{display:flex;align-items:center;gap:14px;margin:0 0 6px}
.nx .nx-libtools .nx-rowfilter{flex:1;min-width:0}
.nx .nx-libq2{cursor:pointer}
.nx .nx-libq2 .nx-nm2{color:var(--navy);font-size:13.5px}
.nx .nx-libq2 .nx-code{font-family:var(--mono);font-size:11.5px;color:var(--faint);margin-left:8px}
.nx .nx-libq2 .nx-lt{font-size:12px;color:var(--faint);margin-top:3px}
.nx .nx-libans{padding:0 0 8px 34px;border-bottom:1px solid var(--hair)}
.nx .nx-libans .nx-pickrow{padding:7px 0;border-bottom:0;font-size:13px;cursor:pointer}
.nx .nx-libq2.nx-open{border-bottom-color:transparent}
.nx .nx-zipfb{font-size:12.5px;color:var(--muted);margin:8px 0 0;line-height:18px}
.nx .nx-zipfb b{color:var(--navy);font-weight:600}
.nx .nx-zipfb .nx-bad2{color:var(--red)}
@media (max-width:760px){.nx .nx-libtools{flex-wrap:wrap}.nx .nx-libans{padding-left:22px}}
/* ---- block 8 ---- */
/* 29 Sep: long answer lists in the picker */
/* answer text uses proportional figures, so 18-24 does not read as 18 - 24 */
.nx .nx-libq2,.nx .nx-libans{font-variant-numeric:normal}
.nx .nx-libatools{display:flex;align-items:center;gap:6px;margin:4px 0 6px}
.nx .nx-libatools .nx-rowfilter{flex:1;min-width:0;max-width:320px;margin-left:0}
.nx .nx-libtools .nx-rowfilter{margin-left:0}

.nx .nx-libatools .nx-ico.nx-on{color:var(--blue)}
.nx .nx-libans.nx-long .nx-libagrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
@media (max-width:760px){.nx .nx-libans.nx-long .nx-libagrid{grid-template-columns:1fr}.nx .nx-libatools{flex-wrap:wrap}
  .nx .nx-libatools .nx-rowfilter{flex:1 0 100%;max-width:none}}
/* ---- block 9 ---- */
/* ===== 29 Sep: Field metrics for all audiences, with suggested CPIs ===== */


.nx .nx-metall .nx-obj{margin-top:0}
.nx .nx-cpisug{color:var(--green);font-weight:600}
.nx .nx-cpiarr{color:var(--faint);margin:0 6px;font-weight:400}
/* ---- block 10 ---- */
/* 29 Sep: the picker's summary lines */
.nx .nx-libsel{padding:9px 0;cursor:pointer}
.nx .nx-libsel.nx-open{border-bottom-color:transparent}
.nx .nx-libsel .nx-nm2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:760px){.nx .nx-libsel .nx-lt{display:none}}
/* ---- block 11 ---- */
/* 29 Sep: the clip player */
.nx .nx-clip:focus{outline:none}
.nx .nx-clip:focus-visible{box-shadow:0 0 0 2px var(--blue)}
.nx .nx-clipstage{position:relative}
.nx .nx-clipplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;
  background:var(--paper);border:1px solid var(--line);display:grid;place-items:center;color:var(--navy);cursor:pointer}
.nx .nx-clipplay i[data-i]{font-size:20px;margin-left:2px}
.nx .nx-clip.nx-playing .nx-clipplay{display:none}
.nx .nx-clip .nx-clipbar{gap:6px;padding:4px 10px 4px 4px}
.nx .nx-cliptrack{flex:1;min-width:40px;height:22px;display:flex;align-items:center;cursor:pointer;touch-action:none}
.nx .nx-cliprail{position:relative;display:block;width:100%;height:3px;border-radius:2px;background:var(--hair)}
.nx .nx-clipfill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:2px;background:var(--blue)}
.nx .nx-cliptrack:hover .nx-cliprail{height:5px}
.nx .nx-cliptime{font-size:12px;color:var(--faint);white-space:nowrap;min-width:64px;text-align:right}
.nx .nx-clip > .nx-cc{font-size:12.5px;color:var(--muted);line-height:17px;padding:0 10px 8px}
.nx .nx-clip.nx-fs,.nx .nx-clip:fullscreen{display:flex;flex-direction:column;border:0;border-radius:0;background:var(--paper)}
.nx .nx-clip:fullscreen .nx-clipstage{flex:1;min-height:0;display:flex}
.nx .nx-clip:fullscreen video,.nx .nx-clip:fullscreen canvas,.nx .nx-clip:fullscreen .nx-gifanim{max-height:none;height:100%}
/* ---- block 12 ---- */
/* ===== 29 Sep: hairlines drawn as borders, not 1px coloured boxes. A box at a fractional position is smeared across
   two device pixels (it reads thicker and greyer at many zoom levels); a border is snapped to one ===== */
.nx .nx-vdiv{width:0;background:none;border-left:1px solid var(--line)}
.nx .nx-chip.nx-value .nx-dv{width:0;background:none;border-left:1px solid rgba(var(--ink-rgb),.18)}
.nx .nx-sepv{width:0;background:none;border-left:1px solid var(--line)}
.nx .nx-dvg2 .nx-zero{width:0;background:none;border-left:1px solid var(--line-3)}
.nx .nx-kbhere::before{width:0;background:none;border-left:1px solid var(--line-2)}
.nx .nx-sldpv .nx-ticks span{width:0;background:none;border-left:1px solid var(--line-3)}
.nx .nx-msep{height:0;background:none;border-top:1px solid var(--hair)}
.nx .nx-pairhead .nx-rule{height:0;background:none;border-top:1px solid var(--line)}
.nx .nx-fsrow::before{height:0;background:none;border-top:1px solid var(--hair)}
.nx .nx-fsrow .nx-fc .nx-numf::after{height:0;background:none;border-top:1px solid var(--line)}
.nx .nx-fsrow .nx-fc .nx-numf:focus-within::after{background:none;border-top-color:var(--blue)}
.nx .nx-bigrow > span:not(.nx-sepv)::after,.nx .nx-flds > span:not(.nx-sepv)::after{height:0;background:none;border-top:1px solid transparent;transition:border-color .12s ease}
.nx .nx-bigrow > span:not(.nx-sepv):not(:has(input:disabled,textarea:disabled)):hover::after,.nx .nx-flds > span:not(.nx-sepv):not(:has(input:disabled,textarea:disabled)):hover::after{background:none;border-top-color:var(--line-3)}
.nx .nx-bigrow > span:not(.nx-sepv):focus-within::after,.nx .nx-flds > span:not(.nx-sepv):focus-within::after{background:none;border-top-color:var(--blue)}
.nx .nx-arow3 .nx-val2.nx-edit::after,.nx .nx-arow3 .nx-aslot.nx-code::after{height:0;background:none;border-top:1px solid transparent}
.nx .nx-row.nx-setting .nx-ctl .nx-numf::after,.nx .nx-subrow .nx-numf::after{height:0;background:none;border-top:1px solid transparent}
.nx .nx-arow3 .nx-val2.nx-edit:not(:has(input:disabled,textarea:disabled)):hover::after,.nx .nx-arow3 .nx-aslot.nx-code:not(:has(input:disabled,textarea:disabled)):hover::after{background:none;border-top-color:var(--line-3)}
.nx .nx-row.nx-setting .nx-ctl .nx-numf:not(:has(input:disabled,textarea:disabled)):hover::after,.nx .nx-subrow .nx-numf:not(:has(input:disabled,textarea:disabled)):hover::after{background:none;border-top-color:var(--line-3)}
.nx .nx-row.nx-setting .nx-ctl .nx-numf:focus-within::after,.nx .nx-subrow .nx-numf:focus-within::after{background:none;border-top-color:var(--blue)}
/* ---- block 13 ---- */
/* ===== 29 Sep (bulk): quota rows, Field metrics head, player fallback ===== */
.nx .nx-tqcell .nx-tqlab{font-size:14px;color:var(--navy);letter-spacing:-.01em;min-width:0;font-variant-numeric:normal}
.nx .nx-tqbar{height:4px;border-radius:99px;background:var(--hair)}

.nx .nx-clip.nx-expand{position:fixed;inset:0;z-index:400;margin:0;display:flex;flex-direction:column;border:0;border-radius:0;background:var(--paper)}
.nx .nx-clip.nx-expand .nx-clipstage{flex:1;min-height:0;display:flex}
.nx .nx-clip.nx-expand video,.nx .nx-clip.nx-expand canvas,.nx .nx-clip.nx-expand .nx-gifanim{max-height:none;height:100%}
.nx .nx-clip.nx-noload .nx-clipplay{display:none}
/* 11 Oct: a GIF without the image decoder plays as the animated image laid over its first frame */
.nx .nx-clip .nx-gifanim{position:absolute;inset:0;width:100%;height:100%;max-height:none}
.nx .nx-clipmsg{position:absolute;left:12px;right:12px;bottom:12px;display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--amber);background:var(--paper);padding:8px 10px;border:1px solid var(--hair);border-radius:var(--r)}
/* ---- block 14 ---- */
/* 29 Sep: the Field metrics tools share the "All audiences" line */
/* ---- block 15 ---- */
/* ===== 29 Sep: result cards polish ===== */
/* MaxDiff: the same corner as the stacked bars, and square where the bar meets the zero line */
.nx .nx-stkrow .nx-dvg2.nx-sc{border-radius:4px}
.nx .nx-stkrow .nx-dvg2.nx-sc .nx-fx.nx-up{border-radius:0 4px 4px 0}
.nx .nx-stkrow .nx-dvg2.nx-sc .nx-fx.nx-down{border-radius:4px 0 0 4px}
/* stars: filled, the unset ones in the pale track grey */
.nx .nx-starsv i[data-i] svg path{fill:currentColor}
.nx .nx-starsv > i:not(.nx-on):not(.nx-st2) i[data-i]{color:var(--line)}
.nx .nx-starsv .nx-st2{position:relative;display:inline-flex}
.nx .nx-starsv .nx-st2 .nx-stoff i[data-i]{color:var(--line)}
.nx .nx-starsv .nx-st2 .nx-ston{position:absolute;left:0;top:0;bottom:0;overflow:hidden;display:flex}
.nx .nx-starsv .nx-st2 .nx-ston i[data-i]{color:var(--blue)}
/* image uploads */
.nx .nx-uptiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px 14px;margin:10px 0 6px}
.nx .nx-uptile{min-width:0}
.nx .nx-upimg{aspect-ratio:4/3;border-radius:var(--r);background:var(--soft);display:grid;place-items:center;color:var(--faint)}
.nx .nx-upimg i[data-i]{font-size:22px}
.nx .nx-upft{display:flex;align-items:center;gap:8px;padding:8px 0 0}
.nx .nx-upft > span:first-child{flex:1;min-width:0;display:flex;flex-direction:column}
.nx .nx-upid{font-family:var(--mono);font-size:12px;color:var(--muted)}
.nx .nx-upwhen{font-size:12px;color:var(--faint);margin-top:2px}
.nx .nx-upmore{display:flex;align-items:center;gap:12px;margin:6px 0 4px}
@media (max-width:760px){.nx .nx-uptiles{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}}
/* open text actions on the head */
.nx .nx-ohead .nx-otools .nx-oehbtn{height:30px;padding:0 10px;font-size:12.5px}
.nx .nx-oehbtn .nx-beta{font-size:11px;color:var(--faint);font-weight:500;margin-left:4px}
.nx .nx-oehbtn.nx-on{border-color:var(--blue);background:var(--blue-hover-3)}
@media (max-width:760px){.nx .nx-ohead .nx-otools .nx-oehbtn .nx-bl{display:none}}
/* ---- block 16 ---- */
/* 29 Sep: open ends in Compare */
.nx .nx-oepick .nx-crow:not(.nx-met2) .nx-c{cursor:pointer}
.nx .nx-oelist{margin-top:22px}
.nx .nx-oetools{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 8px}
.nx .nx-oetools .nx-rowfilter{margin-left:auto;min-width:200px;max-width:320px;flex:1}
.nx .nx-oefilter{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted);margin:2px 0 8px}
.nx .nx-oein{font-family:var(--mono);font-size:11.5px;color:var(--faint);margin-left:10px;white-space:nowrap}
@media (max-width:760px){.nx .nx-oetools .nx-rowfilter{margin-left:0;flex:1 0 100%;max-width:none}}
/* ---- block 17 ---- */
/* ===== 30 Sep: cross tables letters, tooltip placement, respondents ===== */
.nx .nx-xt thead .nx-xtl{display:block;font-family:var(--mono);font-size:11px;color:var(--blue);letter-spacing:0;margin-bottom:2px}
.nx .nx-xt td .nx-fig4{position:relative}
/* the letters hang to the right of the figure, so every figure keeps the same right edge */
.nx .nx-xt td .nx-ltr{position:absolute;left:100%;top:-2px;margin-left:2px;font-family:var(--mono);font-size:10.5px;color:var(--blue);line-height:1;font-weight:500;letter-spacing:.02em;white-space:nowrap}
.nx .nx-xt:not(.nx-rsp) tbody td,.nx .nx-xt:not(.nx-rsp) thead tr:last-child th:not(:first-child){padding-right:22px}
.nx .nx-xt tr.nx-xtfn td{text-align:left;padding:4px 0 18px;border-bottom:0;background:none;white-space:normal}
.nx .nx-xt tr.nx-xtfn:hover td{box-shadow:none}
.nx .nx-xt tr.nx-xtfn .nx-fnote{margin:0}

.nx .nx-tip.nx-tipr::after{left:auto;right:0;transform:translateY(3px)}
.nx .nx-tip.nx-tipr:hover::after{transform:none}
.nx .nx-tip.nx-tipl::after{left:0;transform:translateY(3px)}
.nx .nx-tip.nx-tipl:hover::after{transform:none}
.nx:has(.nx-menu) .nx-tip:hover::after{opacity:0}
/* respondents: the id search sits at the right end, next to the menu; the audience name is capped and cut with ... */

.nx .nx-xt.nx-rsp tbody th.nx-mono{width:1%;white-space:nowrap}
.nx .nx-xt.nx-rsp td.nx-aud{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ---- block 18 ---- */
/* ===== 2 Oct: the welcome page ===== */
.nx .nx-start{padding:0 0 48px}
.nx .nx-sthero{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:44px 0 34px;border-bottom:1px solid var(--line);overflow:hidden}
.nx .nx-sub3{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.nx .nx-sthead h1{margin:14px 0 18px;font-size:46px;line-height:1.08;font-weight:700;letter-spacing:-.035em;color:var(--navy)}
.nx .nx-sthead h1 em{font-style:normal;color:var(--blue)}
.nx .nx-sthead p{margin:0;font-size:16.5px;line-height:27px;color:var(--muted);max-width:560px}
.nx .nx-start-art{width:420px;max-width:42%;height:auto;flex:none;margin-bottom:-34px}
.nx .nx-stbody{max-width:none} /* 2 Oct: the body uses the full frame, the same edges as the hero */
.nx .nx-sthd{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:40px 0 18px}
.nx .nx-sthd h2{margin:0;font-size:22px;font-weight:700;letter-spacing:-.025em;color:var(--navy)}
.nx .nx-sthd2{margin-top:52px}
.nx .nx-stnote{font-size:13.5px;color:var(--muted)}
.nx .nx-stpick{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.nx .nx-stopt{border:1px solid var(--line);border-radius:12px;padding:22px 24px 20px;cursor:pointer;transition:border-color .12s ease;outline:none}
.nx .nx-stopt:hover{border-color:var(--line-3)}
.nx .nx-stopt.nx-on{border-color:var(--blue)}
.nx .nx-stopt:focus-visible{box-shadow:0 0 0 2px var(--blue)}
.nx .nx-sttop{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.nx .nx-sticon{display:inline-flex;color:var(--blue)}
.nx .nx-sticon i[data-i]{font-size:22px}
.nx .nx-stopt .nx-tick{opacity:0}
.nx .nx-stopt.nx-on .nx-tick{opacity:1}
.nx .nx-stnm{font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--navy)}
.nx .nx-stopt.nx-on .nx-stnm{color:var(--blue)}
.nx .nx-stline{font-size:14px;color:var(--text);margin:5px 0 0;line-height:21px}
.nx .nx-stfeat{font-size:12.5px;color:var(--muted);line-height:19px;margin-top:16px;padding-top:14px;border-top:1px solid var(--hair)}
.nx .nx-strows{margin-top:26px}
.nx .nx-strow{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--hair)}
.nx .nx-strt{flex:1;min-width:0}
.nx .nx-stnm2{font-size:15px;font-weight:600;color:var(--navy);letter-spacing:-.01em}
.nx .nx-stplay{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--blue);flex:none;cursor:pointer}
.nx .nx-stplay.nx-q2{cursor:default}
.nx .nx-stplay.nx-off2{color:var(--faint);cursor:default}
.nx .nx-stplay i[data-i]{font-size:17px}
.nx .nx-stfoot{display:flex;align-items:center;gap:14px;margin-top:28px}
.nx .nx-stgo{height:44px;padding:0 26px;font-size:14.5px}
.nx .nx-stmore{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.nx .nx-stmore1 .nx-sticon{margin-bottom:12px}
.nx .nx-stmore1 .nx-lnk{display:inline-flex;align-items:center;gap:4px;margin-top:10px;font-weight:600}
@media (max-width:900px){.nx .nx-start-art{display:none}}
@media (max-width:760px){.nx .nx-sthero{padding:28px 0 24px}.nx .nx-sthead h1{font-size:34px}.nx .nx-sthead p{font-size:15.5px;line-height:24px}
  .nx .nx-stpick,.nx .nx-stmore{grid-template-columns:1fr}.nx .nx-strow{flex-wrap:wrap}.nx .nx-strt{flex:1 1 calc(100% - 54px)}.nx .nx-strow > .nx-btn,.nx .nx-strow > .nx-selbox{margin-left:54px}}
/* ---- block 19 ---- */
/* 2 Oct: filters, exclusion and the recount */
.nx .nx-noneof{display:flex;align-items:flex-start;gap:12px;margin:14px 0 2px}
.nx .nx-noneof .nx-toggle{flex:none;margin-top:1px}
.nx .nx-noneof .nx-k{display:block;font-size:13.5px;color:var(--navy)}
.nx .nx-fcount{position:relative}
.nx .nx-fcount .nx-fcbar{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--blue);opacity:0}
.nx .nx-fcount.nx-counting .nx-fcbar{opacity:1;animation:nxfc .32s linear forwards}
@keyframes nxfc{from{width:0}to{width:100%}}
@media (prefers-reduced-motion:reduce){.nx .nx-fcount .nx-fcbar{display:none}}
/* ---- block 20 ---- */
/* 2 Oct: the AI brief line, and the filter count as a static figure */
.nx .nx-srcnote{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:18px}
.nx .nx-fldrow > .nx-fcount{display:inline-flex;align-items:baseline;gap:12px;padding-bottom:6px;margin:0 auto 0 0;position:relative}
.nx .nx-fcount .nx-fcn{font-size:34px;font-weight:600;letter-spacing:-.02em;color:var(--navy);line-height:1.1}
.nx .nx-fcount .nx-fcu{font-size:14px;color:var(--muted)}
.nx .nx-fcount .nx-fcbar{bottom:0}
/* ---- block 21 ---- */
/* ===== 2 Oct: import panel ===== */
/* the two lists read the same: one row style, one selected state */
.nx .nx-srow .nx-srbody{flex:1;min-width:0}
.nx .nx-srow{padding:11px 20px;gap:12px}
.nx .nx-srow .nx-sname{font-size:13.5px;font-weight:400;color:var(--text)}
.nx .nx-srow .nx-smeta{margin-top:2px;font-size:12px;color:var(--faint)}
.nx .nx-srow:hover{box-shadow:none}
.nx .nx-srow:hover .nx-sname{color:var(--blue)}
.nx .nx-srow.nx-picked{background:var(--soft)}
.nx .nx-srow.nx-picked .nx-sname{color:var(--blue);font-weight:400}
.nx .nx-srow.nx-picked .nx-smeta{color:var(--faint);opacity:1}
.nx .nx-srow .nx-spick{display:inline-flex}
/* compact: tighter rows, no answer pills */
.nx[data-density="compact"] .nx-rrow{padding-top:9px;padding-bottom:9px}
.nx[data-density="compact"] .nx-rrow .nx-rmeta{margin-top:2px}
@media (max-width:760px){
  /* nothing to preview yet: the empty preview is not shown on a phone */
  .nx .nx-impright:has(> .nx-wm:only-child){display:none}
  .nx #p-survey .nx-impcol:has(#surveyQuestions .nx-impempty){display:none}
  .nx .nx-srow,.nx .nx-cat{padding-left:16px;padding-right:16px}
  .nx .nx-srow .nx-spick{display:inline-flex}
}
/* ---- block 22 ---- */
/* ===== 2 Oct: one list style, the Questions library one: 13.5px names in the label colour, blue on hover and when
   chosen, a small grey second line where one is needed, a count or detail on the right, 11px rows ===== */
/* knowledge base areas and articles */
.nx .nx-kbarea{padding:11px 0;align-items:flex-start}
.nx .nx-kbarea .nx-kbi{display:none}
.nx .nx-kbarea .nx-kt{font-weight:400;color:var(--label)}
.nx .nx-kbarea:hover .nx-kt,.nx .nx-kbart:hover .nx-kt2{color:var(--blue)}
.nx .nx-kbarea .nx-kd{font-size:12px;color:var(--faint);margin-top:2px}
.nx .nx-kbarea .nx-kn{font-size:12px;color:var(--faint)}
.nx .nx-kbart{padding:11px 0}
.nx .nx-kbart .nx-kt2{color:var(--label)}
/* filter and view libraries */
.nx .nx-librow{padding:11px 0}
.nx .nx-librow .nx-lnm{font-size:13.5px;color:var(--label);letter-spacing:0}
.nx .nx-librow:hover .nx-lnm{color:var(--blue)}
.nx .nx-librow .nx-ldef{font-size:12px;color:var(--faint);margin-top:2px}
.nx .nx-librow .nx-lmeta{font-size:12px}
/* postcode collections and the screening library */
.nx .nx-libq2{padding:11px 0}
.nx .nx-libq2 .nx-nm2{color:var(--label)}
/* 4 Oct: the row text no longer reacts to hover or to being picked in blue (the tick carries both) */
.nx .nx-libq2 .nx-lt{margin-top:2px}
/* copy from another project */
.nx .nx-pkrow .nx-pnm{color:var(--label)}
.nx .nx-pkrow:hover .nx-pnm,.nx .nx-pkrow.nx-on .nx-pnm{color:var(--blue);font-weight:400}
/* upload: the hint under the button at full width; the drop target is the whole pane */
.nx .nx-uprow{flex-direction:column;align-items:flex-start;gap:10px}
.nx .nx-uprow .nx-uphint{max-width:none}
.nx #p-text .nx-impleft{position:relative}
.nx .nx-dropmsg{display:none;position:absolute;inset:0;z-index:5;align-items:center;justify-content:center;gap:8px;
  font-size:15px;font-weight:600;color:var(--blue);background:color-mix(in srgb,var(--paper) 92%,transparent);box-shadow:inset 0 0 0 2px var(--blue)}
.nx .nx-impleft.nx-dropping .nx-dropmsg{display:flex}
/* ---- block 23 ---- */
/* 2 Oct: the respondents id column takes the width of an id, not the cross tables' label width */
.nx #resView .nx-xt.nx-rsp thead th:first-child,.nx #resView .nx-xt.nx-rsp tbody th{width:1%;min-width:0;max-width:none;white-space:nowrap}
.nx #resView .nx-xt.nx-rsp td.nx-aud{width:220px}
@media (max-width:760px){.nx #resView .nx-xt.nx-rsp td.nx-aud{width:150px}}
/* ---- block 24 ---- */
/* ===== 2 Oct: Results on phones ===== */
@media (max-width:760px){
  /* the sub-tabs stay on one line ("Field metrics", "Cross tables" no longer break in two) and scroll if they must */
  .nx .nx-subtabs{overflow-x:auto;scrollbar-width:none}
  .nx .nx-subtabs::-webkit-scrollbar{display:none}
  .nx .nx-subtabs .nx-t{white-space:nowrap;flex:none}
  /* a question's menu stays on its title's line instead of taking a line of its own */
  .nx #resView .nx-ohead:has(> .nx-ident.nx-inline):not(:has(.nx-oehbtn)){flex-wrap:nowrap;align-items:flex-start}
  .nx #resView .nx-ohead:has(> .nx-ident.nx-inline):not(:has(.nx-oehbtn)) > .nx-ident{flex:1;min-width:0}
  .nx #resView .nx-ohead:has(> .nx-ident.nx-inline):not(:has(.nx-oehbtn)) > .nx-otools{flex:none;width:auto;margin-left:8px}
  /* the base strip's menu sits on the "Base" line, top right */
  .nx #resView .nx-colbar{position:relative}
  .nx #resView .nx-colbar > .nx-rt{position:absolute;right:0;top:0;margin:0}
  /* respondents: the id search and the menu share a line */
  
  /* cross tables: a narrower pinned label column, so figures show beside it */
  .nx #resView .nx-xt:not(.nx-rsp) tbody th,.nx #resView .nx-xt:not(.nx-rsp) thead tr:last-child th:first-child{width:auto;min-width:132px;max-width:150px;white-space:normal}
  /* respondents: columns packed from the left, the id pinned, the audience capped */
  .nx #resView .nx-xt.nx-rsp{width:auto;min-width:100%}
  .nx #resView .nx-xt.nx-rsp tbody th.nx-mono{position:sticky;left:0;background:var(--paper);z-index:1}
  .nx #resView .nx-xt.nx-rsp td.nx-aud{max-width:150px}
}
/* ---- block 25 ---- */
/* 2 Oct: empty line in a searched menu */
.nx .nx-menu .nx-mempty{padding:10px 14px;font-size:13px;color:var(--muted)}
/* ---- block 26 ---- */
/* ===== 3 Oct: audience lists, and the blue current row ===== */
/* the single current item in a pick-one list: the pale blue the audience switcher uses */
.nx .nx-cat.nx-on,.nx .nx-srow.nx-picked{background:var(--blue-tint)}
.nx .nx-cat.nx-on,.nx .nx-srow.nx-picked .nx-sname{color:var(--blue)}
/* the filter row: status tabs on the left; countries, search and Compact/Detailed on the right */



.nx .nx-selbox.nx-set{color:var(--blue)}
.nx .nx-seg.nx-dens > span{padding:0 10px}
/* compact rows */
.nx .nx-lrow.nx-lcomp{padding:12px 0}
.nx .nx-lrow.nx-lcomp .nx-lhead{display:flex;align-items:center;gap:18px;margin:0}
.nx .nx-lrow.nx-lcomp .nx-ident{flex:1 1 auto;min-width:0}
.nx .nx-lrow.nx-lcomp .nx-ident .nx-onm{font-size:15px}
.nx .nx-lcmid{display:flex;align-items:center;gap:22px;flex:none}
.nx .nx-lcprog{display:flex;align-items:center;gap:10px}
.nx .nx-lcbar{width:120px;height:4px;border-radius:99px;background:var(--hair);overflow:hidden}
.nx .nx-lcbar > span{display:block;height:100%}
.nx .nx-lcnum{font-size:12.5px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums;width:132px}
.nx .nx-lcnum b{color:var(--navy);font-weight:600}
.nx .nx-lccpi{font-size:13.5px;font-weight:600;color:var(--navy);min-width:62px;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.nx .nx-metall.nx-compact{margin-top:6px}
/* the tools take one fixed width, so progress and CPI line up row under row */
.nx .nx-lrow.nx-lcomp .nx-otools{flex:none;width:auto;justify-content:flex-end}
@media (max-width:760px){
  
  
  .nx .nx-lrow.nx-lcomp .nx-lhead{flex-wrap:wrap;row-gap:8px}
  .nx .nx-lrow.nx-lcomp .nx-ident{flex:1 1 60%}
  .nx .nx-lcmid{order:3;flex:1 0 100%;justify-content:space-between}
  /* two lines on a phone: who and the state, then progress and cost; feasibility and features wait for the audience itself */
  .nx .nx-lrow.nx-lcomp .nx-otools > :not(.nx-statusctl):not(.nx-ico:last-child){display:none}
  .nx .nx-lrow.nx-lcomp .nx-otools{flex:none;width:auto}
  .nx .nx-lrow.nx-lcomp .nx-lhead > .nx-ident{flex:1 1 0;width:auto;min-width:0;flex-wrap:nowrap}
  .nx .nx-lrow.nx-lcomp .nx-ident .nx-onm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .nx .nx-lrow.nx-lcomp .nx-ident .nx-oid{display:none}
  .nx .nx-lcbar{width:90px}
}
/* ---- block 27 ---- */
/* ===== 3 Oct, later: audience names are never cut; the row's facts sit on its first line ===== */
.nx .nx-lrow.nx-lcomp .nx-lhead{align-items:flex-start}
.nx .nx-lrow.nx-lcomp .nx-lhead > .nx-ident{flex:1 1 0;min-width:0;width:auto;align-items:flex-start;flex-wrap:nowrap}
.nx .nx-lrow.nx-lcomp .nx-ident .nx-onm{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.nx .nx-lrow.nx-lcomp .nx-ident .nx-oid{display:inline}
.nx .nx-lrow.nx-lcomp .nx-ident .nx-flag{align-self:flex-start;margin-top:3px;flex:none}
.nx .nx-lrow.nx-lcomp .nx-ident .nx-onm{flex:0 1 auto;min-width:0}
.nx .nx-lrow.nx-lcomp .nx-ident .nx-oid{flex:none;margin-top:3px}
.nx .nx-lrow.nx-lcomp .nx-lcmid{margin-top:1px}
/* the 30px controls are lifted so their text shares the name's first line */
.nx .nx-lrow.nx-lcomp .nx-otools{margin-top:-2px}
.nx .nx-back2{display:inline-flex;align-items:center;gap:6px;text-transform:none;letter-spacing:0}
@media (max-width:760px){
  /* phones: the name has the whole first line; status and menu below it; then progress and cost */
  .nx .nx-lrow.nx-lcomp .nx-lhead > .nx-ident{flex:1 0 100%}
  .nx .nx-lrow.nx-lcomp .nx-otools{order:2;flex:1 0 100%;width:auto;justify-content:space-between;margin-top:0}
  .nx .nx-lrow.nx-lcomp .nx-ident .nx-onm{white-space:normal;overflow:visible;text-overflow:clip}
  .nx .nx-lrow.nx-lcomp .nx-ident .nx-oid{display:inline}
}
/* ---- block 28 ---- */
/* ===== 3 Oct: fixed slots in every audience head. Each property has a slot as wide as its longest value and starts on
   the slot's left edge, so features, feasibility and status form columns down the list whatever the status is called ===== */
.nx .nx-otools .nx-slot{display:inline-flex;align-items:center;gap:6px;justify-content:flex-start}
.nx .nx-otools .nx-vdiv.nx-vhide{visibility:hidden}
@media (min-width:761px){
  .nx .nx-otools .nx-sfeat{width:112px;justify-content:flex-end}
  .nx .nx-otools .nx-sfeas{width:124px;justify-content:flex-end}
  .nx .nx-otools .nx-sstat{width:156px;justify-content:flex-end}
}
/* the compact row needs room for the name: below 1180px the name takes the first line and the facts go under it */
.nx .nx-lrow.nx-lcomp .nx-lhead > .nx-ident{min-width:200px}
@media (max-width:1180px) and (min-width:761px){
  .nx .nx-lrow.nx-lcomp .nx-lhead{flex-wrap:wrap;row-gap:8px}
  .nx .nx-lrow.nx-lcomp .nx-lhead > .nx-ident{flex:1 0 100%}
  .nx .nx-lrow.nx-lcomp .nx-lcmid{order:2;flex:1 1 auto}
  .nx .nx-lrow.nx-lcomp .nx-otools{order:3;margin-top:-5px;margin-left:auto}
  .nx .nx-lrow.nx-lcomp .nx-lhead{column-gap:12px}
  .nx .nx-lrow.nx-lcomp .nx-lcmid{gap:14px}
  .nx .nx-lrow.nx-lcomp .nx-lcbar{width:80px}
}
@media (max-width:760px){.nx .nx-lrow.nx-lcomp .nx-lhead > .nx-ident{min-width:0}
  /* phones: the bar gives way first, so progress and cost always fit the line */
  .nx .nx-lcmid{gap:12px;min-width:0}
  .nx .nx-lcprog{flex:1 1 auto;min-width:0}
  .nx .nx-lcbar{width:auto;flex:1 1 40px;min-width:32px;max-width:120px}
  .nx .nx-lcnum{width:auto}}
/* ---- block 29 ---- */
/* 3 Oct: one line per name in the compact list, cut at the end (where names differ least), the id right after it,
   the full name on hover; phones allow two lines */
.nx .nx-lrow.nx-lcomp .nx-ident .nx-onm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;min-width:0}
.nx .nx-lrow.nx-lcomp .nx-lhead > .nx-ident{align-items:baseline}
.nx .nx-lrow.nx-lcomp .nx-ident .nx-flag{align-self:center;margin-top:0}
.nx .nx-lrow.nx-lcomp .nx-ident .nx-oid{margin-top:0}
@media (max-width:760px){
  .nx .nx-lrow.nx-lcomp .nx-ident .nx-onm{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
}
/* ---- block 30 ---- */
/* ===== 3 Oct: short status names; equal row padding; the id in a fixed right-aligned column ===== */
@media (min-width:761px){ .nx .nx-otools .nx-sstat{width:120px} }
.nx .nx-lrow.nx-lcomp{padding:19px 0 6px}
@media (max-width:760px){.nx .nx-lrow.nx-lcomp{padding:17px 0 13px}}
@media (min-width:761px){
  .nx .nx-lrow.nx-lcomp .nx-ident .nx-oid{margin-left:auto;padding-left:14px;flex:none}
}
/* ---- block 31 ---- */
/* 3 Oct: feasibility as an icon in audience heads; the slot shrinks to the icon */
.nx .nx-otools .nx-sfeas .nx-feast{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nx .nx-otools .nx-sfeas .nx-feas{gap:0}
.nx .nx-otools .nx-sfeas .nx-feas i[data-i]{font-size:18px}
.nx .nx-otools .nx-sfeas .nx-feas.nx-no{cursor:pointer}
@media (min-width:761px){ .nx .nx-otools .nx-sfeas{width:28px;justify-content:center} }
/* ---- block 32 ---- */
/* 3 Oct: the status menu, name over meaning */
.nx .nx-menu .nx-mi.nx-stmi{align-items:flex-start;gap:10px;padding-top:9px;padding-bottom:9px}
.nx .nx-menu .nx-mi.nx-stmi .nx-dot{flex:none;width:8px;height:8px;border-radius:50%;margin-top:6px}
.nx .nx-menu .nx-stm{display:flex;flex-direction:column;min-width:0}
.nx .nx-menu .nx-stn{font-size:13.5px;color:var(--navy);line-height:20px}
.nx .nx-menu .nx-std{font-size:12px;color:var(--muted);line-height:17px;font-family:inherit;letter-spacing:0}
.nx .nx-menu .nx-mi.nx-stmi.nx-on .nx-stn{color:var(--navy);font-weight:500}
.nx .nx-menu .nx-mi.nx-stmi.nx-on::after{content:"";margin-left:auto;align-self:center;width:10px;height:6px;border:solid var(--navy);border-width:0 0 1.6px 1.6px;transform:rotate(-45deg) translateY(-2px);flex:none}
/* ---- block 33 ---- */
/* 3 Oct: the feasibility card (the Results tooltip's dark card) */
.nx .nx-ftip{max-width:300px;padding:14px 16px 12px;font-size:12.5px;line-height:1.4;transition:opacity .12s ease}
.nx .nx-ftip.nx-on{opacity:1}
.nx .nx-ftip .nx-fth{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.nx .nx-ftip .nx-ftok,.nx .nx-ftip .nx-ftno{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:13px}
.nx .nx-ftip .nx-ftok{color:#6ee7a0}
.nx .nx-ftip .nx-ftno{color:#f7c56b}
.nx .nx-ftip .nx-ftago{color:rgba(var(--on-ink-rgb),.55);font-size:11.5px}
.nx .nx-ftip .nx-ftbig{font-size:26px;font-weight:600;letter-spacing:-.02em;display:flex;align-items:baseline;gap:8px;font-variant-numeric:tabular-nums}
.nx .nx-ftip .nx-ftbig span{font-size:12.5px;font-weight:400;color:rgba(var(--on-ink-rgb),.7);letter-spacing:0}
.nx .nx-ftip .nx-ftcap{height:6px;border-radius:99px;background:rgba(var(--on-ink-rgb),.16);margin:10px 0 6px;overflow:hidden}
.nx .nx-ftip .nx-ftord{display:block;height:100%;min-width:4px;background:#5aa2ff;border-radius:99px}
.nx .nx-ftip .nx-ftcap.nx-empty2 .nx-ftord{min-width:0}
.nx .nx-ftip .nx-ftcapl{display:flex;justify-content:space-between;color:rgba(var(--on-ink-rgb),.7);font-size:11.5px}
.nx .nx-ftip .nx-ftcapl b{color:var(--on-ink);font-weight:600}
.nx .nx-ftip .nx-ftsub{margin:12px 0 6px;color:rgba(var(--on-ink-rgb),.6);font-size:11px;letter-spacing:.06em;text-transform:uppercase}

.nx .nx-ftip .nx-ftb{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:3px}
.nx .nx-ftip .nx-ftb i{display:block;width:100%;background:#5aa2ff;border-radius:3px 3px 0 0;min-height:3px;max-height:34px}
.nx .nx-ftip .nx-ftb em{font-style:normal;font-size:11px;color:var(--on-ink);order:-1;font-variant-numeric:tabular-nums}
.nx .nx-ftip .nx-ftb u{text-decoration:none;font-size:10.5px;color:rgba(var(--on-ink-rgb),.55)}
.nx .nx-ftip .nx-ftrows{display:grid;grid-template-columns:1fr auto;gap:4px 12px;margin-top:12px;padding-top:10px;border-top:1px solid rgba(var(--on-ink-rgb),.14)}
.nx .nx-ftip .nx-ftrows span{color:rgba(var(--on-ink-rgb),.7)}
.nx .nx-ftip .nx-ftrows b{font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.nx .nx-ftip .nx-ftwhy{margin-top:10px;color:rgba(var(--on-ink-rgb),.8)}
/* ---- block 34 ---- */
/* 3 Oct: no dividers in audience heads; feasibility joins the feature icons as the larger one of the group, and the
   status keeps a clear gap after it */
.nx .nx-otools:has(> .nx-sfeas) > .nx-vdiv{display:none}
.nx .nx-otools:has(> .nx-sfeas) > .nx-sfeas{margin-left:-12px}
.nx .nx-otools:has(> .nx-sfeas) > .nx-sstat{margin-left:10px}
.nx .nx-otools .nx-sfeas .nx-feas i[data-i]{font-size:20px}
@media (min-width:761px){ .nx .nx-otools .nx-sfeas{width:26px;justify-content:flex-end} }
/* ---- block 35 ---- */
/* 3 Oct: the card's assumptions */
.nx .nx-ftip .nx-ftrows.nx-ftas{margin-top:0;padding-top:0;border-top:0}
.nx .nx-ftip .nx-ftnote{margin-top:10px;padding-top:8px;border-top:1px solid rgba(var(--on-ink-rgb),.14);font-size:11.5px;line-height:1.45;color:rgba(var(--on-ink-rgb),.6)}
/* ---- block 36 ---- */
/* ===== 3 Oct: the audience row ===== */
.nx .nx-arow2{padding:19px 0 16px;border-bottom:1px solid var(--hair)}
.nx .nx-arow2.nx-detailed{padding:22px 0 24px}
.nx .nx-ar1,.nx .nx-ar2{display:flex;align-items:center;gap:16px;min-width:0}
.nx .nx-ar2{margin-top:6px}
.nx .nx-arnm{display:flex;align-items:center;gap:12px;flex:1 1 auto;min-width:0}
.nx .nx-arnm .nx-flag{flex:none}
.nx .nx-arow2 .nx-onm{font-size:15px;font-weight:600;color:var(--navy);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;cursor:pointer}
.nx .nx-arow2.nx-detailed .nx-onm{font-size:17px}
.nx .nx-arow2 .nx-onm:hover,.nx .nx-arow2.nx-cur .nx-onm{color:var(--blue)}
.nx .nx-arr{display:flex;align-items:center;gap:8px;flex:none}
.nx .nx-arico{display:inline-flex;align-items:center;gap:2px;justify-content:flex-end;min-width:0}
.nx .nx-arfeas{display:inline-flex;width:26px;justify-content:center}
.nx .nx-arfeas .nx-feast{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nx .nx-arfeas .nx-feas{gap:0}
.nx .nx-arfeas .nx-feas i[data-i]{font-size:20px}
.nx .nx-arfeas .nx-feas.nx-no{cursor:pointer}
.nx .nx-arr .nx-oid{width:56px;text-align:right;margin-left:6px}
.nx .nx-arkb{margin-right:-2px}
.nx .nx-arl{display:flex;align-items:center;gap:16px;flex:1 1 auto;min-width:0}
.nx .nx-arprog{font-size:13.5px;color:var(--muted);gap:0;white-space:nowrap}
.nx .nx-arprog b{color:var(--navy);font-weight:600}
.nx .nx-arow2 .nx-statusctl{flex:none;margin-right:-2px}
.nx .nx-arow2 .nx-rulebar{margin-top:10px}
.nx .nx-arow2 .nx-mets{margin-top:16px}
.nx .nx-arow2.nx-compact .nx-lcnum{width:132px}
@media (max-width:760px){
  .nx .nx-arow2{padding:16px 0 14px}
  .nx .nx-ar1{flex-wrap:wrap;row-gap:6px}
  .nx .nx-arnm{flex:1 0 100%}
  .nx .nx-arow2 .nx-onm{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .nx .nx-arr{margin-left:auto}
  .nx .nx-arl{gap:10px}
  .nx .nx-arow2.nx-compact .nx-lcnum{width:auto}
  .nx .nx-arow2.nx-compact .nx-lcbar{width:auto;flex:1 1 30px;min-width:24px;max-width:90px}
  .nx .nx-arow2.nx-compact .nx-lccpi{min-width:0}
}
/* ---- block 37 ---- */
/* ===== 3 Oct: compact = detailed minus the metrics, in the smaller sizes; one icon+text rule for warning lines ===== */
.nx .nx-arow2.nx-compact{padding:16px 0 18px}
.nx .nx-arow2.nx-compact .nx-arprog{font-size:13px}
/* the progress is one phrase of text, not flex items (flex spaced its words apart on phones) */
.nx .nx-arl.nx-arprog{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nx .nx-arow2.nx-compact .nx-rulebar{margin-top:9px}
/* an icon in front of a line of text sits centred on that line's first row, with a fixed gap: one rule for every
   warning and note line, instead of each line tuning its own icon */
.nx .nx-off:not(.nx-fw){display:inline-flex;align-items:flex-start;gap:6px}
.nx .nx-fldcap .nx-off:not(.nx-fw){display:flex}
.nx .nx-off:not(.nx-fw) > i[data-i]{flex:none;height:1lh;display:inline-flex;align-items:center;align-self:flex-start;margin:0}
.nx .nx-off:not(.nx-fw) > i[data-i] svg{width:14px;height:14px}
/* phones: a notice keeps its icon beside the text; its actions take the next line */
@media (max-width:760px){
  .nx .nx-notice > i[data-i]{flex:none}
  .nx .nx-notice > div:not(.nx-acts){flex:1 1 0;min-width:0}
  .nx .nx-notice > .nx-acts{flex:1 0 100%;padding-left:26px}
}
/* ---- block 38 ---- */
/* ===== 3 Oct, from the signature version: project status ===== */
.nx .nx-roll{display:block;padding:18px 0 14px}



















.nx .nx-float{position:absolute;right:-4px;top:-6px;font-style:normal;font-size:12px;font-weight:600;color:var(--blue);opacity:0;pointer-events:none}
.nx .nx-float.nx-go{animation:nxfloat 1.4s ease-out forwards}
@keyframes nxfloat{0%{opacity:0;transform:translateY(6px)}20%{opacity:1}100%{opacity:0;transform:translateY(-16px)}}
.nx .nx-mini{display:block;width:120px;height:4px;border-radius:99px;background:var(--hair);margin-top:6px;overflow:hidden}
.nx .nx-mini i{display:block;height:100%;background:var(--navy)}
/* the heartbeat: the old colour rule, now still or alive */
.nx .nx-projrule.nx-beat{position:relative;display:block;height:2px;background:var(--line);overflow:hidden}
.nx .nx-projrule.nx-blive::after{content:"";position:absolute;top:0;bottom:0;width:22%;left:-22%;background:linear-gradient(90deg,transparent,var(--blue),transparent);animation:nxbeat 2.6s ease-in-out infinite}
@keyframes nxbeat{0%{left:-22%}100%{left:100%}}
/* live dots breathe */
.nx .nx-livedot{position:relative}
.nx .nx-livedot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--green);opacity:0;animation:nxping 1.8s ease-out infinite}
@keyframes nxping{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.nx .nx-projrule.nx-blive::after{animation:none;left:0;width:100%;opacity:.35}.nx .nx-livedot::after,.nx .nx-float.nx-go{animation:none}}
/* filter chips under a toolbar */
.nx .nx-fchips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 0 2px}
.nx .nx-fchip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 6px 0 11px;border-radius:99px;background:var(--blue-tint);color:var(--blue);font-size:12.5px}
.nx .nx-fchip b{font-weight:400;opacity:.7}
.nx .nx-fchip .nx-fx{display:inline-flex;width:20px;height:20px;align-items:center;justify-content:center;border-radius:50%;cursor:pointer}
.nx .nx-fchip .nx-fx:hover{background:rgba(0,112,224,.12)}
.nx .nx-fchip .nx-fx i[data-i]{font-size:13px}
@media (max-width:760px){
  
   
  
  
  
  .nx .nx-mini{width:100%}
}
/* ---- block 39 ---- */
/* ===== 3 Oct, moved from the signature version ===== */
/* the new bars use the audience list bar's own styles; only the gap before the search is added */
.nx .nx-filterbar.nx-mbar{display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap}
.nx .nx-filterbar.nx-mbar > .nx-msp{flex:1 1 auto}
.nx .nx-filterbar.nx-mbar > .nx-rowfilter{order:0;margin:0;width:240px;flex:none}

#survObj .nx-otools #survMode{display:none}
/* the Respondents menu on the sub-tabs line, right end */
.nx #resView .nx-subtabs .nx-subrt{margin-left:auto;display:inline-flex;align-items:center}
/* phones: one Filters button for two or more selectors */



@media (max-width:760px){
  
  
  .nx .nx-filterbar.nx-mbar > .nx-kinds{flex:1 0 100%;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
  .nx .nx-filterbar.nx-mbar > .nx-rowfilter{flex:1 1 0;width:auto;min-width:0}
  .nx .nx-filterbar.nx-mbar > .nx-msp{display:none}
}
/* Feasibility heads: the compact row, without its own bottom line (the bar is the separator) */
.nx #feasView .nx-lhead.nx-fhead{display:block;margin:0}
.nx #feasView .nx-fhead .nx-arow2{border-bottom:0;padding:4px 0 10px}
.nx #feasView .nx-fhead .nx-arow2{width:100%}
/* the opened audience: the row structure, without the list row's padding and line */
.nx .nx-arow2.nx-open{border-bottom:0;padding:0}
#audHeadRow{display:block}
.nx .nx-arow2.nx-detailed .nx-onm,.nx .nx-arow2.nx-open .nx-onm{font-size:18px}
.nx #resView .nx-methead > .nx-arow2.nx-open .nx-rulebar{margin-bottom:2px}
#audProg:empty{display:none}
/* Results, one audience: the head keeps the room it had under the sub-tabs */
.nx #resView .nx-methead > .nx-arow2.nx-open{padding-top:44px}
@media (max-width:760px){.nx #resView .nx-methead > .nx-arow2.nx-open{padding-top:18px}}
#audHeadRow:has(> .nx-arow2.nx-open){padding-bottom:2px}
/* Field metrics, all audiences, Detailed: ten metrics in a clean grid of five aligned columns (they wrapped into a
   broken second row) */
.nx .nx-metall .nx-arow2.nx-detailed .nx-mets{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px 24px}
.nx .nx-metall .nx-arow2.nx-detailed .nx-mets > .nx-grp2{display:contents}
.nx .nx-metall .nx-arow2.nx-detailed .nx-mets .nx-met{border:0;padding:0;margin:0;width:auto;min-width:0;text-align:left;align-items:flex-start}
.nx .nx-metall .nx-arow2.nx-detailed .nx-mets .nx-met .nx-v{justify-content:flex-start}
@media (max-width:760px){.nx .nx-metall .nx-arow2.nx-detailed .nx-mets{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* wide screens (the full 1300px frame): all ten metrics on one line, spread across the row; they measure about 840px
   together, so one line only gives way where the frame is narrower */
@media (min-width:1340px){.nx .nx-metall .nx-arow2.nx-detailed .nx-mets{grid-template-columns:repeat(10,minmax(0,1fr));column-gap:20px}}
/* one gap from the bar to the metrics, the opened audience's: 22px to the labels */
.nx .nx-arow2.nx-detailed .nx-mets{margin-top:2px}
/* the bars: the active tab's underline and the search's underline end on the same line */
.nx .nx-filterbar.nx-mbar{align-items:flex-end}
/* the scope selector's text sits on the tabs' text line */
.nx .nx-filterbar.nx-mbar > .nx-selbox{margin-bottom:-3px}
/* the survey bar has a line under it; the tab's underline and the search sit on that line, the search's own
   underline is the bar's line */
.nx #survBar{border-bottom:1px solid var(--line);padding-bottom:0}
.nx #survBar > .nx-rowfilter{border-bottom:0}
/* the survey search reads from the right, ending at the row's edge (the survey's search always did) */
.nx #survBar > .nx-rowfilter{flex-direction:row-reverse;padding-right:0;padding-left:0}
.nx #survBar > .nx-rowfilter input{text-align:right}
.nx #survBar > .nx-kinds .nx-kind{margin-bottom:-1px;padding-bottom:12px}
/* phones: the search takes the first line (with its own underline), the tabs sit on the bar's line */
@media (max-width:760px){
  .nx #survBar > .nx-rowfilter{order:-2;flex:1 0 100%;border-bottom:1px solid var(--line)}
  .nx #survBar > .nx-kinds{order:-1}
}
/* Respondents: room between the bar and the table */
.nx #resView .nx-xtwrap:has(> .nx-rsp){margin-top:22px}
/* the mockup toggle, in the Demo bar */
.nx .nx-demo .nx-kindsel{height:30px;font-size:12.5px;border:1px solid var(--line);border-radius:6px;padding:0 6px 0 10px;color:var(--navy);text-transform:none;letter-spacing:0}
/* Compact: no line between audiences; each row's full-width bar is the separator */
.nx .nx-arow2.nx-compact{border-bottom:0;padding:24px 0 14px}
/* ---- block 40 ---- */
/* ===== 3 Oct: Field metrics, all audiences: a title line and a bar ===== */





/* Compact | Detailed: the Design audience header's underline tabs */




.nx .nx-allbar{margin-top:14px;align-items:center}
.nx .nx-allbar .nx-allacts{display:flex;gap:10px;flex-wrap:wrap}
.nx .nx-allbar .nx-btn{height:36px}
@media (max-width:760px){
  
  
  
  .nx .nx-allbar .nx-allacts{flex:1 0 100%}
  .nx .nx-allbar > .nx-msp{display:none}
}
/* ---- block 41 ---- */
/* 3 Oct: switches. In a list of settings they stand at the right of each row; a header switch or a single setting
   keeps its switch right after its label (12px), so it never sits a row's width away */
.nx .nx-row.nx-setting.nx-single{justify-content:flex-start;gap:12px;align-items:center}
.nx .nx-row.nx-setting.nx-single > .nx-lab{flex:none;width:auto;padding:0;margin:0}
.nx .nx-row.nx-setting.nx-single > .nx-ctl{margin-left:0;flex:none;display:flex;align-items:center;align-self:center;height:auto;min-height:0;padding:0}
/* ---- block 42 ---- */
/* 3 Oct: ids by role; the survey id in the audience id column */
.nx #survObj .nx-otools .nx-survid{width:56px;text-align:right;margin-left:6px;margin-right:-4px;flex:none}
.nx #survObj .nx-otools .nx-survkb{margin-right:-2px}
@media (max-width:760px){.nx #survObj .nx-otools .nx-survid{margin-right:-2px}}
.nx.nx-client .nx-arow2 .nx-oid,.nx.nx-client #survObj .nx-survid{display:none}
.nx .nx-demo .nx-rolebtn.nx-roleon{color:var(--navy);border-color:var(--navy)}
/* ---- block 43 ---- */
/* 3 Oct: Field metrics uses Design's audience header line; "Where people go" gets the room "Where people come back" has */
.nx #resView .nx-label.nx-reseye{margin-top:24px}
.nx #sampleBody .nx-rdz > .nx-ss:first-child{margin-top:26px}
/* ---- block 44 ---- */
/* 3 Oct: Field metrics, all audiences: the timeframe and the CPI tools on the header line. The CPI tools are for
   internal accounts only, so they are icons and they do not show in the client view */
.nx .nx-label.nx-reseye .nx-rt{gap:14px}
.nx .nx-label .nx-selbox.nx-eyesel{font-size:13.5px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--navy);height:auto;border:0;padding:0}
.nx .nx-label.nx-reseye .nx-ico.nx-adminonly{position:relative;color:var(--label)}
.nx .nx-label.nx-reseye .nx-ico.nx-adminonly:hover{color:var(--blue)}
.nx .nx-label.nx-reseye .nx-ico.nx-dis{opacity:.4;cursor:default}
.nx .nx-label.nx-reseye .nx-icount{position:absolute;top:-2px;right:-4px;min-width:15px;height:15px;padding:0 4px;border-radius:99px;background:var(--blue);color:#fff;font-size:10px;font-weight:600;line-height:15px;text-align:center;letter-spacing:0}
.nx.nx-client .nx-adminonly{display:none}
/* the first audience keeps clear of the header line now the bar is gone (40px to its name, both densities) */
.nx #resView .nx-metall > .nx-arow2:first-child{margin-top:18px}
.nx #resView .nx-metall.nx-compact > .nx-arow2:first-child{margin-top:14px}
@media (max-width:760px){.nx #resView .nx-metall.nx-compact > .nx-arow2:first-child{margin-top:16px}}
@media (max-width:760px){.nx .nx-label.nx-reseye .nx-rt{gap:10px;flex-wrap:wrap;row-gap:6px;max-width:100%}.nx .nx-label.nx-reseye .nx-eyemode{gap:14px}}
/* ---- block 45 ---- */
/* 3 Oct: the standard for bars with tabs or a search: a bar of its own under the section header, with a line under it;
   the active tab's underline and the search sit on that line, 14px between tab text and underline. The survey bar already
   works this way; the Design audience list bar and the Feasibility bar now do too */



/* the search text on the tab text line */
@media (min-width:761px){.nx #survBar > .nx-rowfilter{padding-bottom:4px}}
/* ---- block 46 ---- */
/* 3 Oct: right-end search fields: right-aligned text, the magnifier right before it */
.nx .nx-rowfilter.nx-rsearch{flex-direction:row;justify-content:flex-end;gap:8px;cursor:text;padding-right:0}
.nx .nx-rowfilter.nx-rsearch input{text-align:right;flex:none;min-width:0;padding-left:0;padding-right:0}
.nx #survBar > .nx-rowfilter.nx-rsearch{flex-direction:row}
@media (min-width:761px){
  .nx .nx-rowfilter.nx-rsearch{width:auto;flex:none;margin-left:auto}
}
/* ---- block 47 ---- */
/* 3 Oct: Field metrics, all audiences, Detailed: costs stay on the right, as everywhere. CPI and Total spent are the last
   two columns of the first line, right-aligned; the other metrics fill the columns to their left (one line on the full
   frame, two lines of four below it) */
.nx .nx-metall .nx-arow2.nx-detailed .nx-mets{grid-template-columns:repeat(4,minmax(0,1fr)) auto auto;column-gap:24px}
.nx .nx-metall .nx-arow2.nx-detailed .nx-mets > .nx-grp2 > .nx-met{grid-row:1;justify-self:end;text-align:right;align-items:flex-end}
.nx .nx-metall .nx-arow2.nx-detailed .nx-mets > .nx-grp2 > .nx-met:first-child{grid-column:-3}
.nx .nx-metall .nx-arow2.nx-detailed .nx-mets > .nx-grp2 > .nx-met:last-child{grid-column:-2;border-left:1px solid var(--line);padding-left:24px}
.nx .nx-metall .nx-arow2.nx-detailed .nx-mets > .nx-grp2 > .nx-met .nx-v{justify-content:flex-end}
/* 4 Oct: on the full frame the eight metric columns are only as wide as the widest figure or label they ever carry,
   so the leftover width collects in one place, right before the costs. The costs then carry the widest gap in the row,
   which is what separates them, and the columns still line up across audiences because the widths are fixed. */
@media (min-width:1340px){
  .nx .nx-metall .nx-arow2.nx-detailed .nx-mets{column-gap:20px;
    grid-template-columns:minmax(56px,max-content) minmax(126px,max-content) minmax(126px,max-content)
      minmax(96px,max-content) minmax(96px,max-content) minmax(106px,max-content) minmax(128px,max-content)
      minmax(96px,max-content) 1fr auto auto}
  .nx .nx-metall .nx-arow2.nx-detailed .nx-mets > .nx-grp2 > .nx-met:first-child{grid-column:-2}
  .nx .nx-metall .nx-arow2.nx-detailed .nx-mets > .nx-grp2 > .nx-met:last-child{grid-column:-1}
}
@media (max-width:760px){
  .nx .nx-metall .nx-arow2.nx-detailed .nx-mets{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nx .nx-metall .nx-arow2.nx-detailed .nx-mets > .nx-grp2 > .nx-met{grid-row:auto;grid-column:auto}
  .nx .nx-metall .nx-arow2.nx-detailed .nx-mets > .nx-grp2 > .nx-met:last-child{border-left:0;padding-left:0}
}
/* ---- block 48 ---- */
/* ===== 3 Oct: the project overview ===== */
.nx .nx-roll{padding:20px 0 0}


















/* the bar: the audience bar's height, the status colours, the heartbeat on top while live */
.nx .nx-projrule.nx-povbar{position:relative;display:flex;height:4px;border-radius:99px;background:var(--soft);overflow:hidden;margin:10px 0 8px}
.nx .nx-projrule.nx-povbar.nx-blive::after{content:"";position:absolute;top:0;bottom:0;width:22%;left:-22%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);animation:nxbeat 2.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.nx .nx-projrule.nx-povbar.nx-blive::after{animation:none;display:none}}
/* ---- block 49 ---- */
/* ===== 3 Oct, later: the compact project summary ===== */
.nx .nx-roll{padding:16px 0 14px}









.nx .nx-psdone{position:relative;display:inline-block;font-size:13px;color:var(--muted);white-space:nowrap;margin-left:17px;width:fit-content}
.nx .nx-psdone b{color:var(--navy);font-weight:600;font-variant-numeric:tabular-nums}
.nx .nx-psdone .nx-livedot{display:inline-block;width:7px;height:7px;border-radius:50%;margin:0 7px 0 -15px;vertical-align:1px}
.nx .nx-psdone .nx-float{right:auto;left:100%;margin-left:6px;top:-8px}



.nx .nx-pscost{font-size:13.5px;color:var(--muted);white-space:nowrap}
.nx .nx-pscost b{color:var(--navy);font-weight:600;font-variant-numeric:tabular-nums}
.nx .nx-projrule.nx-beat{margin-bottom:8px}
@media (max-width:760px){
  
  
  
  
  
  .nx .nx-pscost{margin-left:auto}
}
/* ---- block 50 ---- */
/* 3 Oct: the overview's small traffic and forecast line */








@keyframes nxspdot{0%{filter:drop-shadow(0 0 0 rgba(0,112,224,.6))}70%{filter:drop-shadow(0 0 5px rgba(0,112,224,0))}100%{filter:none}}

@media (max-width:760px){.nx .nx-psdone{white-space:normal}}
/* ---- block 51 ---- */
/* 3 Oct, later: the overview's daily columns */





@keyframes nxsb{0%,100%{opacity:1}50%{opacity:.45}}
/* ---- block 52 ---- */
/* 3 Oct, later: the traffic health indicator */

.nx .nx-hbars rect.nx-hnow{animation:nxsb 1.8s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.nx .nx-hbars rect.nx-hnow{animation:none}}



@media (max-width:760px){.nx .nx-health .nx-hbars{width:112px;height:26px}}
/* ---- block 53 ---- */
/* 3 Oct, later: the overview in three layers */
.nx .nx-roll{padding:16px 0 0}



.nx .nx-projrule.nx-povbar{margin:14px 0 0}
.nx .nx-rollunder{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:8px 0 10px}
.nx .nx-rollunder .nx-psdone{margin-left:0;font-size:13px}
.nx .nx-rollunder .nx-psdone .nx-livedot{margin:0 7px 0 0}
.nx .nx-rollunder .nx-pscost{font-size:13px;margin-left:auto}
@media (max-width:760px){
  
  
  .nx .nx-rollunder{flex-wrap:wrap;row-gap:4px}
}
/* ---- block 54 ---- */
/* 3 Oct, later: the project bar, one reserved share per audience */
/* ---- block 55 ---- */
/* 3 Oct, later: one bar for the project, its breakdown in the hover card */
.nx .nx-projrule.nx-povbar.nx-one{display:block;height:6px;background:var(--soft);border-radius:99px;overflow:hidden;cursor:pointer}
.nx .nx-projrule.nx-povbar.nx-one > i{display:block;height:100%;border-radius:99px}
.nx .nx-ftip .nx-ftip,.nx .nx-ftip{max-width:340px}
.nx .nx-ftip .nx-shares{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.nx .nx-ftip .nx-shr{display:grid;grid-template-columns:minmax(0,1fr) 34px 70px 36px;align-items:center;gap:8px;font-size:12px}
.nx .nx-ftip .nx-shn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:rgba(var(--on-ink-rgb),.85)}
.nx .nx-ftip .nx-shs{text-align:right;color:rgba(var(--on-ink-rgb),.6);font-variant-numeric:tabular-nums}
.nx .nx-ftip .nx-shb{height:5px;border-radius:99px;background:rgba(var(--on-ink-rgb),.16);overflow:hidden}
.nx .nx-ftip .nx-shb i{display:block;height:100%;background:#5aa2ff;border-radius:99px}
.nx .nx-ftip .nx-shp{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
/* ---- block 56 ---- */
/* 3 Oct, later: the overview is the bar, with completes, traffic health and costs under it */
.nx .nx-roll:empty{display:none}
.nx .nx-projrule.nx-povbar{margin:20px 0 0}
.nx .nx-rollunder{align-items:center}
.nx .nx-hinline{display:inline-flex;align-items:center;gap:8px;cursor:default;margin-left:24px}
.nx .nx-hinline .nx-hword{font-size:12.5px;font-weight:500;white-space:nowrap}
@media (max-width:760px){.nx .nx-hinline{margin-left:0}}
/* ---- block 57 ---- */
/* 3 Oct, later: the project bar hangs right under the header's hairline, like a loading bar attached to the header.
   Thin, no track of its own (the hairline is the edge), filled in ink so it never reads as the blue tab underline above it */
.nx .nx-roll:empty + .nx-projrule.nx-povbar.nx-one,.nx .nx-projrule.nx-povbar.nx-one{margin:0;height:3px;border-radius:0;background:transparent}
.nx .nx-projrule.nx-povbar.nx-one > i{border-radius:0 2px 2px 0;background:var(--navy)!important}
.nx .nx-projrule.nx-povbar.nx-one.nx-done > i{background:var(--slate)!important}
.nx .nx-projrule.nx-povbar.nx-one.nx-blive::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent)}
.nx .nx-rollunder{margin:12px 0 10px}
/* ---- block 58 ---- */
/* 3 Oct: status colours. Blue is for interaction (links, the active tab, selection) and data charts, never for a status.
   Draft grey, Live green, Paused amber, Suspended and Cancelled red, Complete slate (a calm blue-grey, lighter than text) */
.nx.nx-dark,html.nx-dark .nx,.nx[data-theme="dark"]{--slate:#9AA8BC}
/* ---- block 59 ---- */
/* ===== 3 Oct: the top bar ===== */
.nx .nx-topbar{position:sticky;top:0;z-index:30;background:var(--paper);flex-wrap:nowrap}
.nx .nx-topbar > *{flex-shrink:0}
.nx .nx-topbar .nx-finder{flex-shrink:1;min-width:160px;width:300px}
.nx .nx-topbar .nx-tproj{flex-shrink:1}
.nx .nx-topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;overflow:hidden;pointer-events:none}
.nx .nx-topbar.nx-beat-on::after{background:linear-gradient(90deg,transparent,var(--green),transparent);background-size:30% 100%;background-repeat:no-repeat;animation:nxtopbeat 3s ease-in-out infinite}
@keyframes nxtopbeat{0%{background-position:-30% 0}100%{background-position:130% 0}}
/* what parks under the bar moves down by its height */
.nx #resView > .nx-subtabs{top:var(--tbh,0px);z-index:6;background:var(--paper)}
/* the Results bar stays with its tabs while a table scrolls, and the table header stops right under it */

.nx .nx-xtwrap .nx-table.nx-sticky thead th{top:0}
.nx .nx-table.nx-sticky thead th{top:var(--sticky-top,var(--tbh,0px))}
.nx .nx-side{top:calc(var(--tbh,0px) + 70px)}

/* 1. the live X */
.nx .nx-logo b i{display:inline-block;transition:opacity .3s}
.nx .nx-logo.nx-xlive b i{animation:nxx 2.4s ease-in-out infinite}
@keyframes nxx{0%,100%{opacity:1;text-shadow:0 0 0 rgba(0,112,224,0)}50%{opacity:.55;text-shadow:0 0 10px rgba(0,112,224,.55)}}
/* 2. the account line */
.nx .nx-tlive{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 4px;border:0;background:none;font:inherit;font-size:13px;color:var(--muted);cursor:pointer;white-space:nowrap}
.nx .nx-tlive b{color:var(--navy);font-weight:600;font-variant-numeric:tabular-nums}
.nx .nx-tlive:hover b{color:var(--blue)}
.nx .nx-tlive .nx-livedot{display:inline-block;width:7px;height:7px;border-radius:50%}
.nx .nx-ftip .nx-shr.nx-shr3{grid-template-columns:minmax(0,1fr) 80px 36px;cursor:pointer}
.nx .nx-ftip .nx-shr.nx-shr3:hover .nx-shn{color:#fff;text-decoration:underline}
/* 3. the finder */
.nx .nx-finder{display:inline-flex;align-items:center;gap:8px;height:34px;min-width:300px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--faint);font:inherit;font-size:13px;cursor:text}
.nx .nx-finder:hover{border-color:var(--faint)}
.nx .nx-finder i[data-i]{font-size:15px}
.nx .nx-finder .nx-fdtxt{flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nx .nx-finder .nx-fdkbd{font:500 11px/1 var(--mono,ui-monospace),monospace;color:var(--faint);border:1px solid var(--line);border-radius:4px;padding:3px 5px}
.nx .nx-menu .nx-fdi{display:flex;align-items:center;gap:10px}
.nx .nx-menu .nx-fdi .nx-fdn{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nx .nx-menu .nx-fdi .nx-fds{font-size:12px;color:var(--faint);white-space:nowrap}
.nx .nx-menu .nx-fdnone{padding:14px 16px;color:var(--muted);font-size:13px}
/* 4. the project, once its header has scrolled away */
.nx .nx-tproj{display:none;align-items:center;gap:10px;min-width:0;max-width:440px}
.nx .nx-topbar.nx-scrolled .nx-tproj{display:inline-flex}
.nx .nx-topbar.nx-scrolled .nx-finder{min-width:0;width:34px;padding:0;justify-content:center}
.nx .nx-topbar.nx-scrolled .nx-finder .nx-fdtxt,.nx .nx-topbar.nx-scrolled .nx-finder .nx-fdkbd{display:none}
.nx .nx-tproj .nx-tpn{font-weight:600;color:var(--navy);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;min-width:0}
.nx .nx-tproj .nx-tpb{flex:none;width:80px;height:4px;border-radius:99px;background:var(--soft);overflow:hidden}
.nx .nx-tproj .nx-tpb i{display:block;height:100%;border-radius:99px}
.nx .nx-tproj .nx-tpp{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
/* 5. one solid button */
.nx .nx-topbar .nx-btn.nx-tnew{height:32px;padding:0 12px}
/* the project bar takes the project's state colour: live green, complete slate, otherwise quiet grey */
.nx .nx-projrule.nx-povbar.nx-one{--pbar:var(--faint)}
.nx .nx-projrule.nx-povbar.nx-one.nx-blive{--pbar:var(--green)}
.nx .nx-projrule.nx-povbar.nx-one.nx-done{--pbar:var(--slate)}
.nx .nx-projrule.nx-povbar.nx-one > i{background:var(--pbar)!important}
@media (max-width:760px){
  .nx .nx-topbar .nx-finder{min-width:0;width:40px;height:40px;padding:0;justify-content:center;flex:none}
  .nx .nx-finder .nx-fdtxt,.nx .nx-finder .nx-fdkbd{display:none}
  .nx .nx-tlive .nx-tlx{display:none}
  .nx .nx-topbar{gap:10px}
  .nx .nx-topbar.nx-scrolled .nx-tproj{max-width:none;flex:1 1 auto}
  .nx .nx-topbar.nx-scrolled .nx-tproj .nx-tpb,.nx .nx-topbar.nx-scrolled .nx-tproj .nx-tpp{display:none}
  .nx .nx-topbar.nx-scrolled .nx-logo small{display:none}
  .nx .nx-topbar .nx-btn.nx-tnew{width:40px;height:40px;padding:0;justify-content:center;flex:none}
}
/* ---- block 60 ---- */
/* 3 Oct: on the narrowest phones the account line steps aside; the breathing X still says something is live */
@media (max-width:360px){.nx .nx-topbar .nx-tlive{display:none!important}}
/* ---- block 61 ---- */
/* 3 Oct: the finder in the house input style: an underline only, no box (the key hint is plain text) */
.nx .nx-topbar .nx-finder{border:0;border-bottom:1px solid transparent;border-radius:0;padding:0 2px;background:transparent;height:auto;align-self:stretch;margin-bottom:-11px;margin-top:-10px;padding-top:10px}
.nx .nx-topbar .nx-finder:hover{border-bottom-color:var(--faint)}
/* the bar's own line is the finder's underline (rule 13: field bottom = row bottom) */
.nx .nx-topbar .nx-finder .nx-fdkbd{border:0;padding:0;font-size:11.5px}
.nx .nx-topbar.nx-scrolled .nx-finder{border-bottom-color:transparent}
@media (max-width:760px){.nx .nx-topbar .nx-finder{border-bottom-color:transparent}}
/* ---- block 62 ---- */
/* 3 Oct: filters, one way everywhere */
#survTools .nx-rowfilter{display:none}   /* the survey's search lives in the survey bar */
.nx #dashView .nx-dtools .nx-rowfilter.nx-rsearch{border-bottom:0}
.nx .nx-srch:focus-within{border-bottom-color:var(--blue)}
/* ---- block 63 ---- */
/* 3 Oct: one chip language. A picked chip (answers in a filter, series on a heatmap) looks like an active filter
   chip: the blue pill, no border. One you can still pick is the same pill, white, with a hairline */
.nx .nx-chip.nx-filter{border-radius:99px;border:1px solid var(--line);background:var(--paper);color:var(--label)}
.nx .nx-chip.nx-filter.nx-on{border-color:transparent;background:var(--blue-tint);color:var(--blue)}
.nx .nx-chip.nx-filter:hover{border-color:var(--faint)}
.nx .nx-chip.nx-filter.nx-on:hover{border-color:transparent;background:var(--blue-tint)}
/* ---- block 64 ---- */
/* 3 Oct: the project bar's colour, by the most important state: Live green > Paused amber > Draft grey; slate when all complete */
.nx .nx-projrule.nx-povbar.nx-one.nx-paused{--pbar:var(--amber-dot)}
/* ---- block 65 ---- */
/* 3 Oct: tabs never wrap onto a second line; on narrow screens they scroll sideways, so the underline stays on the bar's line */
@media (max-width:760px){
  .nx #survBar .nx-kinds,.nx #dashView .nx-kinds,.nx #dashView .nx-dtabs .nx-tabs{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;white-space:nowrap;scrollbar-width:none}
  .nx #survBar .nx-kinds::-webkit-scrollbar{display:none}
  .nx #survBar .nx-kinds .nx-kind{flex:none}
}
/* ---- block 66 ---- */
/* 3 Oct: the last four audit items */
/* rule 4: Insights' Totals | Compare get the 14px between text and underline every other tab has */

/* rule 18: the heatmap's significance marks drop their shadow for a hairline ring; a picked answer stays one line (a pill, never a block) */
.nx .nx-hmimg .nx-mark{box-shadow:none;border:1px solid rgba(var(--ink-rgb),.28)}
.nx .nx-hmc .nx-mark.nx-inline{border:0}
.nx .nx-ans.nx-on{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* ===== 4 Oct: field hover =====
   One answer for every field: hovering a field paints its line pale blue, a quieter version of the blue it takes on
   focus. Whatever lights up is the click target, so the label, the unit and the padding all focus the input (caret at
   the end) and the whole lit region carries the caret cursor. A value you cannot change is not a field: no hover, no
   caret, no click (the guards added to the hover rules above). Phones have no hover, so nothing depends on it. */
.nx.nx-dark{--hover-line:#5E8FC9}

.nx .nx-numf:not(:has(input:disabled,textarea:disabled)):hover,
.nx .nx-rowfilter:not(:has(input:disabled)):hover,
.nx textarea.nx-ta:not(:disabled):hover,.nx .nx-qimpta:not(:disabled):hover,
.nx .nx-field:not(:disabled):hover,.nx .nx-num3:not(:disabled):hover,
.nx .nx-nameinput:not(:disabled):hover,.nx .nx-tokens:not(:has(input:disabled)):hover,
.nx .nx-fldrow > .nx-numf:not(:has(input:disabled)):hover,
.nx .nx-bigrow .nx-numf:not(:has(input:disabled)):hover,
.nx .nx-phr .nx-numf:not(:has(input:disabled)):hover{border-bottom-color:var(--hover-line)}

.nx .nx-numf:not(:has(input:disabled,textarea:disabled)):hover::after,
.nx .nx-flds > span:not(.nx-sepv):not(:has(input:disabled,textarea:disabled)):hover::after,
.nx .nx-bigrow > span:not(.nx-sepv):not(:has(input:disabled,textarea:disabled)):hover::after,
.nx .nx-row.nx-setting .nx-ctl .nx-numf:not(:has(input:disabled)):hover::after,
.nx .nx-subrow .nx-numf:not(:has(input:disabled)):hover::after,
.nx .nx-arow3 .nx-val2.nx-edit:not(:has(input:disabled)):hover::after,
.nx .nx-arow3 .nx-aslot.nx-code:not(:has(input:disabled)):hover::after{border-top-color:var(--hover-line);background:none}

/* the lit region is the click target, so it says so with the caret cursor */
.nx .nx-numf:not(:has(input:disabled,textarea:disabled)),
.nx .nx-flds > span:not(.nx-sepv):not(:has(input:disabled,textarea:disabled)),
.nx .nx-bigrow > span:not(.nx-sepv):not(:has(input:disabled,textarea:disabled)){cursor:text}
.nx .nx-numf:has(input:disabled),.nx .nx-flds > span:has(input:disabled),
.nx .nx-bigrow > span:has(input:disabled){cursor:default}

/* 4 Oct: a search in a bar borrows the bar's line as its underline, so it has no line of its own to colour.
   It gets a segment sitting exactly on the bar's line, the width of the field: pale blue on hover, blue on focus,
   like every other field. Searches that already draw their own line (the Results bar, and every search on phones)
   colour that line instead, so they take no segment. */
@media (min-width:761px){
  .nx .nx-rowfilter{position:relative}
  .nx .nx-rowfilter::after{content:'';position:absolute;left:0;right:0;top:100%;border-top:1px solid transparent;pointer-events:none}
  
  .nx .nx-dhead .nx-rowfilter::after,.nx .nx-dtools .nx-rowfilter::after{top:calc(100% - 1px)}
  .nx .nx-rowfilter:not(:has(input:disabled)):hover::after{border-top-color:var(--hover-line)}
  .nx .nx-rowfilter:focus-within::after{border-top-color:var(--blue)}
}
.nx .nx-rowfilter:focus-within{border-bottom-color:var(--blue)}
/* on phones the bars stack and each search draws its own line, under id-scoped rules, so the states are set there too */
@media (max-width:760px){
  .nx #survBar > .nx-rowfilter:hover,.nx #dashView .nx-dtools .nx-rowfilter.nx-rsearch:hover{border-bottom-color:var(--hover-line)}
  .nx #survBar > .nx-rowfilter:focus-within,.nx #dashView .nx-dtools .nx-rowfilter.nx-rsearch:focus-within{border-bottom-color:var(--blue)}
}

/* 4 Oct: focus always wins over hover, so a field you clicked into reads as focused while the pointer is still on it */
.nx .nx-numf:not(:has(input:disabled,textarea:disabled)):focus-within,
.nx .nx-rowfilter:not(:has(input:disabled)):focus-within,
.nx .nx-tokens:not(:has(input:disabled)):focus-within,
.nx textarea.nx-ta:not(:disabled):focus,.nx .nx-qimpta:not(:disabled):focus,
.nx .nx-field:not(:disabled):focus,.nx .nx-num3:not(:disabled):focus,.nx .nx-nameinput:not(:disabled):focus,
.nx .nx-fldrow > .nx-numf:not(:has(input:disabled)):focus-within,
.nx .nx-bigrow .nx-numf:not(:has(input:disabled)):focus-within,
.nx .nx-phr .nx-numf:not(:has(input:disabled)):focus-within{border-bottom-color:var(--blue)}
.nx .nx-numf:not(:has(input:disabled,textarea:disabled)):focus-within::after,
.nx .nx-flds > span:not(.nx-sepv):not(:has(input:disabled,textarea:disabled)):focus-within::after,
.nx .nx-bigrow > span:not(.nx-sepv):not(:has(input:disabled,textarea:disabled)):focus-within::after,
.nx .nx-row.nx-setting .nx-ctl .nx-numf:not(:has(input:disabled)):focus-within::after,
.nx .nx-subrow .nx-numf:not(:has(input:disabled)):focus-within::after,
.nx .nx-arow3 .nx-val2.nx-edit:not(:has(input:disabled)):focus::after,
.nx .nx-arow3 .nx-aslot.nx-code:not(:has(input:disabled)):focus::after{border-top-color:var(--blue);background:none}
@media (min-width:761px){
  .nx .nx-rowfilter:not(:has(input:disabled)):focus-within::after{border-top-color:var(--blue)}
}
@media (max-width:760px){
  .nx #survBar > .nx-rowfilter:not(:has(input:disabled)):focus-within,.nx #dashView .nx-dtools .nx-rowfilter.nx-rsearch:not(:has(input:disabled)):focus-within{border-bottom-color:var(--blue)}
}



/* 4 Oct: the right end of the survey line closes tight: nothing there needs aligning, and empty slots hold no gap */
.nx #survEyebrow .nx-otools > span:empty{display:none}

/* 4 Oct: the survey's section line reads like the audience's "Screening questions 3": label, count, then the view
   select and the collapse control. The second count is a plain descriptor, so it keeps sentence case. */
.nx #survSec .nx-n + .nx-n{text-transform:none;letter-spacing:0;margin-left:10px}
/* 4 Oct: the language heading and the row that hangs under it. The controls read as one quiet group: same 16px
   rhythm, the select and the collapse control quiet, the search ending the row on the row's own line. */
/* commit pass: sizing a control to its text is a desktop nicety. On phones every control keeps a 40px touch area,
   so the counts row's select and collapse icon grow back to a tappable height without changing how they read. */
@media (max-width:760px){
  .nx .nx-survobj > .nx-facts > .nx-rt > .nx-ico,
  .nx .nx-survobj > .nx-facts > .nx-rt > .nx-selbox,
  .nx .nx-survobj > .nx-ohead .nx-aico{min-height:40px;display:inline-flex;align-items:center;transform:none}
}

/* 4 Oct, commit pass: on phones the survey line's right group (id, state, actions) and the language line's search
   wrap onto their own line instead of running off the screen */
@media (max-width:760px){
  /* 5 Oct: the line stays one line while it fits; a right group that cannot fit wraps as a whole, right aligned (rules 45, 46) */
  .nx #survEyebrow{flex-wrap:wrap;row-gap:8px}
  .nx #survEyebrow .nx-rt{flex-wrap:nowrap;margin-left:auto;flex:0 1 auto;width:auto;padding-top:0;justify-content:flex-end;min-width:0}
  .nx #survEyebrow .nx-otools{display:inline-flex;align-items:center;margin-left:0;flex:0 0 auto}
  .nx .nx-survobj > .nx-ohead{flex-wrap:wrap;row-gap:10px}
  .nx .nx-survobj > .nx-ohead > .nx-rt{flex:1 0 100%;margin-left:0;justify-content:flex-start}
  .nx .nx-obj.nx-survobj > .nx-ohead .nx-rowfilter{flex:1 1 auto;min-width:0;max-width:100%;margin:0}
  .nx .nx-obj.nx-survobj > .nx-ohead .nx-rowfilter input{width:100%;min-width:0;max-width:100%;text-align:left}
  .nx .nx-obj.nx-survobj > .nx-ohead > .nx-rt{min-width:0;max-width:100%}
}

/* 4 Oct: the survey block takes the audience's own spacing: 34px above a section label, 44px from that label to the
   identity line under it, then 20px down to the figures and 6px under them before the content */
.nx #survEyebrow{margin-top:34px}
.nx .nx-survobj > .nx-facts{padding:20px 0 6px;margin:0;border-bottom:0}
.nx .nx-survobj #surveyBody{margin-top:0}
.nx .nx-survobj #surveyBody > *:first-child{margin-top:0}
.nx .nx-survobj #surveyBody > .nx-sec:first-child > .nx-secbar:first-child{margin-top:0}

/* 4 Oct: a line between two objects is heavier than a line inside one. The divider between audiences in the list
   takes the full line colour, so the quiet hairline under a name reads as the lighter of the two. */
.nx .nx-lrow,.nx .nx-arow2.nx-detailed{border-bottom-color:var(--line)}
/* each audience gets air of its own in Detailed, so the divider reads as the edge of a block rather than another
   line in a stack: 34px above the name, 34px under the figures */
.nx .nx-arow2.nx-detailed{padding-top:34px;padding-bottom:34px}
.nx .nx-arow2.nx-detailed > .nx-ar1{border-bottom-color:var(--hair)}

/* 4 Oct: the audience name line closes with a hairline, opened and in the Detailed list, so the id, the icons and the
   kebab on its right have an edge to sit against, the same way the survey's language line closes */
.nx .nx-arow2.nx-open > .nx-ar1,.nx .nx-arow2.nx-detailed > .nx-ar1{padding-bottom:8px;
  border-bottom:1px solid var(--hair)}
.nx .nx-arow2.nx-open > .nx-ar2,.nx .nx-arow2.nx-detailed > .nx-ar2{padding-top:8px}

/* 4 Oct: a right-aligned search sizes itself to what it holds, so the magnifier always sits just before the text
   instead of stranded at a fixed field width. It still cannot grow past the room the row gives it. */
.nx .nx-rowfilter.nx-rsearch input,.nx .nx-survobj > .nx-ohead .nx-rowfilter input{width:auto;max-width:260px}

/* 4 Oct: a right-aligned search keeps 3px of air at the row's edge, so the text does not touch it */
.nx .nx-rowfilter input[style*="text-align:right"],.nx .nx-rowfilter.nx-rsearch input,.nx .nx-survobj > .nx-ohead .nx-rowfilter input{padding-right:3px}

/* 4 Oct: the language line. One anchor for the whole row: everything centres on the row, and the search field is
   stretched to the row's full height, so its underline lands on the row's hairline by construction. Nothing here
   carries a padding or a height whose only job is to compensate for something else. */
.nx .nx-obj.nx-survobj > .nx-ohead{cursor:pointer;margin-top:30px;align-items:center;padding-bottom:6px;
  border-bottom:1px solid var(--hair)}
.nx .nx-survobj > .nx-ohead > .nx-rt{display:inline-flex;align-items:stretch;gap:16px;margin-left:auto}
.nx .nx-survobj > .nx-ohead .nx-aico{align-self:center;color:var(--faint)}
.nx .nx-survobj > .nx-ohead .nx-aico.nx-warnlang{color:var(--amber)}
/* the search is the one the Results bar uses, same declarations: stretched to the row, its own 1px underline,
   pulled 7px below the row's line, 196px of right-aligned text with the magnifier before it */
.nx .nx-survobj > .nx-ohead .nx-rowfilter{flex:none;align-self:stretch;height:auto;margin:0 0 -8px;
  padding:0 0 0 2px;border-radius:0;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:var(--line)}
.nx .nx-survobj > .nx-ohead .nx-rowfilter::after{content:none}
.nx .nx-survobj > .nx-ohead .nx-rowfilter input{text-align:right}

/* the figures row under it, and its controls, on one baseline */
.nx .nx-survobj > .nx-facts{align-items:baseline}
.nx .nx-survobj > .nx-facts > .nx-rt{display:inline-flex;align-items:baseline;gap:16px;margin-left:auto}
.nx .nx-survobj > .nx-facts > .nx-rt > .nx-selbox{display:inline-flex;align-items:baseline;padding-top:0;
  padding-bottom:0;height:auto;line-height:inherit;margin:0}
.nx .nx-survobj > .nx-facts > .nx-rt > .nx-selbox i[data-i]{align-self:center}
.nx .nx-survobj > .nx-facts > .nx-rt > .nx-ico{align-self:baseline;height:auto;transform:translateY(5px)}

/* 4 Oct: the library picker uses the platform's bar, built exactly like the survey bar was: the bar carries the line,
   the active tab's underline sits on it, the topics filter next to the tabs, and the search ends the row */






/* ===== 4 Oct: picking in a list, one system =====
   One control, two states, at every level: a tick in the quiet grey when not picked, the blue tick when picked.
   A picked row's text darkens one step (it does not change weight), a parent row says how much is picked in words,
   and the control sits centred on the first line of its row. Answer rows follow question rows, differing only by
   the indent. */
.nx .nx-tick,.nx .nx-rtick{color:var(--line-3);align-self:flex-start;margin-top:1px;height:18px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;overflow:visible}
.nx .nx-tick i[data-i],.nx .nx-rtick i[data-i]{display:grid;place-items:center;line-height:1}
.nx .nx-tick:hover,.nx .nx-rrow:hover .nx-rtick{color:var(--blue-ink)}
.nx .nx-tick.nx-on,.nx .nx-rrow.nx-on .nx-rtick,.nx .nx-libsel .nx-tick,
.nx .nx-pickrow.nx-on .nx-tick,.nx .nx-opt.nx-on .nx-tick{color:var(--blue)}
.nx .nx-libq2 .nx-nm2{color:var(--body)}
.nx .nx-libq2:has(.nx-tick.nx-on) .nx-nm2,.nx .nx-libsel .nx-nm2,
.nx .nx-pickrow.nx-on .nx-nm{color:var(--navy);font-weight:400}
/* 4 Oct: hovering a row darkens its tick, it does not recolour the text. The mark is the control, so the mark reacts. */
.nx .nx-libq2:hover .nx-tick,.nx .nx-libsel:hover .nx-tick,.nx .nx-pickrow:hover > .nx-tick,
.nx .nx-rrow:hover .nx-rtick,.nx .nx-srow:hover .nx-spick{color:var(--slate)}
.nx .nx-libq2:hover .nx-tick.nx-on,.nx .nx-libsel:hover .nx-tick.nx-on,.nx .nx-pickrow:hover > .nx-tick.nx-on,
.nx .nx-rrow.nx-on:hover .nx-rtick,.nx .nx-srow.nx-picked:hover .nx-spick{color:var(--blue-dark)}
.nx .nx-libans .nx-tick,.nx .nx-libans .nx-rtick{align-self:center;margin-top:0}
/* an answer row follows the question row exactly: quiet while it is not picked, ink and a shade heavier when it is.
   The only difference between the two levels is the indent. */
/* an unpicked answer reads as quietly as an unpicked question, and darkens to ink when it is picked */
.nx .nx-libans .nx-pickrow,.nx .nx-libagrid .nx-pickrow{color:var(--muted);font-weight:400}
.nx .nx-libans .nx-pickrow:hover,.nx .nx-libagrid .nx-pickrow:hover{color:var(--muted)}
.nx .nx-libans .nx-pickrow:has(.nx-tick.nx-on):hover,.nx .nx-libagrid .nx-pickrow:has(.nx-tick.nx-on):hover{color:var(--navy)}
.nx .nx-libans .nx-pickrow:has(.nx-tick.nx-on),.nx .nx-libagrid .nx-pickrow:has(.nx-tick.nx-on){color:var(--navy);font-weight:400}
.nx .nx-libans .nx-pickrow:has(.nx-tick.nx-on) .nx-nm2,
.nx .nx-libans .nx-pickrow:has(.nx-tick.nx-on) span:not(.nx-tick){color:var(--navy);font-weight:400}
.nx .nx-libsel .nx-tick{margin-top:6px}
/* 4 Oct: the AI action row. The button is disabled until there is a brief, so it must read as waiting rather than
   broken: the platform's quiet disabled state, not a washed-out primary. The note goes under the row instead of
   fighting the button for a 300px column, where it wrapped onto three lines. */
.nx .nx-sendrow{flex-wrap:wrap;row-gap:8px}
.nx .nx-sendrow .nx-btn.nx-pri:disabled{opacity:1;background:var(--wash);color:var(--faint);box-shadow:none}
.nx .nx-sendrow .nx-btn.nx-pri:disabled i[data-i]{color:var(--faint)}
.nx .nx-sendrow .nx-keys{flex:1 0 100%;margin:0}

/* the expander sits on the answers line it opens, not centred on the block */
.nx .nx-libq2 > .nx-ico,.nx .nx-libsel > .nx-ico,.nx .nx-pickrow > .nx-ico{align-self:flex-end;margin-bottom:-5px}

/* the answers line under a question opens and closes it, so the chevron is not the only way in */
.nx .nx-libq2 .nx-lt,.nx .nx-libsel .nx-lt{cursor:pointer}
.nx .nx-libq2 .nx-lt:hover,.nx .nx-libsel .nx-lt:hover{color:var(--body)}

/* ===== 4 Oct: one list model for picking questions, in the library and in the AI panel =====
   The preview line takes the width it has (every answer listed, cut by the row's edge, not after three), the rows are
   flat list rows with a hairline rather than padded boxes, and the density switch is underline tabs like every other
   list in the product. */
.nx .nx-libq2 .nx-lt,.nx .nx-libsel .nx-lt,.nx .nx-pickrow .nx-lt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:calc(100% - 40px)}
/* commit pass: a pick row's text block shrinks, so a long answer list truncates instead of pushing the id off the row */
.nx .nx-pickrow,.nx .nx-pickrow > div{min-width:0}
.nx .nx-pickrow .nx-nm{overflow:hidden;text-overflow:ellipsis}
/* the rows keep the panel's own gutter: flat means no box, not no margin. Zeroing it clipped the ticks and the ids. */
.nx .nx-rrow,.nx .nx-rans,.nx #sBody .nx-pick{padding-left:22px;padding-right:22px}
.nx .nx-rans .nx-pick{padding-left:32px}
.nx .nx-rans{padding-left:76px}
.nx .nx-rhead .nx-kinds{display:inline-flex;gap:14px}
.nx .nx-rhead .nx-kinds .nx-kind{font-size:12.5px}

/* 4 Oct: the AI rows read like the library rows. The answers are a quiet summary line cut by the row's edge, the
   question title stays ink (hover darkens, it does not turn blue), and the type control is the platform's quiet
   select rather than a boxed blue one. */
.nx .nx-rrow .nx-rmeta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 40px)}
.nx .nx-rrow:hover .nx-rq{color:inherit}
.nx .nx-rtype{height:auto;border:0;border-radius:0;background:none;color:var(--body);padding:0;
  font-size:12.5px;cursor:pointer;appearance:auto}
.nx .nx-rtype:hover{color:var(--navy)}
.nx .nx-pctl{margin-top:7px}

/* 4 Oct: the answers under a generated question are the same rows the library uses, indented, with the same tick.
   The answers line, the count and the chevron all open and close them. */
.nx .nx-rrow .nx-rmeta{cursor:pointer}
.nx .nx-rrow .nx-rmeta:hover{color:var(--body)}
.nx .nx-rcount{font-size:12.5px;color:var(--muted);white-space:nowrap;margin-left:auto;align-self:center;cursor:pointer}
.nx .nx-rchev{align-self:center;cursor:pointer;color:var(--line-3)}
.nx .nx-rchev:hover{color:var(--slate)}
.nx .nx-rans{padding:0 0 12px 54px;border-bottom:1px solid var(--hair)}
.nx .nx-rans .nx-ransrow{display:flex;gap:14px;align-items:center;padding:7px 0;color:var(--muted);cursor:pointer}
.nx .nx-rans .nx-ransrow.nx-on{color:var(--navy)}
.nx .nx-rans .nx-ransrow:hover .nx-tick{color:var(--slate)}
.nx .nx-rans .nx-tick{margin-top:0;align-self:center}

/* ===== 4 Oct: every list of questions uses one model =====
   The pick mark is a tick in both states (grey at rest, blue when picked) wherever picking happens: the library, the
   import panels, the survey picker, the Insights editors, the postcode collections and the billing lists. Rows are
   flat, with the panel's gutter and a hairline. Mode switches on these panels are underline tabs, never boxed. */
.nx .nx-srow{padding:14px 22px}
.nx .nx-srow .nx-spick i[data-i]{font-size:15px}
.nx .nx-impsearch{padding:14px 20px}
.nx .nx-impsearch input{border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;padding:4px 0;width:100%}
.nx .nx-impsearch input:hover{border-bottom-color:var(--hover-line)}
.nx .nx-impsearch input:focus{border-bottom-color:var(--blue);outline:0}
/* the targeting templates pick ages with a boxed segmented control: underline tabs, as everywhere else */
.nx .nx-npcard .nx-seg,.nx #npBody .nx-seg{border:0;border-radius:0;gap:14px;background:none}
.nx .nx-npcard .nx-seg span,.nx #npBody .nx-seg span{background:none;border:0;padding:0 0 8px;color:var(--muted)}
.nx .nx-npcard .nx-seg span.nx-on,.nx #npBody .nx-seg span.nx-on{background:none;color:var(--navy);
  box-shadow:inset 0 -2px 0 var(--blue)}

/* ===== 4 Oct: the pick row component (rules 41 and 42 in one place) =====
   Row 1: tick, title, id at the right end. Row 2: count and preview, chevron then x at the right end.
   Row 3: the type. Both text rows are one line and truncate. */
.nx .nx-pick{display:flex;align-items:flex-start;gap:14px;padding:12px 0;border-bottom:1px solid var(--hair);
  cursor:pointer;color:var(--muted);min-width:0}
.nx .nx-pick.nx-off{cursor:default}
.nx .nx-pick.nx-open{border-bottom-color:transparent}
.nx .nx-pmark{flex:none;width:18px;height:20px;margin-top:0;display:inline-flex;align-items:center;justify-content:center;
  color:var(--line-3);line-height:1}
.nx .nx-pmark i[data-i]{display:grid;place-items:center;font-size:15px;line-height:1}
.nx .nx-pick.nx-on .nx-pmark{color:var(--blue)}
.nx .nx-pick:not(.nx-off):hover .nx-pmark{color:var(--slate)}
.nx .nx-pick.nx-on:not(.nx-off):hover .nx-pmark{color:var(--blue-dark)}
.nx .nx-pbody{flex:1;min-width:0}
.nx .nx-p1,.nx .nx-p2{display:flex;align-items:center;gap:14px;min-width:0}
/* 10 Oct: each text line keeps its own height whatever icon sits on it; icons overflow it, centred, so the tick
   lines up with the title on every row */
.nx .nx-p1{height:20px;line-height:20px}
.nx .nx-p2{height:18px;line-height:18px}
.nx .nx-pact{flex:none;width:28px;height:100%;display:flex;align-items:center;justify-content:center;overflow:visible}
.nx .nx-pact .nx-ico{flex:none;color:var(--line-3)}
.nx .nx-pact .nx-ico:hover{color:var(--slate)}
.nx .nx-pswitch{flex:none;margin-left:-8px}
.nx .nx-pqid{margin-left:auto}
.nx .nx-ptitle{flex:0 1 auto;min-width:0;font-size:13.5px;color:var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nx .nx-pick.nx-on .nx-ptitle{color:var(--navy)}
.nx .nx-pqid{flex:none;font-family:var(--mono);font-size:11.5px;color:var(--faint)}
.nx .nx-p2{margin-top:4px}
.nx .nx-ppreview{flex:1;min-width:0;font-size:12px;color:var(--faint);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;cursor:pointer}
.nx .nx-ppreview:hover{color:var(--muted)}
.nx .nx-p3{margin-top:7px}
.nx .nx-p3 .nx-selbox{border:0;background:none;padding:0;height:auto;font-size:12.5px;color:var(--body)}
.nx .nx-pick.nx-child{padding:7px 0;border-bottom:0;font-size:13px}
.nx .nx-pkids{padding:0 0 12px 32px}
@media (max-width:760px){
  .nx .nx-pick > .nx-ico,.nx .nx-pick > .nx-pchev{min-height:40px;align-self:center;margin-bottom:0}
}

/* ===== 4 Oct: the minimal audience row ===== */
.nx .nx-amin{cursor:pointer;padding:12px 0 0}
.nx .nx-amin1{display:flex;align-items:center;gap:12px;min-width:0;padding-bottom:10px}
.nx .nx-aminnm{flex:1;min-width:0;font-size:13.5px;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nx .nx-amin:hover .nx-aminnm{color:var(--blue)}
.nx .nx-aminid{flex:none;font-family:var(--mono);font-size:11.5px;color:var(--faint)}
/* the status keeps its own column so the words line up down the list, and its dot carries the bar's colour */
.nx .nx-aminst{flex:none;display:inline-flex;align-items:center;justify-content:flex-end;gap:8px;font-size:12.5px;
  color:var(--body);white-space:nowrap;min-width:108px}
.nx .nx-aminst .nx-dot{flex:none;width:7px;height:7px;border-radius:50%}
.nx .nx-aminbar{height:3px;border-radius:2px;background:var(--wash);overflow:hidden}
.nx .nx-aminbar i{display:block;height:100%;border-radius:2px}

/* 4 Oct: the dashboard project row. The right group ends at the row's edge (rule 46), the id sits before the status,
   and the project's id lines up with the audience ids underneath it. The second line opens the audiences. */
.nx .nx-ph3{display:flex;align-items:center;gap:12px;min-width:0}
.nx .nx-ph3 .nx-onm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nx .nx-prt{flex:none;display:inline-flex;align-items:center;gap:12px}
.nx .nx-prt .nx-oid{flex:none}
.nx .nx-prt .nx-pst{flex:none;display:inline-flex;align-items:center;justify-content:flex-end;gap:8px;min-width:108px}
.nx .nx-prt .nx-pst .nx-dot{flex:none;width:7px;height:7px;border-radius:50%}
.nx .nx-pfacts{display:flex;align-items:center;gap:26px;cursor:pointer}
.nx .nx-pfacts .nx-pexp{margin-left:auto;color:var(--line-3)}
.nx .nx-pfacts:hover .nx-pexp{color:var(--slate)}
/* the audience ids sit in the same column as the project's: same right group, same status width */
.nx .nx-alist .nx-aminid{flex:none}

/* 4 Oct: the audience switcher. The search and the list underneath were touching, so the first row read as part of
   the field. The search keeps its own space, and "All audiences" gets the room a row needs. */
.nx .nx-menu .nx-msearch{padding:4px 10px 12px}
.nx .nx-menu .nx-msearch + .nx-mi,.nx .nx-menu .nx-rowfilter + .nx-mi{margin-top:4px}
.nx .nx-menu .nx-mi{padding:9px 10px}

/* the audience switcher's own search: it sits directly on the first row, so it needs its own space below the line */
.nx .nx-menu .nx-srch{padding:4px 10px 0;margin-bottom:12px}
.nx .nx-menu .nx-srch + .nx-mi{margin-top:2px}

/* 5 Oct: the bar carries a hairline, and a vertical divider sets the main select apart from the tabs it scopes */

/* 5 Oct: the bar's divider. It sets the filter the tab counts are computed within apart from the tabs themselves,
   since both are filters and would otherwise read as one run. It hangs from the tabs' own line, and there is never
   one before the search: the magnifier already marks where that starts. */
/* ===== 5 Oct: the bar =====
   A fixed structure that owns its own geometry. It is 46px tall, draws its line at its own bottom edge, and places
   everything it holds against that line: the tabs and their underline, the divider, the search and its underline.
   Nothing inside measures anything outside, so a bar looks the same in a page, a panel or a slider. */





/* tabs: the label centres in the bar, the active underline is drawn on the bar's line */






/* the divider: drawn by the bar, 20px centred on the bar's own middle */


/* the search: ends the bar, its underline is the bar's line */








/* every bar carries the hairline, not the heavier line */
.nx .nx-filterbar.nx-mbar{border-bottom-color:var(--hair)}

/* 5 Oct: every bar behaves the same. Its contents sit on the bar's own line (bottom aligned, no padding under them),
   its tabs carry the same 12px under the label so the active underline lands on that line, and anything hanging from
   the line, the divider included, lands at the same place on every bar. */





/* the search on a bar sits ON the bar's line: it stretches to it and borrows it, it never draws a second line
   floating above, and it is wide enough for its own placeholder */



/* 5 Oct: the Results bars take the bar's geometry: 54px tall, every item sitting on the bar's own line, the search
   ending the row. The same numbers the bar component uses, so these read the same as the audience and library bars. */














/* the divider between the filter the tabs count within and the tabs themselves */

@media (max-width:760px){
  /* 5 Oct: on phones a bar is two rows. The filters fold into the Filters button and the search takes the second row,
     ending on the bar's own line, exactly as the audience bar does. */
  
  
  
  
  
  
  
  
  
  
}

/* ===== 5 Oct: the bar on phones =====
   One layout for every bar, owned by the component, not inherited per screen.
   Row 1: the filters, in the desktop order (select, divider, tabs, extra filters), with two or more selects folded
          behind the Filters button.
   Row 2: the search, full width, sitting on the bar's own line.
   Nothing else may reorder these. */
@media (max-width:760px){
  
  
  
  
  
  
  /* the filters stay on one row: the select, its divider and the tabs share it, and the tabs scroll if they must */
  
  
  /* on a phone a bar is exactly two rows: everything that filters on the first, the search on the second */
  
  
  
  
  
  
  
  
}
/* ---- block 68 ---- */
/* 5 Oct: between the phone layout and 900px the top bar's fixed parts no longer fit with the full finder (the account
   menu ran 31px off the screen from 761 to 830, found by the audit's rule 7 check). The finder collapses to its icon,
   as it already does once the page is scrolled. */
@media (min-width:761px) and (max-width:900px){
  .nx .nx-topbar .nx-finder{min-width:0;width:34px;padding:0;justify-content:center;flex:none}
  .nx .nx-topbar .nx-finder .nx-fdtxt,.nx .nx-topbar .nx-finder .nx-fdkbd{display:none}
}
/* ---- block 69 ---- */
/* 5 Oct: the pinned stack paints above every table head in the content. A head that leaves with its table slides
   behind the tabs and the bar, never over them (Insights Compare on phones). */
.nx #resView > .nx-subtabs{z-index:8}
/* ---- 6 Oct ---- */
/* Inside a field row (.nx-flds, .nx-bigrow) the row's line is the underline: on hover and focus the segment on that
   line lights up (the span::after rules above). The field itself draws no line of its own there. The 4 Oct hover and
   focus rules lit the field's own bottom border as well, which put a second line 7px above the row line. */
.nx .nx-flds .nx-numf:not(:has(input:disabled,textarea:disabled)):hover,
.nx .nx-bigrow .nx-numf:not(:has(input:disabled,textarea:disabled)):hover,
.nx .nx-flds .nx-numf:not(:has(input:disabled,textarea:disabled)):focus-within,
.nx .nx-bigrow .nx-numf:not(:has(input:disabled,textarea:disabled)):focus-within{border-bottom-color:transparent}

/* 8 Oct: the past-file rows take the same 34px tile as the kind rows above them, so titles and actions share one left edge */
.nx .nx-lgrow.nx-frow .nx-sq2{width:34px;height:34px;border-radius:8px;display:grid;place-items:center}
.nx .nx-lgrow.nx-frow .nx-sq2 i[data-i]{font-size:17px}

/* 8 Oct: in a scenario row the unit sits inside the field, so the hover and focus line runs under "55 %" and clicking
   the unit focuses the input, as in every other field (the line stopped at the number). The field keeps its width:
   the input shrinks to its digits and the unit follows. */
.nx .nx-fsrow .nx-fc .nx-numf{align-items:center;gap:4px}
.nx .nx-fsrow .nx-fc .nx-numf input{width:auto;flex:0 1 auto;min-width:1ch;field-sizing:content}
.nx .nx-fsrow .nx-fc .nx-numf em{margin-left:0;padding-left:0;flex:none}

/* 8 Oct: costs at the right (rule 11): N, IR, LOI, Field, then Available, CPI and the bold Cost, then the remove slot that
   every row carries so the columns line up (hidden on the Now row, as before). */
.nx .nx-fsrow .nx-fx,.nx .nx-fshead .nx-fx{flex:none;width:24px;display:flex;align-items:center;justify-content:flex-end}
.nx .nx-fsrow .nx-fx .nx-ico.nx-slot,.nx .nx-fshead .nx-fx .nx-ico.nx-slot{visibility:hidden;pointer-events:none}
.nx .nx-fshead .nx-fx .nx-ico.nx-slot{height:0;min-height:0;overflow:hidden}
.nx .nx-fsrow .nx-fc b{font-weight:600;color:var(--navy)}

/* 8 Oct: while an audience's feasibility is being checked, its block takes no input: scenario rows, fields, remove and
   add are off, the links too. Other audiences stay live. The Check button itself shows the progress, as before. */
.nx .nx-fsblock.nx-checking .nx-fsrow{pointer-events:none;cursor:default}
.nx .nx-fsblock.nx-checking .nx-fsrow .nx-numf input{color:var(--faint)}
.nx .nx-fsblock.nx-checking .nx-fsrow .nx-fx .nx-ico{visibility:hidden}

/* 10 Oct: a condition line is the question; open, it carries the switcher caret after it (as the audience name does) and
   the picked answers show only as chips below; closed, the answers follow the question as its summary */
.nx .nx-cline .nx-cq{display:inline-flex;align-items:center;gap:4px;min-width:0}
.nx .nx-cline .nx-cq .nx-cqt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.nx .nx-cond2.nx-open .nx-cline .nx-cq{max-width:none;flex:1 1 0;min-width:0}
.nx .nx-cline .nx-cq .nx-caret{flex:none}
/* 10 Oct: the question being edited is read in full: it wraps, and its switcher follows the last word */
.nx .nx-cond2.nx-open .nx-cline .nx-cq{display:block;white-space:normal;overflow:visible}
.nx .nx-cond2.nx-open .nx-cline .nx-cq .nx-cqt{white-space:normal;overflow:visible}
.nx .nx-cond2.nx-open .nx-cline .nx-cq .nx-caret{display:inline-grid;vertical-align:middle;margin-left:4px}
.nx .nx-cond2.nx-open .nx-cline{align-items:flex-start}

/* 10 Oct: section lines keep their chevron right after the word on every phone and small-tablet width. The question
   rows' "chevron last" rule (order 6, max-width 760px) also caught section lines from 601 to 760px, so the chevron
   dropped under the links (reported on Design, the Audience line). */
@media (max-width:760px){
  .nx .nx-label > .nx-cv,.nx .nx-sublabel > .nx-cv{order:0}
}
/* 10 Oct: an open condition line has the same room above and below its question as a closed one (12px), so the
   question no longer sits on the hairline above it with the gap moved below */
.nx .nx-cond2.nx-open .nx-cline{min-height:0;padding:12px 0}
.nx .nx-cond2.nx-open .nx-cline > .nx-rowacts,.nx .nx-cond2.nx-open .nx-cline > .nx-cv{margin-top:0}
.nx .nx-cond2.nx-open .nx-cline .nx-cq .nx-caret{height:18px;margin:-4px 0 -2px 4px}
.nx .nx-cond2.nx-open .nx-cline{line-height:22px}
.nx .nx-cond2.nx-open .nx-cline > .nx-rowacts,.nx .nx-cond2.nx-open .nx-cline > .nx-cv{align-self:flex-start;margin-top:-1px}
.nx .nx-cond2.nx-open .nx-cline > .nx-rowacts,.nx .nx-cond2.nx-open .nx-cline > .nx-cv{height:22px;margin-top:0;display:flex;align-items:center;overflow:visible}

/* 10 Oct: an open condition ends with its own close: "Done" folds it into its summary line; an empty one says so in
   amber on the same line, so it is clear why Save is off */
.nx .nx-cfoot{display:flex;align-items:center;gap:12px;margin-top:14px;min-height:20px}
.nx .nx-cfoot .nx-hp{margin:0}
.nx .nx-cfoot .nx-lnk{margin-left:0} /* 10 Oct: Done sits on the left, where the hand already is after ticking answers */
.nx .nx-cfoot .nx-warnt{color:var(--amber)}
/* 10 Oct: the answer list's flat variant, for answers that sit under a line with no tick of its own (a filter
   condition): ticks start on the text edge, and the list draws no rule of its own (the condition draws it) */
.nx .nx-libans.nx-flat{padding-left:0;border-bottom:0}
@media (max-width:760px){.nx .nx-libans.nx-flat{padding-left:0}}

/* 10 Oct: the condition's parts read at three levels, as in every pick list: the question is the row's title
   (13.5px ink, the library's question size), the operator and its helpers are the quiet controls under it (12.5px,
   muted select, blue links), the answers are the list. Everything | None sit right after the operator, on the left,
   next to the answers they act on (they were at the far right, out of reach and out of sight). */
.nx .nx-cline .nx-cq{font-size:13.5px}
.nx .nx-cond2 .nx-crow2 .nx-selbox{font-size:12.5px;color:var(--muted)}
.nx .nx-cond2 .nx-crow2 .nx-selbox i[data-i]{font-size:13px}
.nx .nx-cond2 .nx-crow2 .nx-crt{margin-left:6px}

/* 10 Oct: a folded condition is two lines at every width, like a library row: the question (13.5px ink), then the
   operator and the answers under it (12.5px muted). On one line the two were hard to tell apart. */
.nx .nx-cond2:not(.nx-open) .nx-cline{flex-wrap:wrap;min-height:0;padding:12px 0;gap:3px 12px}
.nx .nx-cond2:not(.nx-open) .nx-cline .nx-cq{max-width:none;flex:1 1 0;min-width:0}
.nx .nx-cond2:not(.nx-open) .nx-cline .nx-cv2{flex:1 0 100%;order:9;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nx .nx-cond2:not(.nx-open) .nx-cline .nx-cv2.nx-warnt{color:var(--amber)}
.nx .nx-cond2:not(.nx-open) .nx-cline > .nx-rowacts,.nx .nx-cond2:not(.nx-open) .nx-cline > .nx-cv{height:22px;display:flex;align-items:center}
.nx .nx-cond2:not(.nx-open) .nx-cline{line-height:22px}
/* 10 Oct: a condition is the library pick row plus the library answer list; they draw their own rules */
.nx .nx-cond2{border-bottom:0}
/* 10 Oct: on touch the x and the chevron stack in one 44px column, each taking its own line, so the targets never overlap */
@media (hover:none){ .nx .nx-pact{width:44px} .nx .nx-pact .nx-ico{height:22px} }
/* 10 Oct: the header's plain-text facts wrap rather than overflow the slider */
.nx .nx-shd .nx-sub > .nx-subtx{flex:0 1 auto;min-width:0;white-space:normal;overflow:visible}
.nx .nx-shd .nx-sub > .nx-subtx > .nx-flag{display:inline-block;vertical-align:-1px;margin-right:8px}
/* 10 Oct: with no x, the id takes the end of the question line, its last letter over the chevron's ink, not its hit box */
.nx .nx-pick:has(.nx-pchev) .nx-p1 > .nx-pqid:last-child{margin-right:10px}
/* 10 Oct (commit): a name shown as text (the screener id) keeps its old line inside the fixed 42px head box, so it
   stays level with its switcher; only the input variant uses the 41px line */
.nx .nx-shd.nx-wide span.nx-nameinput{line-height:normal;padding:6px 0 8px}
/* 10 Oct (commit): on a phone the head's facts row wraps; the tools drop under the facts, right aligned, and never
   leave the panel (question heads lost their next arrow at 390) */
@media (max-width:480px){ .nx .nx-shd .nx-sub{flex-wrap:wrap;row-gap:2px} .nx .nx-shd .nx-sub .nx-subrt{padding-left:8px} }
/* 10 Oct (commit): in a flat pick row (tick, flag, name over a line, amount) every part centres on the row, so the
   tick sits level with the flag and the amount (reconcile scope rows) */
.nx .nx-pickrow > .nx-tick{align-self:center;margin-top:0}
/* 10 Oct (commit): the text block of a flat pick row takes the free width, so its second line ("724564 · 187 recorded")
   shows in full instead of cutting at the name's width; the flag never shrinks under a long name */
.nx .nx-pickrow > div:not([class]){flex:1 1 auto;min-width:0}
.nx .nx-pickrow > .nx-flag{flex:none}
.nx .nx-pickrow > .nx-tick{flex:none}
.nx .nx-pickrow > div:not([class]) > .nx-lt{max-width:none}
}

@layer components {
/* ===== 5 Oct: the bar, one component (nxBar). Every rule here is the bar's own: no screen adds to it. ===== */
.nx .nxb{position:relative;display:flex;align-items:flex-end;flex-wrap:nowrap;gap:0;box-sizing:border-box;
  height:54px;min-width:0;margin:0;padding:0;border:0;border-bottom:1px solid var(--hair);background:none;
  font-size:13.5px;line-height:1.55;color:var(--text);text-align:left}
.nx .nxb.nxb-sticky{position:sticky;top:var(--nxb-top,var(--tbh,0px));z-index:7;background:var(--paper)}
.nx .nxb > *{flex:none;margin:0}
/* row 1 holds everything that filters; on a wide screen it is not a box at all */
.nx .nxb-row{display:contents}
.nx .nxb-grp{display:inline-flex;align-items:flex-end;gap:20px;min-width:0;padding-bottom:13px;line-height:20.925px}
.nx .nxb-sel{display:inline-flex;align-items:center;gap:8px;min-width:0;cursor:pointer;color:var(--text);
  font-size:13.5px;white-space:nowrap;border:0;background:none;padding:0;outline-offset:3px}
.nx .nxb-sel .nxb-k{color:var(--muted)}
.nx .nxb-sel .nxb-k::after{content:":"}
.nx .nxb-sel .nxb-v{min-width:0;overflow:hidden;text-overflow:ellipsis}
.nx .nxb-sel i[data-i]{font-size:15px;color:var(--faint);flex:none}
.nx .nxb-sel:hover .nxb-v{color:var(--navy)}
.nx .nxb-sel.nxb-ph .nxb-v{color:var(--faint)}
.nx .nxb-dates{display:inline-flex;align-items:center;gap:10px}
.nx .nxb-to{color:var(--muted)}
.nx .nxb-tabs{display:inline-flex;align-items:stretch;gap:20px;align-self:stretch;min-width:0}
.nx .nxb-tab{position:relative;display:inline-flex;align-items:flex-end;padding:0 0 13px;cursor:pointer;
  color:var(--muted);font-size:13.5px;line-height:20.925px;white-space:nowrap;outline-offset:3px}
.nx .nxb-tab:hover,.nx .nxb-tab.nxb-on{color:var(--navy)}
.nx .nxb-tab.nxb-on::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--blue)}
.nx .nxb-tab .nxb-n{margin-left:7px;color:var(--faint);font-size:12.5px}
.nx .nxb-div{position:relative;align-self:stretch;width:1px;margin:0 16px}
.nx .nxb-div::before{content:'';position:absolute;left:0;top:50%;width:1px;height:20px;margin-top:-10px;background:var(--hair)}
.nx .nxb-note{padding:0 0 13px 20px;line-height:20.925px;color:var(--muted);font-size:13px;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto}
.nx .nxb-fill{flex:1 1 0;min-width:16px}
.nx .nxb-search{position:relative;display:inline-flex;align-items:center;gap:8px;flex:0 1 auto;min-width:0;
  margin:0;padding:0 0 13px;cursor:text}
.nx .nxb-search i[data-i]{font-size:17px;color:var(--text);flex:none}
.nx .nxb-search input{field-sizing:content;min-width:4ch;max-width:100%;width:auto;box-sizing:border-box;
  border:0;outline:0;background:none;margin:0;padding:0 3px 0 0;font:inherit;font-size:13px;line-height:20.925px;
  color:var(--navy);text-align:right}
.nx .nxb-search input::placeholder{color:var(--faint);opacity:1}
.nx .nxb-search::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:transparent}
.nx .nxb-search:hover::after{background:var(--hover-line)}
.nx .nxb-search:focus-within::after{background:var(--blue)}
.nx .nxb-fb{display:none}
@media (max-width:760px){
  .nx .nxb{height:auto;flex-wrap:wrap;align-items:stretch;row-gap:0}
  .nx .nxb-row{display:flex;flex:1 0 100%;flex-wrap:nowrap;align-items:stretch;min-width:0;order:1}
  .nx .nxb-row:empty{display:none}
  .nx .nxb-row > *{flex:none;min-width:0}
  .nx .nxb-fb{display:inline-flex;align-items:center;align-self:center;gap:6px;height:34px;margin:3px 12px 3px 0;
    padding:0 12px;border:1px solid var(--line);border-radius:99px;color:var(--navy);font-size:13px;cursor:pointer}
  .nx .nxb-fb i[data-i]{font-size:15px;color:var(--muted)}
  .nx .nxb-fb b{background:var(--blue);color:#fff;border-radius:99px;font-size:11px;font-weight:600;padding:0 6px;line-height:17px}
  /* a select keeps its words; the tabs give way and scroll */
  .nx .nxb-row > .nxb-grp{align-items:center;align-self:stretch;padding:0;min-height:40px;flex:0 0 auto;max-width:60%}
  .nx .nxb-fold .nxb-grp > .nxb-sel{display:none}
  .nx .nxb-fold .nxb-grp:not(:has(> :not(.nxb-sel))){display:none}
  .nx .nxb-sel{min-height:40px}
  .nx .nxb-row > .nxb-tabs{flex:0 1 auto;overflow-x:auto;scrollbar-width:none;min-height:40px}
  .nx .nxb-tabs::-webkit-scrollbar{display:none}
  .nx .nxb-tab{align-items:center;padding:0}
  .nx .nxb-tab.nxb-on::after{bottom:0}
  .nx .nxb-div{margin:0 12px}
  .nx .nxb-fold > .nxb-div:first-of-type{display:none}
  .nx .nxb-note,.nx .nxb-fill{display:none}
  .nx .nxb-search{order:9;flex:1 0 100%;height:40px;padding:0}
  .nx .nxb-search input{flex:1 1 auto;width:100%;text-align:left}
}
/* 6 Oct: the bar owns its phone text size. On phones the search input is 16px so iOS does not zoom on focus
   (before 6 Oct this came from a legacy rule for every input; the component now states it itself). */
@media (max-width:480px){
  .nx .nxb-search input{font-size:16px}
}

/* ===== 10 Oct: the incidence check, one component (nxIR). Every rule here is its own: no screen adds to it.
   Same scale as the Field metrics tables: 13.5px rows, figures in bold navy, one line per question. ===== */
.nx .nxir{--nxir-cols:minmax(0,1fr) 96px 96px 96px;--nxir-gap:14px;position:relative;margin:0;padding:0;
  font-size:13.5px;line-height:20px;color:var(--navy);text-align:left}
.nx .nxir-head,.nx .nxir-row,.nx .nxir-total{display:grid;grid-template-columns:var(--nxir-cols);column-gap:var(--nxir-gap);
  align-items:center;box-sizing:border-box;border-bottom:1px solid var(--hair)}
.nx .nxir-head{min-height:30px;font-size:11px;line-height:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.nx .nxir-head > span:not(:first-child){text-align:right}
.nx .nxir-row,.nx .nxir-total{min-height:44px;padding:12px 0}
.nx .nxir-q{display:grid;grid-template-columns:14px minmax(0,1fr);column-gap:10px;align-items:start;min-width:0}
.nx .nxir-q > i[data-i]{font-size:14px;height:20px;display:flex;align-items:center;color:var(--faint)}
.nx .nxir-qt{min-width:0;overflow-wrap:anywhere}
.nx .nxir-qid{margin-left:8px;font-family:var(--mono);font-size:11.5px;color:var(--faint)}
.nx .nxir-qt .nx-lowtag{margin-left:8px;white-space:nowrap}
.nx .nxir-ss{display:inline-flex;justify-content:flex-end;align-items:center;gap:5px;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.nx .nxir-ss i[data-i]{font-size:13px}
.nx .nxir-qir,.nx .nxir-tir,.nx .nxir-tv{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
/* a sample size under 30: that figure turns amber, and the target IR from there on, and the overall IR */
.nx .nxir-low .nxir-ss,.nx .nxir-carry .nxir-tir,.nx .nxir-haslow .nxir-tv{color:var(--amber)}
.nx .nxir-total{border-bottom-color:var(--line)}
.nx .nxir-tl{grid-column:1 / 4;display:inline-flex;align-items:center;gap:8px;font-weight:600}
.nx .nxir-tl i[data-i]{font-size:14px;color:var(--amber)}
.nx .nxir-tv{grid-column:4}
/* the running IR as a bar across the row: blue is who still qualifies, the light part is who this question screened out */
.nx .nxir-bar{grid-column:1 / -1;display:flex;height:4px;margin-top:10px;border-radius:99px;background:var(--hair);overflow:hidden}
.nx .nxir-bar > span{display:block;height:100%;flex:none}
.nx .nxir-keep{background:var(--blue)}
.nx .nxir-drop{background:color-mix(in srgb,var(--blue) 22%,transparent)}
.nx .nxir-carry .nxir-keep,.nx .nxir-haslow .nxir-total .nxir-keep{background:var(--amber)}
.nx .nxir-carry .nxir-drop{background:color-mix(in srgb,var(--amber) 22%,transparent)}
@media (max-width:600px){
  .nx .nxir{--nxir-cols:minmax(0,1fr) 52px 60px 52px;--nxir-gap:8px}
  .nx .nxir-head{min-height:44px;padding:6px 0;font-size:10px;letter-spacing:.06em}
  .nx .nxir-q{grid-template-columns:minmax(0,1fr)}
  .nx .nxir-q > i[data-i]{display:none}
}
}