/* N.FERT Survey Portal — brand styles (our own design, no framework). */
:root {
  --nf-navy: #283090;
  --nf-navy-dark: #1E2470;
  --nf-navy-tint: #EDEFF9;
  --nf-green: #28A848;
  --nf-green-txt: #1B7A34;
  --nf-green-tint: #E9F6ED;
  --nf-red: #C8121A;
  --nf-red-tint: #FDECEC;
  --nf-ground: #F4F5FA;
  --nf-surface: #FFFFFF;
  --nf-line: #E9ECF4;
  --nf-line-mid: #CBD0E0;
  --nf-ink: #14162B;
  --nf-ink-2: #4C5166;
  --nf-ink-3: #666C82;
  --nf-radius: 18px;
  --nf-radius-md: 12px;
  --nf-radius-sm: 11px;
  --nf-shadow: 0 1px 2px rgba(20,22,43,.035), 0 14px 30px -24px rgba(20,22,43,.45);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--nf-ground);
  color: var(--nf-ink-2);
  font-family: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.7;
}
.wrap { max-width: 1140px; margin-inline: auto; padding-inline: clamp(14px, 3vw, 30px); }
/* Deliberate, even breathing room between the sticky bar and the first card. */
main.wrap { padding-top: 20px; }

/* Optional background image (URL + opacity come from Settings). */
body.has-bg { position: relative; }
body.has-bg::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-position: center; background-size: cover; background-repeat: no-repeat;
}

/* Top bar */
.topbar { background: var(--nf-surface); border-bottom: 1px solid var(--nf-line); padding: 10px 0; position: sticky; top: 0; z-index: 20; box-shadow: 0 4px 18px -8px rgba(20,22,43,.18); }
.topbar-in { display: flex; align-items: center; gap: 16px; }
.logo { height: 56px; width: auto; }
.top-title { font-weight: 600; color: var(--nf-navy); font-size: 1.05rem; }

/* Cards */
.card {
  background: var(--nf-surface);
  border: 1px solid #D8DEEA;
  border-radius: var(--nf-radius);
  box-shadow: var(--nf-card-shadow);
  padding: 26px 24px;
  margin-bottom: 18px;
}
.intro h1, .thanks h1 { color: var(--nf-ink); font-size: 1.6rem; margin: 0 0 8px; letter-spacing: -.01em; }
/* Welcome hero: deep navy gradient head with soft glows, white type. */
.intro { padding: 0; overflow: hidden; }
.intro-hero {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 22px;
  background: linear-gradient(135deg, #E8ECF4 0%, #F3F6FA 55%, #E7F2EB 130%);
  border-bottom: 1px solid var(--nf-line);
  padding: 28px;
}
.hero-logo { height: 78px; width: auto; flex: none; }
.intro-hero h1 { position: relative; color: var(--nf-navy); font-size: 1.7rem; margin: 0 0 6px; }
.intro-hero .lede { position: relative; color: var(--nf-ink-2); margin: 0; }
.intro-body { padding: 22px 28px 28px; }
.intro-body p { margin: 0 0 12px; }
.intro-body p:last-child { margin: 0; }
/* Per-card accent tab on the right edge (colour from --accent in index.php).
   Inset top/bottom + fully rounded free end, so card corners stay intact.
   Toggle: $CARD_ACCENTS in index.php. */
.card.q.acc { position: relative; }
.card.q.acc::before {
  content: ""; position: absolute; top: 42px; bottom: 42px; left: 0; width: 6px;
  background: var(--accent); border-radius: 0 99px 99px 0;
  box-shadow: 2px 0 8px -2px rgba(20,22,43,.25);
}
.lede { color: var(--nf-ink-3); margin-top: 0; }

/* Progress */
.progress { height: 6px; border-radius: 99px; background: rgba(255,255,255,.75); margin: 18px 0 22px; overflow: hidden; box-shadow: 0 2px 8px rgba(20,22,43,.12); }
.progress-bar { height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--nf-navy), var(--nf-green)); transition: width .25s ease; }

/* Groups — one merged glass panel holding header + its question cards. */
.group {
  margin-bottom: 26px;
  background: rgba(255,255,255,.66);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 12px 26px -18px rgba(20,22,43,.5), inset 0 1px 0 rgba(255,255,255,.9);
}
.group-head { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 0; margin: 0 0 16px; }
.group-title { position: relative; color: var(--nf-ink); font-size: 1.4rem; letter-spacing: -.01em; margin: 0 0 12px; padding-inline-start: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(20,22,43,.10); }
.group-title::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 4px; bottom: 16px; width: 5px;
  border-radius: 99px; background: var(--gac, linear-gradient(180deg, var(--nf-navy), var(--nf-green)));
}
.group-desc { color: var(--nf-ink-2); font-size: .95rem; margin: 0; }
/* Question cards inside a section: plain white, no border. */
.group .card.q { border: 0; margin-bottom: 14px; }
.group .card.q:last-child { margin-bottom: 2px; }

/* Questions */
.q-text { font-weight: 600; color: var(--nf-ink); font-size: 1.08rem; }
.req { color: var(--nf-red); }
.q-help { font-size: .88rem; color: var(--nf-ink-3); margin-top: 2px; }
.q-error {
  color: var(--nf-red); background: var(--nf-red-tint);
  border: 1px solid rgba(200,18,26,.25);
  border-radius: var(--nf-radius-sm);
  padding: 8px 12px; font-size: .88rem; margin-top: 10px;
}
.form-error {
  color: var(--nf-red); background: var(--nf-red-tint);
  border: 1px solid rgba(200,18,26,.25);
  border-radius: var(--nf-radius-sm);
  padding: 12px 16px; margin-bottom: 16px;
}

/* Survey switcher bar (Admin -> Questions / Dashboard). */
.survey-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.survey-bar .sp { flex: 1; }
.survey-bar select { font: inherit; padding: 7px 10px; border: 1px solid var(--nf-line-mid); border-radius: 8px; max-width: 100%; }

/* Option rows */
.opts { display: grid; gap: 9px; margin-top: 14px; }
/* One-row layout: columns share the row, wrapping on narrow screens. */
.opts.opts-row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.opt {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--nf-line); border-radius: var(--nf-radius-md);
  padding: 13px 16px; cursor: pointer; margin: 0;
  transition: border-color .15s ease, background-color .15s ease;
}
.opt:hover { border-color: var(--nf-line-mid); }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt-dot, .opt-box {
  flex: none; width: 20px; height: 20px;
  border: 2px solid var(--nf-line-mid); background: #fff;
}
.opt-dot { border-radius: 50%; }
.opt-box { border-radius: 6px; }
.opt input:checked ~ .opt-dot { border-color: var(--nf-navy); background: radial-gradient(circle, var(--nf-navy) 0 5px, #fff 6px); }
.opt input:checked ~ .opt-box { border-color: var(--nf-navy); background: var(--nf-navy) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>') center/14px no-repeat; }
.opt input:focus-visible ~ .opt-dot, .opt input:focus-visible ~ .opt-box { outline: 2px solid var(--nf-navy); outline-offset: 2px; }
.opt:has(input:checked) { border-color: var(--nf-navy); background: var(--nf-navy-tint); }
.opt-label { font-size: .97rem; }

/* Text */
.txt {
  width: 100%; margin-top: 14px; font: inherit; color: var(--nf-ink);
  border: 1px solid var(--nf-line-mid); border-radius: var(--nf-radius-sm);
  padding: 12px 14px; resize: vertical;
}
.txt:focus { outline: none; border-color: var(--nf-navy); box-shadow: 0 0 0 3px rgba(40,48,144,.15); }

/* Array table */
.tbl-wrap { overflow-x: auto; margin-top: 14px; }
.tbl { border-collapse: collapse; width: 100%; font-size: .93rem; }
.tbl th, .tbl td { border: 1px solid var(--nf-line); padding: 10px 8px; text-align: center; }
.tbl thead th { background: #F7F8FC; color: var(--nf-ink-3); font-size: .78rem; }
.tbl tbody th { text-align: left; color: var(--nf-ink); font-weight: 500; }
.tbl tbody th small { display: block; font-weight: 400; color: var(--nf-ink-3); font-size: .8rem; }
.tbl tbody tr:nth-child(even) { background: #FBFCFE; }
.tbl tbody td:has(input:checked) { background: var(--nf-navy-tint); }
.cell { display: inline-flex; cursor: pointer; }
.cell input { width: 18px; height: 18px; accent-color: var(--nf-navy); }
.cell span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Segmented Likert bars (alternative array layout) */
.segs { display: grid; gap: 18px; margin-top: 14px; }
.seg-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.seg-q { font-weight: 500; color: var(--nf-ink); font-size: .95rem; }
.seg-d { font-size: .8rem; color: var(--nf-ink-3); }
.seg-val { flex: none; font-weight: 700; font-size: .9rem; color: var(--nf-ink-3); white-space: nowrap; }
.seg-val.solo { display: block; text-align: right; margin-bottom: 2px; }
.seg-bar { display: flex; flex-direction: row-reverse; gap: 6px; margin-top: 8px; }
.seg-bar label { flex: 1 1 0; min-width: 0; margin: 0; cursor: pointer; position: relative; }
.seg-bar input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg-bar label span[aria-hidden="true"] {
  display: block; height: 30px; line-height: 28px; border-radius: 4px;
  background: #ECEEF3; border: 1px solid var(--nf-line);
  font-size: .72rem; font-weight: 600; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-inline: 6px;
  color: var(--nf-ink-2);
  transition: background-color .12s ease, color .12s ease;
}
/* Only the picked segment takes its colour; the rest stay neutral grey —
   no run-painting across the bar. */
.seg-bar label.sg:has(input:checked) span[aria-hidden="true"],
.seg-bar label.sg:hover span[aria-hidden="true"] {
  background: var(--c); border-color: transparent; color: #14162B;
}
.seg-bar label input:focus-visible + span[aria-hidden="true"] { outline: 2px solid var(--nf-navy); outline-offset: 2px; }

/* Conditional follow-up textbox (appears on Neutral-or-lower picks). */
.fb-wrap { margin-top: 12px; }
.fb-label { display: block; font-size: .88rem; font-weight: 600; color: var(--nf-ink-2); }
.fb-label .txt { margin-top: 6px; }
@media (max-width: 640px) {
  .seg-head { flex-direction: column; gap: 2px; }
  /* Stacked full-width options: every label fully readable, no squeeze,
     no sideways scroll. column-reverse keeps best-on-top order (DOM is
     reversed); only the picked segment is coloured. */
  .seg-bar { flex-direction: column-reverse; gap: 8px; }
  .seg-bar label { flex: none; }
  .seg-bar label span[aria-hidden="true"] {
    height: auto; min-height: 42px; line-height: 1.35;
    padding: 9px 12px; white-space: normal;
  }
}

/* NPS strip */
.nps { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 7px; margin-top: 14px; }
.nps-btn { margin: 0; }
.nps-btn input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.nps-btn span {
  display: block; text-align: center; padding: 12px 2px; cursor: pointer;
  border: 1px solid var(--nf-line); border-radius: var(--nf-radius-md);
  font-weight: 500; font-variant-numeric: tabular-nums;
  transition: background-color .15s ease, color .15s ease;
}
.nps-btn input:checked + span { background: var(--nf-navy); border-color: var(--nf-navy); color: #fff; }
.nps-btn input:focus-visible + span { outline: 2px solid var(--nf-navy); outline-offset: 2px; }
@media (max-width: 640px) { .nps { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* Stars rating */
.rate { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 14px; }
.rate-btn { margin: 0; position: relative; }
.rate-btn input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rate-btn span[aria-hidden="true"] {
  display: block; font-size: 2rem; line-height: 1; padding: 4px 6px; cursor: pointer;
  color: var(--nf-line-mid); transition: color .12s ease, transform .12s ease;
}
.rate-btn:hover span[aria-hidden="true"] { color: var(--nf-navy); transform: scale(1.12); }
.rate-btn input:checked + span[aria-hidden="true"] { color: var(--nf-navy); transform: scale(1.18); }
.rate-btn input:focus-visible + span[aria-hidden="true"] { outline: 2px solid var(--nf-navy); outline-offset: 2px; border-radius: 6px; }

/* Actions */
.actions { margin: 10px 0 30px; }
.btn {
  display: inline-block; font: inherit; font-weight: 600; cursor: pointer;
  background: var(--nf-navy); border: 1px solid var(--nf-navy); color: #fff;
  border-radius: var(--nf-radius-sm); padding: 13px 34px; text-decoration: none;
  box-shadow: 0 10px 20px -10px rgba(40,48,144,.55);
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.btn:hover { background: var(--nf-navy-dark); border-color: var(--nf-navy-dark); transform: translateY(-1px); box-shadow: 0 14px 24px -10px rgba(40,48,144,.6); }
.btn:active { transform: translateY(0); }
.btn.ghost { background: #fff; color: var(--nf-ink-2); border-color: var(--nf-line-mid); }
/* A destructive button is outlined, not filled. A solid red slab reads as
   the main thing to press on the page, which is the exact opposite of the
   truth, and it sat next to the safe button wearing the same weight. It
   fills in on hover, so there is no doubt once the pointer is on it. */
.btn.danger {
  background: #fff; color: var(--nf-red); border-color: #E3B4B7; box-shadow: none;
}
.btn.danger:hover {
  background: var(--nf-red); border-color: var(--nf-red); color: #fff;
  box-shadow: 0 14px 24px -10px rgba(200, 18, 26, .45);
}
/* ...except inside a confirmation dialog, where it is the deliberate answer
   to a question that has just been asked, and should look like it. */
.btn.danger.solid { background: var(--nf-red); border-color: var(--nf-red); color: #fff; }
/* Wherever a destructive button shares a row with ordinary ones -- the Delete
   at the end of a section toolbar, say -- it is held off the button before it,
   so the pointer has somewhere to land on the way that is not it. */
form .btn.danger { margin-left: 10px; }

/* Action bars.
   The actions on a page were written as loose siblings -- a button, then a
   one-button <form>, then a <p> -- so they stacked into a column and put
   "Delete" directly under the safe button it is least like. A bar lays them
   out in one row, keeps the safe actions together on the left, and sends
   anything destructive to the far right with .act-end, so a stray click has
   the width of the card to travel before it can land on one. */
.act-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0 0; }
.act-bar form { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.act-bar .act-note, .form-foot .act-note { flex: 1 1 240px; min-width: 0; font-size: .85rem; }
.act-bar .act-end { margin-left: auto; }
@media (max-width: 600px) {
  /* Once the row wraps there is no width left to hold them apart, so the
     destructive action takes the full row and a rule of its own. */
  .act-bar .act-end {
    margin-left: 0; width: 100%; padding-top: 12px; border-top: 1px solid var(--nf-line);
  }
}
/* The action that belongs to a whole form, told apart from whatever its last
   field happened to be by a rule and by air -- not left touching the button
   above it as though the two were a pair. */
.form-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--nf-line);
}
.btn.small { padding: 8px 16px; font-size: .88rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Footer */
.foot { color: var(--nf-ink-2); font-size: .82rem; padding: 18px 0 30px; text-align: center; }
.foot .wrap {
  display: inline-block;
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 99px; padding: 6px 20px;
}

/* Thanks */
.thanks { text-align: center; margin: 40px auto 0; max-width: 640px; padding: 40px 36px 34px; position: relative; overflow: hidden; }
.thanks::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, var(--nf-navy), var(--nf-green)); }
.th-logo { height: 44px; width: auto; display: block; margin: 0 auto 22px; }
.th-check { width: 76px; height: 76px; display: block; margin: 0 auto 16px; }
.th-ring { fill: var(--nf-green-tint); stroke: var(--nf-green); stroke-width: 3; }
.th-tick { fill: none; stroke: var(--nf-green); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 50; stroke-dashoffset: 50; animation: th-draw .5s .25s ease-out forwards; }
.th-check { animation: th-pop .45s ease-out both; }
@keyframes th-draw { to { stroke-dashoffset: 0; } }
@keyframes th-pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.thanks h1 { font-size: 1.9rem; color: var(--nf-navy); }
.th-body { max-width: 500px; margin: 0 auto; }
.th-body p { color: var(--nf-ink-2); line-height: 1.65; margin: 10px 0 0; }
.th-body p:first-child { font-size: 1.08rem; font-weight: 600; color: var(--nf-ink); }
.th-body a { color: var(--nf-navy); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--nf-line-mid); }
.th-body a:hover { border-bottom-color: var(--nf-navy); }
@media (prefers-reduced-motion: reduce) { .th-check { animation: none; } .th-tick { animation: none; stroke-dashoffset: 0; } }
@media (max-width: 640px) { .thanks { padding: 32px 20px 26px; margin-top: 20px; } .thanks h1 { font-size: 1.55rem; } }

/* ---- Admin ---- */
.login-box { max-width: 420px; margin: 60px auto; }
.field { margin-bottom: 12px; }
.field label { display: block; font-weight: 600; color: var(--nf-ink); font-size: .92rem; margin-bottom: 4px; }
.field input[type="text"], .field input[type="password"], .field input[type="email"] {
  width: 100%; font: inherit; padding: 10px 12px; color: var(--nf-ink);
  border: 1px solid var(--nf-line-mid); border-radius: var(--nf-radius-sm); background: #fff;
}
.field input[type="range"] { width: 100%; accent-color: var(--nf-navy); }
.field input[type="file"] { font: inherit; font-size: .88rem; }
/* Admin tab bar: one joined segmented control instead of loose pills. */
.nav {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  background: var(--nf-surface); border: 1px solid var(--nf-line);
  border-radius: 14px; box-shadow: var(--nf-shadow);
  padding: 5px 6px; margin: 18px 0;
}
.nav a {
  text-decoration: none; color: var(--nf-ink-3); font-weight: 600; font-size: .9rem;
  padding: 9px 18px; border-radius: 10px; border: 1px solid transparent;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.nav a:hover { background: var(--nf-navy-tint); color: var(--nf-navy); }
.nav a.on { background: var(--nf-navy); color: #fff; box-shadow: 0 3px 8px -3px rgba(40,48,144,.55); }
.nav a.on:hover { background: var(--nf-navy-dark); color: #fff; }
.nav .sp { flex: 1; }
/* Signed-in user chip + a distinct red-outline log-out button. */
.nav > span.muted {
  background: var(--nf-ground); border: 1px solid var(--nf-line);
  border-radius: 99px; padding: 6px 14px; margin-inline-end: 4px; font-weight: 600;
}
/* Log out posts a form (see admin_nav), so the control is a button that has
   to sit in the row looking exactly like the links beside it. */
.nav .logout { margin: 0; display: flex; }
.nav .logout button {
  font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer;
  padding: 9px 18px; border-radius: 10px;
  border: 1px solid var(--nf-line-mid); background: #fff; color: var(--nf-red);
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.nav .logout button:hover { background: var(--nf-red-tint); border-color: var(--nf-red); }
@media (max-width: 640px) {
  .nav { flex-wrap: nowrap; overflow-x: auto; }
  .nav a, .nav .logout button { white-space: nowrap; }
  .nav .sp { display: none; }
}
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat { background: #fff; border: 1px solid var(--nf-line); border-radius: var(--nf-radius-md); padding: 14px 16px; }
.stat b { display: block; font-size: 1.7rem; color: var(--nf-navy); }
.stat span { font-size: .85rem; color: var(--nf-ink-3); }

/* Portfolio cards (dashboard overview): one per survey. */
.sv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }

/* Daily trend: CSS-only columns (printable, no JS library). */
.trend { display: flex; align-items: flex-end; gap: 5px; margin: 12px 0 4px; min-height: 88px;
  /* The dates under the first and last columns are wider than the columns
     themselves, so the strip keeps room for them to sit centred. */
  padding: 0 16px; }
.tcol { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.tbar { width: 100%; max-width: 34px; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, var(--nf-navy), #5B5BD6); }
.tday { font-size: .68rem; color: var(--nf-ink-3); white-space: nowrap; }
/* Responses-per-day on the report: kept small, last in the Ratings tab. */
.trend-card { padding-top: 12px; padding-bottom: 10px; }
.trend-card .q-text { font-size: .86rem; }
.trend-card .trend { min-height: 44px; margin: 6px 0 2px; }
.trend-card .tbar { max-width: 22px; }
.trend-card .muted { font-size: .78rem; margin: 4px 0 0; }

table.data { width: 100%; border-collapse: collapse; font-size: .88rem; background: #fff; }
table.data th, table.data td { border: 1px solid var(--nf-line); padding: 8px 10px; text-align: left; vertical-align: top; }
table.data thead th { background: #F7F8FC; color: var(--nf-ink-3); }

/* Country mark on a response row.
   This was a flag emoji, which Windows has no glyph for -- every browser there
   falls back to drawing the two regional-indicator letters, so the column read
   as a bare, unstyled "LB" shoved against the city name. The letters are the
   design now: a small plate that reads as a label rather than as a typo, the
   same on every machine, with no web font and no image for the CSP to block.
   The fixed min-width keeps the place names starting on one line down the
   column, since every code is two characters wide anyway. */
.cc {
  display: inline-block; min-width: 2.1em; margin-inline-end: 7px;
  padding: 1px 5px; border: 1px solid var(--nf-line-mid); border-radius: 4px;
  background: var(--nf-navy-tint); color: var(--nf-ink-2);
  font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  line-height: 1.5; text-align: center; vertical-align: 1px;
}
.cc-flag { width: 16px; height: 12px; margin-inline-end: 4px; vertical-align: -1px;
  border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); object-fit: cover; }

/* "Closed" badge, wherever a survey is listed rather than opened: the Surveys
   table and the dashboard tiles. Red, because the thing it reports is that a
   link people were given no longer takes answers -- that should catch the eye
   on a page of otherwise identical rows, not blend into the muted meta text
   it sits in. */
.tag-closed {
  display: inline-block; padding: 1px 9px; border-radius: 99px;
  background: var(--nf-red-tint); color: var(--nf-red);
  font-size: .72rem; font-weight: 700; vertical-align: middle;
}

/* The "this survey has closed" notice -- the public page where the form would
   have been, and the banner above the admin dashboard's counts. A red edge
   down the side rather than a full red card: it is not an error and nobody did
   anything wrong, it is simply the state of things, so it should be impossible
   to miss and calm to read. Flex so the admin banner can push its "Reopen it"
   to the far end with the .act-end it already uses; the public card has no
   such child and is unaffected. */
.closed-note {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  border-left: 4px solid var(--nf-red); background: var(--nf-red-tint);
}
.closed-note .act-end { margin-left: auto; }
.closed-note h2 { flex-basis: 100%; margin: 0; color: var(--nf-red); font-size: 1.15rem; }
.closed-note p { flex-basis: 100%; margin: 0; }
/* The tint already carries the meaning, so the grey that says "aside" on a
   white card would only fight it here. */
.closed-note .muted, .closed-note span.muted { color: var(--nf-ink-2); }
.bars { display: grid; gap: 6px; margin-top: 8px; }
.bar-row { display: grid; grid-template-columns: minmax(120px, 220px) 1fr 52px; gap: 10px; align-items: center; font-size: .85rem; }
.bar-track { display: block; height: 10px; background: var(--nf-line); border-radius: 99px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--nf-navy), var(--nf-green)); }
.muted { color: var(--nf-ink-3); font-size: .85rem; }
.pager { display: flex; gap: 10px; align-items: center; margin-top: 14px; }
.inline { display: inline; }

/* AJAX toast */
.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--nf-ink); color: #fff; font-size: .9rem; font-weight: 600;
  border-radius: 99px; padding: 10px 22px; opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease; z-index: 99;
  box-shadow: 0 12px 28px -10px rgba(0,0,0,.4); max-width: 90vw;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.bad { background: var(--nf-red); }
tr.row-flash td { animation: rowflash 1.2s ease; }

/* AI reading: spinner in the button, progress bar and a line per response. */
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff; border-radius: 50%; vertical-align: -2px; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }
.btn.busy { cursor: progress; opacity: .9; }
.ai-run-box { margin: 4px 0 16px; }
.ai-progress { background: var(--nf-line); box-shadow: none; margin: 10px 0 8px; height: 8px; }
.ai-count { font-size: .9rem; }
.ai-log { list-style: none; margin: 8px 0 0; padding: 0; font-size: .85rem; display: flex; flex-direction: column; gap: 3px; }
.ai-log li.run { color: var(--nf-navy); }
.ai-log li.ok { color: var(--nf-green-txt); }
.ai-log li.bad { color: var(--nf-red); }
@keyframes rowflash { 0% { background: var(--nf-green-tint); } 100% { background: transparent; } }

/* ---- Questions builder hierarchy ---- */
.qsec, .qitem, details[id] { scroll-margin-top: 90px; }
.steps { margin: 0 0 18px 18px; padding: 0; font-size: .9rem; }
.steps li { margin-bottom: 4px; }
.qsec { border-top: 4px solid var(--nf-navy); }
.qsec-head { display: flex; align-items: flex-start; gap: 12px; }
.sec-num {
  flex: none; font-weight: 700; font-size: .8rem; color: #fff;
  background: var(--nf-navy); border-radius: 99px; padding: 4px 14px; margin-top: 4px;
  white-space: nowrap;
}
.qsec-head .group-title { font-size: 1.25rem; }
.rename, .qitem details { margin-top: 10px; }
.qitem {
  background: #FBFCFE; border: 1px solid var(--nf-line); border-left: 4px solid var(--nf-navy);
  border-radius: var(--nf-radius-md); padding: 14px 16px; margin-top: 12px;
}
.q-head { display: flex; align-items: flex-start; gap: 12px; }
.q-num {
  flex: none; font-weight: 700; font-size: .8rem; color: var(--nf-navy);
  background: var(--nf-navy-tint); border: 1px solid var(--nf-navy);
  border-radius: 8px; padding: 3px 10px; margin-top: 2px; white-space: nowrap;
}
.q-title { font-weight: 600; color: var(--nf-ink); }
.q-meta { font-size: .82rem; margin-top: 2px; }
.type-pill {
  display: inline-block; font-size: .72rem; font-weight: 700; color: #fff;
  border-radius: 99px; padding: 2px 10px; vertical-align: 1px;
}
.addbox { border: 2px dashed var(--nf-line-mid); background: transparent; box-shadow: none; }
.addbox > summary { font-size: 1rem; }
/* Settings tabs (JS enhances; without JS all panes stay visible). */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.tabs button {
  font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer;
  color: var(--nf-navy); background: #fff;
  border: 1px solid var(--nf-line); border-radius: 99px; padding: 8px 18px;
}
.tabs button.on { background: var(--nf-navy); border-color: var(--nf-navy); color: #fff; }
.tabs-js .tabpane { display: none; }
.tabs-js .tabpane.on { display: block; }
.tabpane { border-top: 1px dashed var(--nf-line); padding-top: 14px; }

/* Small centred dialog. Used by "Send by e-mail" on the response page. */
.nf-modal {
  position: fixed; inset: 0; z-index: 60; padding: 16px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20, 22, 43, .45);
}
/* An author rule beats the browser's own [hidden] rule, so restate it. */
.nf-modal[hidden] { display: none; }
.nf-modal .box {
  width: 100%; max-width: 430px; padding: 22px; text-align: left;
  background: #fff; border: 1px solid var(--nf-line);
  border-radius: var(--nf-radius); box-shadow: 0 18px 50px rgba(20, 22, 43, .28);
}
.nf-modal h2 { margin: 0 0 4px; font-size: 1.12rem; color: var(--nf-navy); }
details summary { cursor: pointer; font-weight: 600; color: var(--nf-navy); }
.inline-form input[type="text"] { font: inherit; padding: 8px 10px; border: 1px solid var(--nf-line-mid); border-radius: 8px; margin: 2px; max-width: 100%; }
.field select { width: 100%; font: inherit; padding: 10px 12px; color: var(--nf-ink); border: 1px solid var(--nf-line-mid); border-radius: var(--nf-radius-sm); background: #fff; }

/* Report filter bar + analytics extras */
.scope { background: var(--nf-navy-tint); border-color: #D5DAF2; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chip {
  font-size: .82rem; padding: 6px 14px; border-radius: 99px; text-decoration: none;
  border: 1px solid var(--nf-line-mid); background: #fff; color: var(--nf-ink-2);
}
.chip:hover { border-color: var(--nf-navy); color: var(--nf-navy); }
.chip.on { background: var(--nf-navy); border-color: var(--nf-navy); color: #fff; }
.filters { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.filters .f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.filters label { font-size: .78rem; font-weight: 600; color: var(--nf-ink-3); }
.filters input[type="date"], .filters select {
  font: inherit; font-size: .9rem; padding: 8px 10px; max-width: 100%;
  border: 1px solid var(--nf-line-mid); border-radius: 10px; background: #fff; color: var(--nf-ink);
}
.filters select { max-width: 280px; }
.stat .delta { display: block; font-size: .78rem; margin-top: 3px; }
.delta.up { color: var(--nf-green-txt); }
.delta.down { color: var(--nf-red); }
.quotes { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.quotes li {
  background: #FAFBFD; border-left: 3px solid var(--nf-line-mid); border-radius: 0 10px 10px 0;
  padding: 10px 14px; font-size: .92rem; color: var(--nf-ink-2); break-inside: avoid;
}
.quotes .who { display: block; font-size: .76rem; color: var(--nf-ink-3); margin-top: 5px; }

@media (max-width: 576px) {
  body { font-size: 16px; }
  main.wrap { padding-top: 12px; }
  .group { padding: 16px 12px; border-radius: 16px; }
  .intro-hero { flex-direction: column; text-align: center; gap: 12px; padding: 24px 18px 20px; }
  .hero-logo { height: 60px; }
  .intro-body { padding: 18px; }
  .card { padding: 20px 14px; }
  .group-title { font-size: 1.25rem; }
  .logo { height: 44px; }
  .top-title { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bar-row { grid-template-columns: minmax(90px, 130px) 1fr 44px; }
  /* The switcher is a flex item, so a long survey title keeps it at its
     natural width and pushes the card sideways. min-width lets it shrink;
     the select then caps itself at 100% of it. */
  .survey-bar form { min-width: 0; }
}

/* --- Verbatim answers -------------------------------------------------------
   The report used to end in a wall of text: every comment and every reason
   printed in full, three quarters of the page by height. Now only the first few
   of each set are open, the remainder folds away, and one box searches the lot. */
.verbatim-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -6px 0 14px; }
.verbatim-tools input[type="search"] {
  flex: 1 1 280px; min-width: 0; padding: 10px 14px;
  font: inherit; font-size: .9rem; color: var(--nf-ink);
  background: var(--nf-surface); border: 1px solid var(--nf-line); border-radius: var(--nf-radius-sm);
}
.verbatim-tools input[type="search"]:focus { outline: 2px solid var(--nf-navy); outline-offset: 1px; border-color: var(--nf-navy); }
.pill {
  display: inline-block; margin-left: 8px; padding: 1px 9px; border-radius: 99px;
  background: var(--nf-navy-tint); color: var(--nf-navy);
  font-size: .72rem; font-weight: 700; vertical-align: middle;
}
/* Both folds are buttons, not the browser's default disclosure triangle. */
.quote-more, .topic { margin-top: 10px; }
.quote-more > summary, .topic > summary {
  cursor: pointer; list-style: none; display: block;
  font-size: .85rem; font-weight: 600; color: var(--nf-navy);
  padding: 9px 14px; border: 1px solid var(--nf-line); border-radius: var(--nf-radius-sm);
  background: var(--nf-surface);
}
.quote-more > summary::-webkit-details-marker,
.topic > summary::-webkit-details-marker { display: none; }
.quote-more > summary::before, .topic > summary::before { content: "\25B8"; margin-right: 8px; }
.quote-more[open] > summary::before, .topic[open] > summary::before { content: "\25BE"; }
.quote-more > summary:hover, .topic > summary:hover { background: var(--nf-navy-tint); }
.topic > summary { background: var(--nf-ground); border-color: transparent; color: var(--nf-ink); }
.topic > summary .pill { float: right; margin-left: 10px; }
.quote-more > .quotes, .topic > .quote-more, .topic > .quotes { margin-top: 10px; }
.quote-more[open] > .quotes { padding-left: 2px; }
/* Comments are short, so two columns halve a long section without any loss of
   reading order -- the eye finishes one column before starting the next. */
@media (min-width: 900px) {
  .verbatim .quotes { display: block; columns: 2; column-gap: 16px; }
  .verbatim .quotes li { margin: 0 0 8px; }
}

/* --- Bar colours ------------------------------------------------------------
   One palette for every coloured bar on the report, so a colour means the same
   thing in a grid, in a question breakdown and in the NPS split. Categories
   with no good end (device, browser, weekday) stay neutral on purpose: colour
   there would be decoration pretending to be information. */
/* The old flat gradient ran navy-to-green at every length, so a bar at 20% and
   a bar at 90% ended in the same green and nothing could be told apart. The
   reset comes first: the palette below has to win over it, and both are one
   class deep, so order is the only thing that decides. */
.bar-fill { background: var(--nf-navy); }
.f-low     { background: #C8121A; }
.f-fair    { background: #E0730A; }
.f-mid     { background: #D2A400; }
.f-good    { background: #6DA82B; }
.f-high    { background: var(--nf-green); }
.f-neutral { background: var(--nf-navy); }

/* --- Report overview ------------------------------------------------------
   Four verdict tiles, the donuts, the per-item level bars and the customer
   heatmap at the top of the report. Colours are the bar palette above: a
   donut slice is an SVG stroke, so it gets the same colours as strokes. */
.verdict-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 18px; }
.verdict { background: #fff; border: 1px solid var(--nf-line); border-top: 4px solid var(--nf-navy); border-radius: var(--nf-radius-md); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.verdict em { font-style: normal; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--nf-ink-3); }
.verdict b { font-size: 1.35rem; color: var(--nf-ink); line-height: 1.25; }
.verdict.v-count b { font-size: 1.7rem; color: var(--nf-navy); }
/* An item or topic name can be a whole question; it stays a heading, not a banner. */
.verdict.v-watch b, .verdict.v-talk b { font-size: 1.08rem; }
.verdict span { font-size: .85rem; color: var(--nf-ink-3); }
.verdict.v-good { border-top-color: var(--nf-green); }
.verdict.v-good em { color: var(--nf-green-txt); }
.verdict.v-watch { border-top-color: #E0730A; }
.verdict.v-watch em { color: #A85200; }
.verdict.v-talk { border-top-color: var(--nf-red); }
.verdict.v-talk em { color: var(--nf-red); }

.donut-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 16px; }
.donut-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 10px; }
.donut { width: 150px; height: 150px; flex: none; }
.donut circle { fill: none; stroke-width: 6.5; }
.donut .dn-track { stroke: var(--nf-line); }
.donut .f-low { stroke: #C8121A; }
.donut .f-fair { stroke: #E0730A; }
.donut .f-mid { stroke: #D2A400; }
.donut .f-good { stroke: #6DA82B; }
.donut .f-high { stroke: var(--nf-green); }
.donut .f-neutral { stroke: var(--nf-navy); }
.donut circle.dn-seg { background: none; }
.donut text { text-anchor: middle; fill: var(--nf-ink); }
.donut .dn-big { font-size: 7.5px; font-weight: 700; }
.donut .dn-small { font-size: 3.4px; fill: var(--nf-ink-3); }
.dn-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: .9rem; }
.dn-legend li { display: flex; align-items: center; gap: 8px; }
.dn-legend li.zero { opacity: .5; }
.dn-legend i { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.card > .dn-legend { flex-direction: row; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: .82rem; }

.lvl-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.lvl-row { display: grid; grid-template-columns: minmax(120px, 34%) 1fr 48px; gap: 12px; align-items: center; }
.lvl-label { color: var(--nf-ink); font-size: .92rem; }
.lvl-bar { display: flex; height: 18px; border-radius: 6px; overflow: hidden; background: var(--nf-line); }
.lvl-bar > span { height: 100%; }
.lvl-pct { text-align: right; font-weight: 700; color: var(--nf-ink); }

.heat-scroll { overflow-x: auto; margin-top: 10px; }
table.heat { border-collapse: separate; border-spacing: 3px; font-size: .85rem; }
table.heat th { color: var(--nf-ink-3); font-weight: 600; font-size: .78rem; padding: 2px 4px; }
table.heat td { min-width: 30px; height: 24px; border-radius: 4px; padding: 0 6px; white-space: nowrap; }
table.heat td:first-child { background: none; }
table.heat td.hm-none { background: var(--nf-ground); }
table.heat td.hm-pct { text-align: right; font-weight: 700; color: var(--nf-ink); }
.heat-key { margin: 10px 0 0; padding-inline-start: 22px; columns: 2; font-size: .82rem; color: var(--nf-ink-3); }
/* Customer by item: full card width, item names as column heads (three lines,
   the whole name on hover), a bar under the score, a key for the colours. */
table.heat-wide { width: 100%; min-width: 680px; table-layout: fixed; border-spacing: 4px; }
table.heat-wide th { vertical-align: bottom; text-align: center; }
table.heat-wide th.hm-who { width: 92px; text-align: left; }
table.heat-wide th.hm-score-h { width: 150px; text-align: left; }
table.heat-wide th.hm-item span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  font-weight: 600; font-size: .76rem; line-height: 1.25; white-space: normal; color: var(--nf-ink-2, var(--nf-ink-3)); }
table.heat-wide td { height: 30px; border-radius: 6px; }
table.heat-wide td.hm-pct { text-align: left; }
table.heat-wide td.hm-pct b { display: inline-block; min-width: 40px; text-align: right; }
.hm-score { display: inline-block; width: 90px; height: 8px; margin-right: 8px; vertical-align: middle; border-radius: 4px;
  background: var(--nf-ground); overflow: hidden; }
.hm-score i { display: block; height: 100%; border-radius: 4px; }
table.heat a { color: var(--nf-navy); font-weight: 700; text-decoration: none; }
table.heat a:hover { text-decoration: underline; }
.dn-legend i.hm-none { background: var(--nf-ground); box-shadow: inset 0 0 0 1px var(--nf-line); }
.topic-quotes { margin: 12px 0 0; padding-inline-start: 18px; font-size: .9rem; display: flex; flex-direction: column; gap: 6px; }
.topic-quotes b { color: var(--nf-ink); }

@media (max-width: 640px) {
  .lvl-row { grid-template-columns: 1fr 44px; gap: 4px 10px; }
  .lvl-label { grid-column: 1 / -1; }
  .donut { width: 120px; height: 120px; }
  .heat-key { columns: 1; }
}
/* The label column used to have a 130px floor and the value column a fixed
   96px, which is affordable in a full-width card and not in a three-up grid:
   at ~300px of row the two of them plus the gaps left the 1fr track exactly
   0px, so Device, Browser, weekday and country rendered as a label, a gap and
   a number with no bar at all. The floor belongs on the track instead -- it is
   the thing the row exists to show -- and the label yields and wraps. */
.bar-row { grid-template-columns: minmax(0, 240px) minmax(96px, 1fr) minmax(56px, auto); }
.bars b { text-align: right; white-space: nowrap; }
.bars b em { font-style: normal; font-weight: 400; font-size: .78rem; color: var(--nf-ink-3); margin-left: 7px; }

/* --- Score bars -------------------------------------------------------------
   An average means nothing without the scale it came off, so the track IS the
   scale: it runs from the lowest option to the highest, carries a tick on every
   point, and prints the number with its denominator underneath. */
.scores { display: grid; gap: 9px; margin-top: 12px; }
.score-row {
  display: grid; align-items: center; gap: 4px 14px;
  grid-template-columns: minmax(150px, 250px) minmax(110px, 1fr) 76px minmax(0, 248px);
}
.score-lab { font-size: .88rem; color: var(--nf-ink); line-height: 1.35; }
.score-track {
  position: relative; height: 20px; border-radius: 6px; overflow: hidden;
  background: var(--nf-ground); border: 1px solid var(--nf-line);
}
.score-track i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--nf-line-mid); }
.score-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px 0 0 5px; }
.score-val { font-size: .95rem; color: var(--nf-ink); white-space: nowrap; text-align: right; }
.score-val em { font-style: normal; font-weight: 400; font-size: .74rem; color: var(--nf-ink-3); margin-left: 3px; }
.score-sub { font-size: .75rem; color: var(--nf-ink-3); line-height: 1.3; }
.score-row.is-worst .score-lab { font-weight: 600; }
.score-axis { margin-top: 3px; }
.score-axis .axis-track { position: relative; height: 15px; }
.score-axis .axis-track i {
  position: absolute; top: 0; transform: translateX(-50%);
  font-style: normal; font-size: .72rem; color: var(--nf-ink-3);
}
/* The two end labels sit on the track's edges, so centring them would hang
   half of each outside the scale it is labelling. */
.score-axis .axis-track i:first-child { transform: none; }
.score-axis .axis-track i:last-child  { transform: translateX(-100%); }
.score-key { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 12px 0 0; font-size: .75rem; color: var(--nf-ink-3); }
.score-key span { display: inline-flex; align-items: center; }
.score-key .k { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; }

@media (max-width: 760px) {
  /* Four columns will not fit a phone, so the label takes its own line and the
     bar keeps the full width rather than being squeezed to a stub. */
  /* The value column is a fixed width, not auto: the axis row's own value cell
     is empty, and an auto column would collapse there and leave the axis
     wider than the tracks it is meant to label. */
  .score-row { grid-template-columns: minmax(0, 1fr) 76px; gap: 3px 10px; }
  .score-lab, .score-sub { grid-column: 1 / -1; }
  .score-row + .score-row { margin-top: 6px; }
  /* The axis has to sit under the track and nothing else: stretched across
     the value column too, its ticks would point at the wrong numbers. */
  .score-axis .score-lab { display: none; }
  .score-axis .axis-track { grid-column: 1; }
  /* Sharing the row with its label left the bar a stub about as long as the
     word next to it, so the one thing the row exists to show was the one
     thing too small to read. The label takes its own line instead. */
  .bar-row { grid-template-columns: minmax(0, 1fr) 74px; gap: 2px 10px; }
  .bar-row > span:first-child { grid-column: 1 / -1; }
  .bar-row + .bar-row { margin-top: 8px; }
}

/* --- Print / Save as PDF -----------------------------------------------------
   The whole print stylesheet lives here, at the end of the file, and nowhere
   else. It used to be two small blocks in the middle, which is why the printed
   report did not look like the rules said it should: CSS of equal specificity
   is decided by document order, so every ordinary rule written below those
   blocks quietly overruled them on paper -- the bar and score colours among
   them. At the end of the file a print rule is the last word by construction. */
/* Report: ratings and comments on two tabs. */
.rp-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--nf-line); margin: 0 0 18px; }
.rp-tabs button { background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px;
  padding: 10px 18px; font: inherit; font-weight: 600; color: var(--nf-ink-3); cursor: pointer; }
.rp-tabs button:hover { color: var(--nf-ink); }
.rp-tabs button.on { color: var(--nf-navy); border-bottom-color: var(--nf-green); }

@media print {
  .rp-pane[hidden] { display: block !important; }

  /* THE rule that makes the charts appear. Every bar on this report is a
     background colour -- .bar-fill, .score-fill, .tbar, the NPS split -- and a
     browser drops backgrounds when it prints unless it is told not to. Without
     this line the PDF comes out as a page of labels and percentages with blank
     white tracks where the chart should be, which is exactly what it did. It
     is set on everything rather than on a list of chart classes so that a bar
     added next year prints without anyone remembering this file exists. */
  *, *::before, *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  @page { size: A4 portrait; margin: 14mm 12mm 16mm; }

  /* --- Chrome off ----------------------------------------------------------
     Anything that only exists to be clicked has no business on paper. */
  .nav, .topnav, .sv-tabs, .sv-hub-side, .survey-bar, .noprint, .pager, .foot, .tabs, .chips,
  .verbatim-tools, .logout, .toast, .filter-bar form button,
  .seg-bar input { display: none !important; }

  /* The masthead prints once, at the top, as a letterhead: the logo and the
     product name. On screen it is sticky, which on paper means it is painted
     over the top of every page. */
  .topbar {
    position: static !important; box-shadow: none !important;
    border-bottom: 1px solid var(--nf-line); padding: 0 0 8px; margin-bottom: 10px;
  }
  .topbar .logo { height: 30px; }
  .topbar-in { padding: 0; }

  body { background: #fff; font-size: 10pt; }
  .wrap { max-width: none; padding: 0; }
  /* Printed links are read, not followed: the blue is noise, and a URL
     appended in brackets is worse. */
  a[href] { color: inherit; text-decoration: none; }

  /* --- Page breaks ---------------------------------------------------------
     A card is one idea; splitting it across a fold makes the reader hold half
     a chart in their head while they turn the page. */
  .card, .stat, .trend, .seg-bar, .score-row, .bar-row, .q-card,
  .verdict, .donut-card, .lvl-row, table.heat tr,
  table.data tr, .quotes li { break-inside: avoid; page-break-inside: avoid; }
  .card { box-shadow: none; margin-bottom: 10px; }
  /* A heading at the foot of a page, with the thing it names overleaf, is the
     defect in the printed report: "Product Technical Evaluation" sat alone at
     the bottom of a sheet with its questions on the next one. break-after
     moves the heading down to join them. */
  h1, h2, h3, .group-title, .q-text, .seg-head, table.data thead {
    break-after: avoid; page-break-after: avoid;
  }
  p, li { orphans: 3; widows: 3; }

  /* --- Charts --------------------------------------------------------------
     Tracks keep a visible outline as well as their fill, so the scale a bar is
     measured against is still readable if a printer is set to greyscale. */
  .bar-track, .score-track { border: 1px solid var(--nf-line-mid); }
  .bar-fill, .score-fill { border-radius: 0; }
  /* Flat colour instead of a gradient: gradients are the first thing a cheap
     print driver throws away, and the trend bars carry no meaning in their
     shading anyway. */
  .tbar { background: var(--nf-navy) !important; }
  .trend { padding: 0 8px; }

  /* --- Density -------------------------------------------------------------
     Screen spacing on A4 spreads a one-page report over three. */
  .stat-grid { gap: 8px; margin-bottom: 12px; }
  .stat { padding: 10px 12px; }
  .stat b { font-size: 1.35rem; }
  .verdict-grid { gap: 8px; margin-bottom: 12px; }
  .verdict { padding: 10px 12px; }
  .verdict b { font-size: 1.1rem; }
  .donut { width: 110px; height: 110px; }
  .group-title { font-size: 1.15rem; margin-bottom: 8px; padding-bottom: 8px; }
  .scores { gap: 6px; }
  .bars { gap: 4px; }
  table.data { font-size: .8rem; }
  table.data th, table.data td { padding: 5px 7px; }

  /* --- Verbatims -----------------------------------------------------------
     Everything opens for the PDF: a printed report must not hide evidence
     behind a control nobody can click on paper. The report page opens the
     <details> itself on beforeprint; these rules take the arrow and the
     button styling off the summary that is left behind. */
  .quote-more > summary, .topic > summary {
    color: var(--nf-ink); background: none; border: 0; padding: 6px 0;
  }
  .quote-more > summary::before, .topic > summary::before { content: ""; }
  /* One column: a printed page cannot scroll, so a column that breaks across
     a sheet sends the reader back up the page to find the rest of it. */
  .verbatim .quotes { columns: 1; }
}

/* Surveys page: one row per survey. Clicking a name opens that survey's
   tools under it (one at a time); the gear holds the rarer, riskier actions. */
.sv-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  padding-bottom: 14px; border-bottom: 1px dashed var(--nf-line-mid); }
.sv-top h1 { margin-bottom: 4px; }
.sv-find { width: 100%; max-width: 360px; margin-top: 14px; padding: 10px 14px; border: 1px solid var(--nf-line-mid);
  border-radius: var(--nf-radius-sm); font: inherit; background: #fff; }
.sv-card { background: var(--nf-surface); border: 1px solid var(--nf-line); border-radius: var(--nf-radius-md);
  margin: 0 0 8px; }
.sv-card.open { box-shadow: var(--nf-shadow); border-color: var(--nf-line-mid); }
.sv-row { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 20px; }
.sv-card.open .sv-row { background: var(--nf-navy-tint); border-radius: var(--nf-radius-md) var(--nf-radius-md) 0 0; }
.sv-name { flex: 1; min-width: 0; font-size: 1.08rem; font-weight: 600; color: var(--nf-ink); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-name:hover { color: var(--nf-navy); }
.sv-card.shut .sv-name { text-decoration: line-through; color: var(--nf-ink-3); font-style: italic; }
.sv-meta { font-size: .85rem; color: var(--nf-ink-3); white-space: nowrap; }
.sv-tags { display: flex; gap: 6px; }
.sv-pill { font-size: .75rem; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  background: var(--nf-ground); color: var(--nf-ink-2); border: 1px solid var(--nf-line); white-space: nowrap; }
.sv-pill.on { background: var(--nf-navy-tint); color: var(--nf-navy); border-color: var(--nf-line-mid); }
.sv-pill.open { background: var(--nf-green-tint); color: var(--nf-green-txt); border-color: transparent; }
.sv-pill.shut { background: var(--nf-red-tint); color: var(--nf-red); border-color: transparent; }
.sv-menu { position: relative; }
.sv-menu > summary { list-style: none; cursor: pointer; display: flex; padding: 6px; border-radius: 8px; color: var(--nf-ink-3); }
.sv-menu > summary::-webkit-details-marker { display: none; }
.sv-menu > summary:hover, .sv-menu[open] > summary { background: #fff; color: var(--nf-navy); }
.sv-drop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 190px; padding: 6px;
  background: var(--nf-surface); border: 1px solid var(--nf-line-mid); border-radius: var(--nf-radius-sm);
  box-shadow: 0 18px 36px -18px rgba(20,22,43,.45); }
.sv-drop form { margin: 0; }
.sv-drop a, .sv-drop button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px;
  font: inherit; font-size: .9rem; font-weight: 600; color: var(--nf-ink-2); text-decoration: none; text-align: left;
  background: none; border: 0; border-radius: 8px; cursor: pointer; }
.sv-drop a:hover, .sv-drop button:hover { background: var(--nf-navy-tint); color: var(--nf-navy); }
.sv-drop button.bad { color: var(--nf-red); border-top: 1px solid var(--nf-line); border-radius: 0 0 8px 8px; margin-top: 4px; }
.sv-drop button.bad:hover { background: var(--nf-red-tint); color: var(--nf-red); }
.sv-actions { display: none; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px 12px;
  border-top: 1px solid var(--nf-line); }
.sv-card.open .sv-actions { display: flex; }
.sv-actions a { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; font-weight: 600; color: var(--nf-ink-2);
  text-decoration: none; padding: 7px 10px; border-radius: 8px; }
.sv-actions a:hover { background: var(--nf-navy-tint); color: var(--nf-navy); }
.sv-sep { width: 2px; height: 20px; background: var(--nf-green); margin: 0 8px; border-radius: 1px; }
.sv-link { margin-inline-start: auto; font-size: .8rem; color: var(--nf-ink-3); }
@media (max-width: 640px) {
  .sv-top { flex-direction: column; }
  .sv-row { flex-wrap: wrap; padding-left: 14px; }
  .sv-name { flex-basis: calc(100% - 44px); white-space: normal; }
  .sv-link { margin: 4px 10px; flex-basis: 100%; }
  .sv-sep { display: none; }
}
/* Main menu in the top bar: icon over label, a bar under the current one. */
.topnav { display: flex; align-items: stretch; flex: 1; gap: 4px; margin-inline-start: 28px; align-self: stretch; }
.topnav a, .topnav .logout button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 6px 18px; color: var(--nf-ink-3); text-decoration: none; font: inherit; font-size: .9rem; font-weight: 600;
  background: none; border: 0; border-bottom: 3px solid transparent; cursor: pointer; transition: color .15s ease, border-color .15s ease; }
.topnav a:hover { color: var(--nf-navy); }
.topnav a.on { color: var(--nf-navy); border-bottom-color: var(--nf-green); }
.topnav .sp { flex: 1; }
.topnav .who { align-self: center; font-size: .85rem; font-weight: 600; color: var(--nf-ink-3);
  background: var(--nf-ground); border: 1px solid var(--nf-line); border-radius: 99px; padding: 5px 12px; }
.topnav .logout { margin: 0; display: flex; }
.topnav .logout button:hover { color: var(--nf-red); }
.topbar:has(.topnav) { padding-bottom: 0; }
.topbar:has(.topnav) .topbar-in { align-items: stretch; }
.topbar:has(.topnav) .logo { align-self: center; margin-bottom: 10px; }
@media (max-width: 640px) {
  .topnav { margin-inline-start: 8px; overflow-x: auto; gap: 0; }
  .topnav a, .topnav .logout button { padding: 6px 10px; font-size: .78rem; white-space: nowrap; }
  .topnav .who { display: none; }
}

/* One survey's header: Surveys > title, its state, and its tabs. */
.sv-hub { margin: 18px 0; background: var(--nf-surface); border: 1px solid var(--nf-line);
  border-radius: var(--nf-radius-md); box-shadow: var(--nf-shadow); }
.sv-hub-top { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap; padding: 14px 20px 10px; }
.sv-hub-name { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.sv-hub-name h1 { margin: 0; font-size: 1.3rem; }
.sv-hub-name h1.shut { text-decoration: line-through; color: var(--nf-ink-3); }
.sv-crumb { color: var(--nf-ink-3); font-weight: 600; text-decoration: none; white-space: nowrap; }
.sv-crumb:hover { color: var(--nf-navy); text-decoration: underline; }
.sv-crumb-sep { color: var(--nf-line-mid); font-size: 1.2rem; }
.sv-hub-side { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sv-hub-n { font-size: .85rem; color: var(--nf-ink-3); margin-inline-end: 6px; }
.sv-hub-act { display: inline-flex; align-items: center; gap: 5px; font-size: .85rem; font-weight: 600; color: var(--nf-ink-2);
  text-decoration: none; padding: 6px 10px; border: 1px solid var(--nf-line-mid); border-radius: 8px; background: #fff; }
.sv-hub-act:hover { color: var(--nf-navy); border-color: var(--nf-navy); }
.sv-tabs { display: flex; gap: 2px; padding: 0 12px; border-top: 1px solid var(--nf-line); overflow-x: auto; }
.sv-tabs a { display: inline-flex; align-items: center; gap: 7px; padding: 11px 14px; font-size: .92rem; font-weight: 600;
  color: var(--nf-ink-3); text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap; }
.sv-tabs a:hover { color: var(--nf-navy); }
.sv-tabs a.on { color: var(--nf-navy); border-bottom-color: var(--nf-green); }
.sv-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 16px; }
@media (max-width: 640px) {
  .sv-hub-top { padding: 12px 14px 8px; }
  .sv-hub-name h1 { font-size: 1.1rem; }
  .sv-tabs a { padding: 10px 10px; font-size: .85rem; }
}

/* "New survey" never breaks onto two lines. */
.sv-new { white-space: nowrap; flex-shrink: 0; }
/* New survey page: the survey as it will look on the left, the answer types
   it can use on the right. */
.nb { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; margin: 18px 0; align-items: start; }
.nb-canvas { background: var(--nf-surface); border: 1px solid var(--nf-line); border-radius: var(--nf-radius-md);
  box-shadow: var(--nf-shadow); padding: 20px 28px 28px; }
.nb-title, .nb-desc { display: block; width: 100%; border: 0; border-bottom: 1px dashed transparent; background: none;
  font: inherit; color: var(--nf-ink); padding: 6px 0; }
.nb-title { font-size: 1.7rem; font-weight: 700; margin-top: 10px; }
.nb-desc { font-size: .98rem; color: var(--nf-ink-2); padding-bottom: 14px; border-bottom: 1px solid var(--nf-line-mid); }
.nb-title:hover, .nb-title:focus, .nb-desc:hover, .nb-desc:focus { outline: none; border-bottom-color: var(--nf-navy); background: var(--nf-ground); }
.nb-empty { margin: 28px 0; padding: 36px 28px; border: 2px dashed var(--nf-line-mid); border-radius: var(--nf-radius-md);
  display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 6px; }
.nb-empty b { font-size: 1.3rem; color: var(--nf-ink-2); }
.nb-arrow { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--nf-green);
  color: #fff; font-size: 1.8rem; font-weight: 700; margin-bottom: 10px; }
.nb-go { display: flex; gap: 10px; justify-content: center; }
.nb-side { background: var(--nf-surface); border: 1px solid var(--nf-line); border-radius: var(--nf-radius-md);
  box-shadow: var(--nf-shadow); overflow: hidden; position: sticky; top: 100px; }
.nb-tabs { display: flex; border-bottom: 1px solid var(--nf-line); }
.nb-tabs span { flex: 1; text-align: center; padding: 11px 8px; font-size: .88rem; font-weight: 600; color: var(--nf-ink-3);
  border-bottom: 3px solid transparent; }
.nb-tabs span.on { color: var(--nf-navy); border-bottom-color: var(--nf-green); }
.nb-types { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; }
.nb-types li { display: flex; align-items: center; gap: 10px; padding: 14px 12px; font-size: .9rem; font-weight: 600;
  color: var(--nf-ink-2); border-bottom: 1px solid var(--nf-line); }
.nb-types li:nth-child(odd) { border-right: 1px solid var(--nf-line); }
.nb-types li svg { color: var(--nf-navy); flex-shrink: 0; }
.nb-link { padding: 14px 16px 4px; }
@media (max-width: 860px) {
  .nb { grid-template-columns: 1fr; }
  .nb-side { position: static; }
}

/* Questions builder: the survey on the left, add / question / survey
   properties on the right. */
.qb { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 20px; align-items: start; margin-top: 18px; }
.qb-canvas > .card:first-child { margin-top: 0; }
.qb-side { max-height: calc(100vh - 120px); overflow: auto; }
.qb-tabs button { flex: 1; background: none; border: 0; border-bottom: 3px solid transparent; padding: 11px 6px; font: inherit;
  font-size: .84rem; font-weight: 600; color: var(--nf-ink-3); cursor: pointer; }
.qb-tabs button.on { color: var(--nf-navy); border-bottom-color: var(--nf-green); }
.qb-pane { padding: 14px 16px; }
.qb-side.js .qb-pane:not(.on) { display: none; }
.qb-types { margin: 4px -16px 12px; border-top: 1px solid var(--nf-line); }
.qb-types button { display: flex; align-items: center; gap: 10px; padding: 14px 12px; font: inherit; font-size: .9rem; font-weight: 600;
  color: var(--nf-ink-2); background: none; border: 0; border-bottom: 1px solid var(--nf-line); cursor: pointer; text-align: left; }
.qb-types button:nth-child(odd) { border-right: 1px solid var(--nf-line); }
.qb-types button:hover { background: var(--nf-navy-tint); color: var(--nf-navy); }
.qb-types button svg { color: var(--nf-navy); flex-shrink: 0; }
.qb-req { display: block; font-size: .88rem; margin-bottom: 6px; }
.qb-note { padding: 18px 4px; text-align: center; }
.qb-qhead { font-weight: 700; color: var(--nf-navy); padding-bottom: 8px; border-bottom: 1px solid var(--nf-line); }
#qb-props details { margin-top: 12px; }
#qb-props details[id^="qe-"] > summary { display: none; }
#qb-props input[type=text], #qb-props select { max-width: 100%; }
#qb-props table.data td:first-child input { width: 70px; }
.qb-canvas .qitem { cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.qb-canvas .qitem:hover { border-color: var(--nf-line-mid); }
.qb-canvas .qitem.sel { border-color: var(--nf-green); border-left-color: var(--nf-green); box-shadow: 0 0 0 2px var(--nf-green-tint); }
@media (max-width: 960px) {
  .qb { grid-template-columns: 1fr; }
  .qb-side { position: static; max-height: none; }
}

/* Admin pages use the screen: wider than the respondent page (1140px),
   up to 1640px on big monitors. Screen only -- print keeps max-width: none. */
@media screen { .admin .wrap { max-width: min(1640px, 100%); } }

/* Builder canvas: each question drawn as the respondent sees it. */
.qb-canvas .qitem { background: transparent; border: 1px solid transparent; border-left-width: 1px; padding: 10px 16px 18px; margin-top: 4px; }
.qb-canvas .qitem:hover { background: var(--nf-ground); border-color: var(--nf-line); }
.qb-canvas .qitem.sel { background: var(--nf-navy-tint); border-color: var(--nf-green); }
.qb-canvas .q-head { align-items: center; opacity: .45; transition: opacity .15s ease; }
.qb-canvas .qitem:hover .q-head, .qb-canvas .qitem.sel .q-head { opacity: 1; }
.q-label { font-weight: 700; font-size: 1rem; color: var(--nf-ink); margin: 8px 0 8px; }
.q-label .req { color: var(--nf-red); }
.q-help { font-size: .86rem; color: var(--nf-ink-3); margin: -4px 0 10px; }
.q-prev { pointer-events: none; }
.q-prev textarea { display: block; width: 100%; max-width: 900px; resize: none; font: inherit; padding: 8px 10px;
  border: 1px solid var(--nf-line-mid); border-radius: var(--nf-radius-sm); background: var(--nf-surface); }
.qp-opts { display: flex; flex-direction: column; gap: 9px; }
.qp-opts.inline { flex-direction: row; flex-wrap: wrap; gap: 9px 24px; }
.qp-opt { display: flex; align-items: center; gap: 9px; color: var(--nf-ink-2); }
.qp-opt input { margin: 0; width: 17px; height: 17px; }
.qp-grid { width: 100%; border-collapse: collapse; font-size: .92rem; }
.qp-grid th { font-weight: 500; font-size: .86rem; color: var(--nf-ink-2); padding: 6px 8px 8px; text-align: center; }
.qp-grid td { text-align: center; padding: 10px 8px; border-top: 1px solid var(--nf-line-mid); }
.qp-grid tbody tr:last-child td { border-bottom: 1px solid var(--nf-line-mid); }
.qp-grid tbody tr:nth-child(odd) { background: var(--nf-ground); }
.qp-grid td:first-child { text-align: left; font-weight: 600; color: var(--nf-ink); }
.qp-grid td small { display: block; font-weight: 400; font-size: .8rem; color: var(--nf-ink-3); }
.qp-grid input { margin: 0; width: 17px; height: 17px; }
.qp-nps { display: flex; gap: 5px; flex-wrap: wrap; }
.qp-nps span { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--nf-line-mid);
  border-radius: var(--nf-radius-sm); background: var(--nf-surface); font-weight: 600; color: var(--nf-ink-2); }
.qp-stars { font-size: 1.7rem; letter-spacing: 6px; color: #C9930A; }
.qp-none { margin: 0; font-size: .86rem; font-style: italic; color: var(--nf-ink-3); }

/* Builder canvas as one sheet; a section is just a dotted rule, its title and
   description. Its tools show on hover or when it is selected. */
.qb-canvas { background: var(--nf-surface); border: 1px solid var(--nf-line); border-radius: var(--nf-radius-md);
  box-shadow: var(--nf-shadow); padding: 12px 24px 24px; }
.qb-canvas .qsec { background: transparent; border: 0; border-top: 1px dotted var(--nf-line-mid); border-radius: 0;
  box-shadow: none; padding: 14px 0 6px; margin: 14px 0 0; }
.qb-canvas > .qsec:first-child { border-top: 0; margin-top: 0; }
.qb-canvas .qsec-head { align-items: center; padding: 6px 16px; border: 1px solid transparent; border-radius: var(--nf-radius-md); cursor: pointer; }
.qb-canvas .qsec-head:hover { background: var(--nf-ground); border-color: var(--nf-line); }
.qb-canvas .qsec.sel > .qsec-head { background: var(--nf-navy-tint); border-color: var(--nf-green); }
.qb-canvas .qsec-head .group-title { font-size: 1.3rem; font-weight: 600; color: var(--nf-ink); margin: 0; }
.qb-canvas .qsec-head .muted { font-size: .9rem; margin-top: 2px; }
.qb-canvas .sec-num { display: none; }
.qb-canvas .qsec-head form { opacity: 0; transition: opacity .15s ease; }
.qb-canvas .qsec-head:hover form, .qb-canvas .qsec.sel > .qsec-head form { opacity: 1; }
.qb-canvas > .addbox { margin: 22px 0 0; }
#qb-props details.rename > summary { display: none; }

/* Shapes list: glyph + name + look. */
.qb-types button > span:last-child { display: flex; flex-direction: column; line-height: 1.25; }
.qb-types button small { font-weight: 400; font-size: .78rem; color: var(--nf-ink-3); }
.qb-glyph { width: 24px; height: 24px; flex-shrink: 0; color: var(--nf-navy); }
.qb-types button { min-height: 62px; text-align: left; }
.qb-types button > span:last-child { min-width: 0; }
/* With the builder running, properties live only in the side panel. */
.qb-js .qb-canvas .qitem > details, .qb-js .qb-canvas .qsec > details.rename { display: none; }
#qb-props details > summary { pointer-events: none; list-style: none; cursor: default; font-weight: 700; color: var(--nf-navy); margin-bottom: 6px; }
#qb-props details > summary::-webkit-details-marker { display: none; }
.qb-shape { margin: 12px 0 4px; font-size: .9rem; }
/* Preview of the bar looks. */
.qp-bar { display: flex; gap: 3px; max-width: 900px; }
.qp-bar span { flex: 1; text-align: center; padding: 10px 4px; font-size: .8rem; font-weight: 600; color: var(--nf-navy);
  background: var(--nf-navy-tint); border-radius: 4px; }
.qp-brow { margin-bottom: 14px; }
.qp-brow > b { display: block; color: var(--nf-ink); margin-bottom: 2px; }
.qp-brow > small { display: block; font-size: .8rem; color: var(--nf-ink-3); margin-bottom: 6px; }
/* Builder: scale and list editors (save as you go, drag to reorder). */
.oe-list { list-style: none; margin: 6px 0 8px; padding: 0; }
.oe-item { display: flex; align-items: flex-start; gap: 8px; padding: 4px 6px; margin-bottom: 6px;
  border: 1px solid var(--nf-line); border-radius: 10px; background: var(--nf-surface); }
.oe-item:hover { border-color: var(--nf-line-mid); }
.oe-item.dragging { opacity: .45; }
.oe-item.saving { opacity: .7; }
.oe-item.row-flash { animation: rowflash 1.2s ease; }
.oe-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.oe .oe-in { width: 100%; max-width: 100%; box-sizing: border-box; font: inherit; color: var(--nf-ink);
  padding: 5px 7px; border: 1px solid transparent; border-radius: 7px; background: transparent; }
.oe .oe-in:hover { background: var(--nf-ground); }
.oe .oe-in:focus { outline: none; background: var(--nf-surface); border-color: var(--nf-navy); box-shadow: 0 0 0 3px var(--nf-navy-tint); }
.oe textarea.oe-in { display: block; resize: none; overflow: hidden; line-height: 1.4; min-height: 0; field-sizing: content; }
.oe .oe-desc { font-size: .84em; color: var(--nf-ink-3); }
.oe-grip { flex: 0 0 10px; height: 18px; margin-top: 7px; cursor: grab; opacity: .5;
  background: radial-gradient(circle, var(--nf-ink-3) 1.1px, transparent 1.5px) 0 0 / 5px 6px; }
.oe-grip:hover { opacity: 1; }
.oe-x { flex: 0 0 auto; border: 0; background: none; color: var(--nf-ink-3); font-size: 1.15rem; line-height: 1;
  padding: 5px 7px; margin-top: 1px; border-radius: 6px; cursor: pointer; opacity: 0; }
.oe-item:hover .oe-x, .oe-x:focus-visible { opacity: 1; }
.oe-x:hover { color: var(--nf-red); background: var(--nf-red-tint); }
@media (hover: none) { .oe-x { opacity: 1; } }
.oe-ok { flex: 0 0 14px; margin-top: 7px; color: var(--nf-green); font-weight: 700; opacity: 0; transition: opacity .25s ease; }
.oe-item.saved .oe-ok { opacity: 1; }
.oe-dot { flex: 0 0 10px; height: 10px; margin: 11px 0 0 2px; border-radius: 50%; }
.oe-c0 { background: #28A848; } .oe-c1 { background: #8CC152; } .oe-c2 { background: #F2C230; }
.oe-c3 { background: #F08A3C; } .oe-c4 { background: #C8121A; } .oe-cna { background: var(--nf-line-mid); }
.oe-scale-head { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; }
.oe-scale-head label { font-weight: 600; color: var(--nf-ink-2); }
.oe-scale-head select { flex: 1; min-width: 0; font: inherit; padding: 6px 8px; border: 1px solid var(--nf-line-mid); border-radius: 8px; }
.oe-note { margin: 0 0 8px; padding: 8px 10px; border-radius: 8px; background: var(--nf-navy-tint); color: var(--nf-ink-2); font-size: .84rem; }
.oe-na-row { display: flex; align-items: center; gap: 8px; margin: 2px 0 4px; font-size: .9rem; color: var(--nf-ink-2); cursor: pointer; }
.oe-addf { display: flex; gap: 6px; margin: 0; }
.oe-addf .oe-add { flex: 1; min-width: 0; font: inherit; padding: 7px 9px; border: 1px dashed var(--nf-line-mid); border-radius: 8px; }
.oe-addf .oe-add:focus { outline: none; border-style: solid; border-color: var(--nf-navy); }
.oe-hint { margin: 6px 0 0; font-size: .78rem; color: var(--nf-ink-3); }

/* Users: one compact table; add behind its button; rare actions in the gear. */
.us-card { padding: 18px 22px; }
.us-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.us-h { font-size: 1.15rem; font-weight: 700; color: var(--nf-navy); margin: 0; }
.us-sub { font-size: .85rem; margin: 2px 0 0; font-weight: 400; }
.us-addw { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.us-addw > summary { list-style: none; cursor: pointer; }
.us-addw > summary::-webkit-details-marker { display: none; }
.us-addw[open] > summary { background: var(--nf-navy-tint); color: var(--nf-navy); }
.us-inline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }
.us-inline input, .us-inline select { font: inherit; font-size: .86rem; height: 32px; padding: 0 10px; width: 170px; max-width: 100%;
  border: 1px solid var(--nf-line-mid); border-radius: 7px; background: #fff; color: var(--nf-ink); box-sizing: border-box; }
.us-inline select { width: auto; }
.us-inline input:focus, .us-inline select:focus { outline: none; border-color: var(--nf-navy); box-shadow: 0 0 0 3px var(--nf-navy-tint); }
.us-inline .btn.small { height: 32px; padding: 0 14px; box-shadow: none; }
.us-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.us-table th { text-align: left; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--nf-ink-3); padding: 8px 10px; border-bottom: 1px solid var(--nf-line); }
.us-table td { padding: 8px 10px; border-bottom: 1px solid var(--nf-line); vertical-align: middle; }
.us-table tbody tr:last-child td { border-bottom: 0; }
.us-table tbody tr:hover { background: var(--nf-ground); }
.us-r { text-align: right; width: 1%; white-space: nowrap; }
.us-av { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; margin-right: 10px;
  font-size: .8rem; font-weight: 700; background: var(--nf-ground); color: var(--nf-ink-3); vertical-align: middle; }
.us-av.admin { background: var(--nf-navy); color: #fff; }
.us-you { font-size: .72rem; color: var(--nf-ink-3); background: var(--nf-ground); padding: 1px 7px; border-radius: 999px; margin-left: 4px; }
.us-role { font-size: .75rem; font-weight: 600; padding: 2px 10px; border-radius: 999px;
  background: var(--nf-ground); color: var(--nf-ink-3); }
.us-role.admin { background: var(--nf-navy-tint); color: var(--nf-navy); }
.us-link { font-size: .85rem; font-weight: 600; color: var(--nf-navy); text-decoration: none; }
.us-link:hover { text-decoration: underline; }
.us-menu { display: inline-block; text-align: left; }
.us-drop { min-width: 300px; display: grid; gap: 6px; padding: 10px; }
.us-drop .us-inline input { flex: 1; width: auto; }
.us-col { display: grid; gap: 6px; margin: 0; }
.us-col input { font: inherit; font-size: .86rem; height: 32px; padding: 0 10px; border: 1px solid var(--nf-line-mid);
  border-radius: 7px; background: #fff; color: var(--nf-ink); box-sizing: border-box; width: 100%; }
.us-col input:focus { outline: none; border-color: var(--nf-navy); box-shadow: 0 0 0 3px var(--nf-navy-tint); }
.us-col .btn.small { height: 32px; padding: 0 14px; box-shadow: none; }
.us-acc { padding-bottom: 8px; border-bottom: 1px solid var(--nf-line); }
.us-acc-h { font-size: .8rem; color: var(--nf-ink-3); font-weight: 600; }
.us-chk { display: flex; align-items: center; gap: 8px; font-size: .86rem; cursor: pointer; }
.us-col .us-chk input { height: auto; width: auto; padding: 0; margin: 0; box-shadow: none; }
.us-me > summary { list-style: none; cursor: pointer; }
.us-me > summary::-webkit-details-marker { display: none; }
.us-me > summary::after { content: " ▾"; color: var(--nf-ink-3); font-size: .8rem; }
.us-me[open] > summary::after { content: " ▴"; }
.us-mef { margin-top: 12px; }
@media (max-width: 640px) {
  .us-table th:nth-child(3), .us-table td:nth-child(3) { display: none; }
  .us-inline input { width: 100%; }
  .us-addw { align-items: stretch; width: 100%; }
}

/* Surveys header: one slim bar — title and count, search, New survey. */
.sv-head { display: flex; align-items: center; gap: 12px; padding: 12px 18px; }
.sv-head .sv-h { font-size: 1.15rem; font-weight: 700; color: var(--nf-navy); margin: 0; display: flex; align-items: center; gap: 8px; }
.sv-count { font-size: .75rem; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--nf-navy-tint); color: var(--nf-navy); }
.sv-head .sv-find { margin: 0 0 0 auto; max-width: 260px; height: 34px; padding: 0 12px; font-size: .86rem; border-radius: 7px; box-sizing: border-box; }
.sv-head .sv-find:focus { outline: none; border-color: var(--nf-navy); box-shadow: 0 0 0 3px var(--nf-navy-tint); }
.sv-head .sv-new { height: 34px; display: inline-flex; align-items: center; box-shadow: none; }
@media (max-width: 640px) {
  .sv-head { flex-wrap: wrap; }
  .sv-head .sv-find { order: 3; max-width: none; margin: 0; }
  .sv-head .sv-new { margin-left: auto; }
}

/* Surveys page: an open row shows the same tabs, in the same order and style,
   as that survey's own header. */
.sv-card .sv-ctabs { display: none; }
.sv-card.open .sv-ctabs { display: flex; }
.sv-card.open .sv-row { background: none; }
.sv-ctabs .sv-link { margin-inline-start: auto; align-self: center; padding-inline-start: 12px; white-space: nowrap; }
.sv-row .sv-hub-act { flex-shrink: 0; }

/* AI page: the analyze action in its own highlighted panel, icon first. */
.ai-hero { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px 18px; margin: 16px 0 20px;
  padding: 18px 20px; border-radius: var(--nf-radius-md); border: 1px solid var(--nf-line-mid);
  background: linear-gradient(120deg, var(--nf-navy-tint), var(--nf-green-tint)); }
.ai-hero-ic { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--nf-navy), var(--nf-green)); box-shadow: 0 10px 22px -12px rgba(40,48,144,.7); }
.ai-hero-txt { min-width: 0; }
.ai-hero-txt b { display: block; font-size: 1.08rem; color: var(--nf-navy); }
.ai-hero-txt .act-note { display: block; font-size: .85rem; margin-top: 3px; }
.ai-go { display: inline-flex; align-items: center; gap: 9px; padding: 12px 24px; font-size: 1rem; white-space: nowrap; }
.ai-go svg { flex-shrink: 0; }
.ai-hero .ai-run-box { grid-column: 1 / -1; margin: 0; }
.ai-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.ai-stop { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; font-size: 1rem;
  color: var(--nf-red); border-color: var(--nf-red); box-shadow: none; }
.ai-stop:hover { background: var(--nf-red-tint); color: var(--nf-red); border-color: var(--nf-red); }
.ai-stop[hidden] { display: none; }
.ai-all[hidden] { display: none; }
.ai-rep { display: inline-block; font-size: .78rem; font-weight: 600; color: #8a5a00; background: #fff4d6;
  border: 1px solid #f0d58a; border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.ai-btns .ai-all { background: #fff; }
.ai-sq { width: 11px; height: 11px; border-radius: 2px; background: currentColor; }
@media (max-width: 640px) {
  .ai-hero { grid-template-columns: auto 1fr; }
  .ai-btns { grid-column: 1 / -1; }
  .ai-btns .btn { flex: 1; justify-content: center; }
}

/* Report filters: folded to one line; the form opens under it when needed. */
details.scope { padding: 0; }
details.scope > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; color: var(--nf-navy); }
details.scope > summary::-webkit-details-marker { display: none; }
.scope-now { color: var(--nf-ink-2); font-size: .9rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scope-on { font-size: .72rem; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--nf-navy); color: #fff; }
.scope-tog { margin-left: auto; font-size: .85rem; font-weight: 600; white-space: nowrap; }
.scope-tog::after { content: " ▾"; }
details.scope[open] .scope-tog::after { content: " ▴"; }
details.scope > form { padding: 4px 18px 16px; border-top: 1px solid #D5DAF2; }
details.scope .chips { margin: 12px 0; }
details.scope .filters input, details.scope .filters select { height: 34px; padding: 0 10px; font-size: .86rem; box-sizing: border-box; }
details.scope .filters .btn.small { height: 34px; display: inline-flex; align-items: center; padding: 0 16px; box-shadow: none; }

/* AI topics: one row per topic, its tone on the left edge, tags not prose. */
.tp-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 18px 0 8px; }
.tp-head .q-text { margin: 0; }
.tp-sum { display: flex; gap: 6px; flex-wrap: wrap; }
.tp-list { border: 1px solid var(--nf-line); border-radius: 10px; overflow: hidden; background: #fff; }
.tp-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.3fr) minmax(0, .9fr); gap: 14px; align-items: center;
  padding: 9px 14px 9px 12px; border-left: 4px solid transparent; border-top: 1px solid var(--nf-line); }
.tp-row:first-child { border-top: 0; }
.tp-row:not(.tp-th):hover { background: var(--nf-ground); }
.tp-th { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--nf-ink-3);
  background: var(--nf-ground); padding-top: 7px; padding-bottom: 7px; }
.tp-neg { border-left-color: var(--nf-red); }
.tp-req { border-left-color: var(--nf-navy); }
.tp-pos { border-left-color: var(--nf-green); }
.tp-neu { border-left-color: var(--nf-line-mid); }
.tp-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tp-name b { font-size: .92rem; color: var(--nf-ink); }
.tp-name [dir="rtl"] { font-size: .82rem; color: var(--nf-ink-3); text-align: left; }
.tp-tags, .tp-ids { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.tg { display: inline-flex; align-items: center; font-size: .75rem; font-weight: 600; line-height: 1; padding: 4px 9px;
  border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
.tg-neg { color: var(--nf-red); background: var(--nf-red-tint); border-color: #f5c2c2; }
.tg-req { color: var(--nf-navy); background: var(--nf-navy-tint); border-color: #cfd4ef; }
.tg-pos { color: var(--nf-green-txt); background: var(--nf-green-tint); border-color: #bfe3c9; }
.tg-neu { color: var(--nf-ink-3); background: var(--nf-ground); border-color: var(--nf-line); }
.tg-rep { color: #8a5a00; background: #fff4d6; border-color: #f0d58a; }
.tp-id { font-size: .78rem; font-weight: 600; color: var(--nf-ink-3); text-decoration: none; padding: 3px 8px;
  border-radius: 6px; background: var(--nf-ground); border: 1px solid var(--nf-line); }
.tp-id:hover { color: var(--nf-navy); border-color: var(--nf-navy); }
.tp-id.rep { color: #8a5a00; background: #fff4d6; border-color: #f0d58a; }
/* AI page: one table, a row per customer, its topics inline. */
.ai-filter button { cursor: pointer; font-family: inherit; opacity: .6; }
.ai-filter button.on, .ai-filter button:hover { opacity: 1; box-shadow: 0 0 0 2px currentColor inset; }
.ai-table { table-layout: fixed; min-width: 900px; }
.ai-table .c-id { width: 92px; } .ai-table .c-st { width: 150px; } .ai-table .c-tp { width: 26%; }
.ai-table td { line-height: 1.5; }
.ai-table tr.ai-r > td:first-child { border-left: 4px solid var(--nf-line-mid); }
.ai-table tr.st-bad > td:first-child { border-left-color: var(--nf-red); }
.ai-table tr.st-ok > td:first-child { border-left-color: var(--nf-green); }
.ai-table tbody tr:hover { background: var(--nf-ground); }
.ai-id { font-weight: 700; color: var(--nf-navy); text-decoration: none; margin-right: 4px; }
.ai-id:hover { text-decoration: underline; }
.ai-st { display: inline-block; font-size: .78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.st-ok .ai-st { color: var(--nf-green-txt); background: var(--nf-green-tint); }
.st-mid .ai-st { color: var(--nf-ink-3); background: var(--nf-ground); }
.st-bad .ai-st { color: var(--nf-red); background: var(--nf-red-tint); }
.ai-table .ai-rep { display: table; max-width: 100%; margin-top: 6px; white-space: normal; line-height: 1.35; }
.ai-tps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ai-tps li { padding: 2px 0 2px 8px; border-left: 3px solid var(--nf-line-mid); display: flex; flex-direction: column; }
.ai-tps li.tp-neg { border-left-color: var(--nf-red); }
.ai-tps li.tp-req { border-left-color: var(--nf-navy); }
.ai-tps li.tp-pos { border-left-color: var(--nf-green); }
.ai-tps b { font-size: .84rem; font-weight: 600; color: var(--nf-ink); }
.ai-tps [dir="rtl"] { font-size: .8rem; color: var(--nf-ink-3); text-align: left; }
.ai-ar { display: block; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--nf-line); color: var(--nf-ink-3); }
@media print { .ai-table tr[hidden] { display: table-row; } }
@media (max-width: 720px) {
  .tp-th { display: none; }
  .tp-row { grid-template-columns: 1fr; gap: 6px; }
}