/* Customer feedback (Qualtrics) page — builds on multi2.css + reviews.css */
:root { --pro: var(--good); --pas: var(--warn); --det: var(--bad); }

/* nav strip */
.qx-nav { background: var(--panel); border-bottom: 1px solid var(--line); }
.qx-nav-in { max-width: 1240px; margin: 0 auto; padding: 10px 20px; display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; }
.qx-crumbs { font-size: 14px; color: var(--muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.qx-crumbs a { color: var(--ink); font-weight: 700; text-decoration: none; } .qx-crumbs a:hover { text-decoration: underline; }
.qx-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.qx-pill { font-size: 13px; font-weight: 800; color: var(--ink); text-decoration: none; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); }
.qx-pill.on { background: var(--accent); color: #111; border-color: var(--accent); }
.qx-pill:focus-visible, .qx-crumbs a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.qx-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--muted); }
.qx-meta b { color: var(--ink); }

/* tiles */
.qx-tiles { display: grid; grid-template-columns: 1.3fr repeat(5, minmax(0, 1fr)); gap: 12px; }
.qx-tiles .rv-tile .v small { font-size: 14px; vertical-align: 4px; }
.qx-tiles .rv-tile.good .v { color: var(--good); } .qx-tiles .rv-tile.warn .v { color: var(--warn); } .qx-tiles .rv-tile.bad .v { color: var(--bad); }
.qx-tiles .rv-tile.low .v { color: var(--warn); }
.qx-tiles .rv-tile.hero .v { font-size: 46px; }
.qx-split { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--panel-2); margin: 4px 0 2px; }
.qx-split i { display: block; height: 100%; } .qx-split .pro, .qx-ppd .pro { background: var(--pro); } .qx-split .pas, .qx-ppd .pas { background: var(--pas); } .qx-split .det, .qx-ppd .det { background: var(--det); }
.qx-d { font-size: 12px; font-weight: 800; } .qx-d.up { color: var(--good); } .qx-d.down { color: var(--bad); } .qx-d.flat { color: var(--muted); font-weight: 600; }

/* NPS */
.qx-npsbox { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; align-items: center; }
.qx-npsgauge { position: relative; height: 180px; }
.qx-npsgauge .mid { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.qx-npsgauge .mid b { font-family: var(--font-display); font-size: 40px; line-height: 1; }
.qx-npsgauge .mid span { font-size: 11px; letter-spacing: .14em; color: var(--muted); font-weight: 800; }
.qx-npsfacts { display: grid; gap: 10px; min-width: 0; }
.qx-ppd { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.qx-ppd > div { background: var(--panel-2); border-radius: 8px; padding: 8px 10px; display: grid; gap: 2px; }
.qx-ppd i { width: 10px; height: 10px; border-radius: 2px; display: block; }
.qx-ppd b { font-family: var(--font-display); font-size: 22px; } .qx-ppd span { font-size: 12px; color: var(--muted); }
.qx-need, .qx-rank { margin: 0; font-size: 14px; } .qx-need b, .qx-rank b { color: var(--ink); }
.qx-rank { color: var(--muted); }
.qx-det { display: grid; gap: 10px; }
.qx-detrow, .qx-com { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; }
.qx-detrow p, .qx-com p { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.qx-detrow small, .qx-com small { color: var(--muted); font-size: 12px; } .qx-com small a { color: var(--ink); }
.qx-npsb { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: var(--panel-2); border: 2px solid var(--line); }
.qx-npsb.good { border-color: var(--good); color: var(--good); } .qx-npsb.warn { border-color: var(--warn); color: var(--warn); } .qx-npsb.bad { border-color: var(--bad); color: var(--bad); }
.qx-npsstory { margin: 0; font-size: 14.5px; } .qx-npsstory b { color: var(--ink); }
.rv-ai-col li em { display: block; font-style: normal; font-size: 12px; color: var(--accent); }

/* bars */
.qx-bars { display: grid; gap: 10px; }
.qx-bar { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) 46px 36px; gap: 10px; align-items: center; font-size: 14px; }
.qx-bar .lab { overflow-wrap: anywhere; }
.qx-bar .track, .qx-star .track { position: relative; height: 12px; background: var(--panel-2); border-radius: 6px; overflow: visible; }
.qx-bar .track i, .qx-star .track i { display: block; height: 100%; border-radius: 6px; background: var(--a); }
.qx-bar .track i.good { background: var(--good); } .qx-bar .track i.warn { background: var(--warn); } .qx-bar .track i.bad { background: var(--bad); }
.qx-bar .ref { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); opacity: .7; border-radius: 1px; }
.qx-bar .val { font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.qx-note { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); } .qx-note b { color: var(--ink); }
.qx-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.qx-list li { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); padding-bottom: 6px; } .qx-list li:last-child { border-bottom: 0; }

/* topics */
.qx-topics { display: grid; gap: 8px; }
.qx-topic { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr) 80px; gap: 10px; align-items: center; font-size: 13.5px; }
.qx-topic .track { display: flex; height: 12px; border-radius: 6px; overflow: hidden; min-width: 6px; }
.qx-topic .track i { display: block; height: 100%; } .qx-topic .p { background: var(--good); } .qx-topic .m { background: var(--muted); opacity: .6; } .qx-topic .n { background: var(--bad); }
.qx-topic .val { font-weight: 700; font-variant-numeric: tabular-nums; } .qx-topic .val em { font-style: normal; color: var(--bad); font-size: 12px; }
.qx-topics .legend { margin-bottom: 4px; }

/* Google */
.qx-google { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 22px; }
.qx-gside { display: grid; gap: 6px; align-content: start; border-right: 1px solid var(--line); padding-right: 20px; }
.qx-gbig { font-family: var(--font-display); font-weight: 700; font-size: 48px; line-height: 1; }
.qx-star { display: grid; grid-template-columns: 34px minmax(0, 1fr) 32px; gap: 8px; align-items: center; font-size: 13px; }
.qx-star .track i { background: #fbbc04; } .qx-star b { text-align: right; }
.qx-gfacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.qx-gfacts div { background: var(--panel-2); border-radius: 8px; padding: 8px; display: grid; } .qx-gfacts b { font-size: 18px; } .qx-gfacts span { font-size: 11.5px; color: var(--muted); }
.qx-glist { display: grid; gap: 10px; align-content: start; min-width: 0; }
.qx-revs { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.qx-rev { background: var(--panel-2); border-radius: 8px; padding: 10px 12px; display: grid; gap: 6px; align-content: start; border-left: 3px solid transparent; }
.qx-rev.low { border-left-color: var(--bad); }
.qx-rev .rtop { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); }
.qx-rev p { margin: 0; font-size: 13.5px; overflow-wrap: anywhere; } .qx-rev .who { font-size: 12px; color: var(--muted); } .qx-rev .who a { color: var(--ink); }

/* segmented filters */
.qx-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.qx-seg button { font: inherit; font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); cursor: pointer; }
.qx-seg button[aria-pressed="true"] { background: var(--accent); color: #111; border-color: var(--accent); }
.qx-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.qx-coms { display: grid; gap: 12px; } .qx-com p.imp { color: var(--muted); } .qx-com p.imp b { color: var(--ink); }

/* ranking tables */
.qx-tablewrap { overflow-x: auto; }
.qx-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.qx-table th { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 0 8px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.qx-table td { padding: 9px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.qx-table .n { text-align: right; }
.qx-table tbody tr { cursor: pointer; } .qx-table tbody tr:hover td { background: var(--panel-2); }
.qx-table tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.qx-table tr.me td { background: var(--b-soft); }
.qx-table td.good { color: var(--good); } .qx-table td.warn { color: var(--warn); } .qx-table td.bad { color: var(--bad); }

@media (max-width: 1100px) { .qx-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .row.r-2, .row.r-75 { grid-template-columns: minmax(0, 1fr); }
  .qx-google { grid-template-columns: minmax(0, 1fr); } .qx-gside { border-right: 0; padding-right: 0; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
  .qx-bar { grid-template-columns: minmax(0, 1fr) 46px 36px; } .qx-bar .track { grid-column: 1 / -1; grid-row: 2; }
  .pick select { min-width: 0; width: 100%; }
}
@media (max-width: 620px) {
  .qx-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .qx-tiles .rv-tile.hero { grid-column: 1 / -1; }
  .qx-npsbox { grid-template-columns: minmax(0, 1fr); } .qx-npsgauge { height: 160px; }
  .qx-topic { grid-template-columns: minmax(0, 110px) minmax(0, 1fr) 64px; }
  .tools { width: 100%; } .tools .pick { flex: 1 1 140px; }
}
@media print {
  .qx-nav, .qx-seg { display: none !important; }
  .qx-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .row.r-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .qx-table tbody tr { cursor: default; }
}
.qx-crumbs a.qx-home { display: inline-flex; align-items: center; gap: 6px; }
.qx-home svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }