@cosla/sensemaking-report-builder 0.1.0

package/src/style.css

@@ -0,0 +1,1609 @@
+:root {
+  --color-black: #000000;
+  --color-white: #ffffff;
+  --color-gray-50: rgb(247, 247, 247);
+  --color-gray-100: rgb(239, 239, 239);
+  --color-gray-200: rgb(223, 223, 223);
+  --color-gray-300: rgb(202, 202, 202);
+  --color-gray-400: rgb(168, 168, 168);
+  --color-gray-500: rgb(135, 135, 135);
+  --color-gray-600: rgb(109, 109, 109);
+  --color-gray-700: rgb(78, 78, 78);
+  --color-gray-800: rgb(55, 55, 55);
+  --color-gray-900: rgb(38, 38, 38);
+  --color-gray-1000: rgb(25, 25, 25);
+	--color-blue-extra-light: #F3F7FF;
+	--color-blue-light: #D3E3FD;
+	--color-blue-medium: #0B57D0;
+	--color-blue-dark: #1E2656;
+	--10px: 0.625rem;
+	--11px: 0.675rem;
+  --12px: 0.75rem;
+  --14px: 0.875rem;
+  --16px: 1rem;
+  --18px: 1.125rem;
+  --20px: 1.25rem;
+  --22px: 1.375rem;
+  --24px: 1.5rem;
+  --28px: 1.75rem;
+  --32px: 2rem;
+  --36px: 2.25rem;
+  --40px: 2.5rem;
+  --44px: 2.75rem;
+  --48px: 3rem;
+  --56px: 3.5rem;
+  --64px: 4rem;
+  --80px: 5rem;
+  --96px: 6rem;
+  --112px: 7rem;
+  --128px: 8rem;
+
+  --sidebar-width: calc(300px + 4rem);
+	--header-height: 80px;
+	--overview-chart-width: 12rem;
+
+	--serif: "Noto Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+	--mono: Menlo, Consolas, Monaco, monospace;
+
+	/* z-index */
+	--z-bottom: -100;
+	--z-middle: 0;
+	--z-top: 100;
+	--z-overlay: 1000;
+
+	/* presets (used in reset.css) */
+	--border-radius: 2rem;
+	--font-body: var(--serif);
+	--font-form: var(--sans);
+	--color-bg: var(--color-gray-100);
+	--color-border: var(--color-gray-200);
+	--color-text: var(--color-black);
+	--color-text-medium: var(--color-gray-900);
+	--color-text-light: var(--color-gray-700);
+	--color-text-lightest: var(--color-gray-600);
+	--color-primary: var(--gray-1000);
+	--color-link: var(--color-black);
+	--color-link-hover: var(--color-black);
+	--color-focus: var(--color-gray-300);
+	--color-mark: var(--color-blue-light);
+	--color-selection: var(--color-blue-light);
+	--color-button-bg: var(--color-white);
+	--color-button-text: var(--color-text);
+	--color-button-hover: var(--color-gray-200);
+	--color-input-bg: var(--color-gray-50);
+	--color-input-text: var(--color-gray-900);
+	--color-placeholder: var(--color-gray-600);
+	--color-card-bg: var(--color-white);
+	--color-badge-bg-light: var(--color-blue-light);
+	--color-badge-text-light: var(--color-blue-dark);
+	--color-badge-bg-dark: var(--color-blue-dark);
+	--color-badge-text-dark: var(--color-white);
+	--color-button-text-alt: var(--color-blue-medium);
+}
+
+/* noto-sans-regular - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Noto Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: url('fonts/noto-sans-v42-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* noto-sans-500 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Noto Sans';
+  font-style: normal;
+  font-weight: 500;
+  src: url('fonts/noto-sans-v42-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* noto-sans-600 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Noto Sans';
+  font-style: normal;
+  font-weight: 600;
+  src: url('fonts/noto-sans-v42-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* noto-sans-700 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Noto Sans';
+  font-style: normal;
+  font-weight: 700;
+  src: url('fonts/noto-sans-v42-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+html {
+	scroll-behavior: smooth;
+	scroll-padding-top: calc(var(--header-height) + 1rem);
+}
+
+body {
+	font-family: var(--serif);
+	background: var(--color-bg);
+	color: var(--color-text);
+}
+
+h1 {
+	font-size: var(--24px);
+	font-weight: 700;
+	line-height: 1.325;
+}
+
+h2 {
+	font-size: var(--22px);
+	font-weight: 500;
+	line-height: 1.325;
+}
+
+h3 {
+	font-size: var(--20px);
+	font-weight: 500;
+	line-height: 1.325;
+}
+
+h4 {
+	font-size: var(--20px);
+	font-weight: 500;
+	line-height: 1.325;
+}
+
+p {
+	font-size: var(--16px);
+	line-height: 1.5;
+	margin: 1rem auto;
+}
+
+a {
+	color: var(--color-link);
+	text-decoration-color: var(--color-link);
+}
+
+ul {
+	margin: 0;
+	padding: 0;
+}
+
+li {
+	list-style-type: none;
+}
+
+.button, button {
+	display: flex;
+	align-items: center;
+	font-size: var(--14px);
+	font-weight: 500;
+	background: var(--color-button-bg);
+	color: var(--color-button-text);
+	border-radius: var(--border-radius);
+	padding: 1rem;
+	text-decoration: none;
+	line-height: 1;
+	border: none;
+	cursor: pointer;
+	user-select: none;
+}
+
+button img, .button img, button svg, .button svg {
+	margin-inline-end: 0.5rem;
+}
+
+button.ghost, .button.ghost {
+	background: none;
+	border: none;
+	color: var(--color-badge-text-light);
+}
+
+.button-share {
+	border: 1px solid var(--color-border);
+	padding: 0.5rem 1rem;
+	font-size: var(--12px);
+	flex-shrink: 0;
+}
+
+.button-filter-compare {
+	border: 1px solid var(--color-border);
+	padding: 0.5rem 1rem;
+	font-size: var(--14px);
+}
+
+a:hover, button:hover {
+	background: var(--color-button-hover);
+}
+
+hr {
+	border: none;
+	border-top: 1px solid var(--color-bg);
+	margin: 2rem 0;
+}
+
+article.topic hr {
+	margin-bottom: 0;
+}
+
+section {
+	position: relative;
+	padding: 2rem 0;
+}
+
+section > header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	gap: 1rem;
+}
+
+section > header > :is(h1, h2, h3, h4, h5, h6) {
+	flex: 1;
+	min-width: 0;
+}
+
+section > *:not(hr) { 
+	padding: 0 2rem;
+}
+
+.skip-to-main {
+	border: none;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+	position: absolute;
+	text-decoration: none;
+}
+
+.skip-to-main:focus {
+	background-color: var(--color-gray-900, black);
+	color: var(--color-white, white);
+	width: auto;
+	height: auto;
+	padding: 8px;
+	z-index: var(--z-overlay, 1000);
+}
+
+
+/* layout */
+.layout-wrapper {
+    display: flex;
+    min-height: 100vh;
+		width: 100%;
+		max-width: 1256px;
+		margin: 0 auto;
+}
+
+/* header */
+body > header {
+	background: var(--color-card-bg);
+	padding: 0 1rem;
+	height: var(--header-height);
+	position: sticky;
+	top: 0;
+	left: 0;
+	width: 100%;
+	z-index: var(--z-top);
+	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+	display: flex;
+	align-items: center;
+}
+
+body > header .logo {
+	height: calc(var(--header-height) - 2rem);
+}
+
+body > header div {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	width: 100%;
+}
+
+body > header button {
+	width: 2.5rem;
+	height: 2.5rem;
+	padding: 0.5rem;
+	display: none;
+}
+
+#content {
+	flex: 1;
+	min-width: 0;
+	padding: 2rem;
+	padding-inline-start: 0;
+	max-width: 960px;
+}
+
+/* padding: 2rem; */
+
+article {
+	background: var(--color-card-bg);
+	border-radius: calc(var(--border-radius) * 0.5);
+	margin-bottom: 2rem;
+	overflow: hidden;
+}
+
+article.topic {
+	padding-bottom: 0;
+}
+
+/* title/toggle */
+#title {
+	margin-bottom: 2rem;
+}
+
+#title h1 {
+	text-align: center;
+}
+
+
+/* content toggle (Full Report / Predicted Agreement) */
+.app-tab {
+	display: none;
+}
+
+.app-tab.is-visible {
+	display: block;
+}
+
+.content-toggle {
+	text-align: center;
+}
+
+.content-toggle-inner {
+	display: inline-flex;
+	border-radius: var(--border-radius);
+	margin-top: 1rem;
+	overflow: hidden;
+}
+
+.content-toggle-btn {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 12rem;
+	border-radius: 0;
+	font-size: var(--12px);
+	font-weight: 500;
+	background: var(--color-white);
+	color: var(--color-text);
+	border: none;
+	cursor: pointer;
+	padding: 0.75rem 1rem;
+}
+
+.content-toggle-btn:first-child {
+	border-start-start-radius: var(--border-radius);
+	border-end-start-radius: var(--border-radius);
+	border-start-end-radius: 0;
+	border-end-end-radius: 0;
+}
+
+.content-toggle-btn:last-child {
+	border-start-end-radius: var(--border-radius);
+	border-end-end-radius: var(--border-radius);
+	border-start-start-radius: 0;
+	border-end-start-radius: 0;
+}
+
+.content-toggle-btn:hover {
+	background: var(--color-button-hover);
+}
+
+.content-toggle-btn.is-active,
+.content-toggle-btn.is-active:hover {
+	background: var(--color-blue-light);
+	color: var(--color-blue-dark);
+}
+.content-toggle-btn img {
+	display: none;
+}
+
+.content-toggle-btn.is-active img {
+	display: inline-block;
+}
+
+
+/* sidebar */
+.sidebar {
+	width: var(--sidebar-width);
+	height: calc(100svh - var(--header-height));
+	padding: 2rem;
+	position: sticky;
+	top: var(--header-height);
+	flex-shrink: 0;
+	overflow-y: auto;
+	z-index: calc(var(--z-top) - 1);
+}
+.sidebar nav p {
+	font-size: var(--12px);
+	font-weight: 700;
+	padding: 0 1rem;
+	margin: 1.5rem auto 0.5rem auto;
+	color: var(--color-text-medium);
+}
+
+.sidebar-inner {
+	display: none;
+}
+
+.sidebar-inner.is-active {
+	display: block;
+}
+
+.sidebar ul {
+	border-radius: var(--border-radius);
+	background: var(--color-card-bg);
+	overflow: hidden;
+}
+
+.sidebar li {
+	border-bottom: 1px solid var(--color-border);
+}
+
+.sidebar li:last-of-type {
+	border-bottom: none;
+}
+
+.sidebar nav .standalone-item {
+	margin-bottom: 0.5rem;
+}
+
+.sidebar nav .standalone-item img, .sidebar nav .standalone-item svg {
+	width: 1.5rem;
+	margin-inline-end: 1rem;
+	display: inline-block;
+	vertical-align: middle;
+}
+
+.sidebar a {
+	font-size: var(--12px);
+}
+
+.sidebar a span.badge {
+	display: inline-block;
+	background: var(--color-badge-bg-light);
+	color: var(--color-badge-text-light);
+	background: var(--color-badge-bg-light);
+	color: var(--color-badge-text-light);
+	border-radius: var(--border-radius);
+	padding: 0.25rem;
+	width: 3.5rem;
+	min-width: 3.5rem;
+	text-align: center;
+	margin-inline-end: 0.5rem;
+}
+
+.sidebar li a {
+	display: flex;
+	align-items: flex-start;
+	border-radius: 0;
+}
+
+.sidebar li a .text {
+	padding-top: 0.25rem;
+}
+
+.sidebar a.is-active {
+	background: var(--color-badge-bg-light);
+}
+
+/* executive summary stats */
+.summary-stats {
+	display: flex;
+	justify-content: space-between;
+	margin-top: 2rem;
+}
+
+.summary-stats li {
+	display: flex;
+	align-items: center;
+	padding: 0.5rem;
+	flex: 1;
+	line-height: 1.2;
+}
+
+.summary-stats li:first-of-type {
+	padding-inline-start: 0;
+}
+
+.summary-stats li:last-of-type {
+	padding-inline-end: 0;
+}
+
+.summary-stats li span.badge {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 3rem;
+	min-width: 3rem;
+	height: 3rem;
+	background: var(--color-badge-bg-dark);
+	color: var(--color-badge-text-dark);
+	border-radius: 50%;
+}
+
+.summary-stats li span.text {
+	display: flex;
+	flex-direction: column;
+	font-weight: 500;
+	margin-inline-start: 1rem;
+	font-size: var(--14px);
+	color: var(--color-badge-text-light);
+}
+
+.summary-stats li span.text strong {
+	font-size: var(--20px);
+}
+
+
+/* conversation overview chart */
+
+#conversation-overview .toggle-container {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin: 1rem auto;
+}
+
+#conversation-overview fieldset {
+	border: none;
+	padding: 0;
+}
+
+#conversation-overview fieldset label {
+	margin-inline-end: 0.5rem;
+}
+
+#conversation-overview-chart .topic-wrapper {
+	margin-bottom: 1rem;
+}
+
+#conversation-overview-chart .topic-header {
+	font-size: var(--12px);
+	font-weight: 700;
+	margin-bottom: 0.25rem;
+	text-transform: uppercase;
+}
+
+#conversation-overview-chart .topic-meta {
+	font-weight: 500;
+}
+
+#conversation-overview-chart .topic-group {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	margin-bottom: 0.2rem;
+}
+
+#conversation-overview-chart .topic-group-label {
+	font-size: var(--12px);
+	min-width: 3rem;
+	flex-shrink: 0;
+	color: var(--color-text);
+	cursor: pointer;
+}
+
+#conversation-overview-chart .topic-group-label:empty {
+	display: none;
+}
+
+#conversation-overview-chart .topic-svg {
+	flex: 1;
+	display: block;
+}
+
+[dir="rtl"] .demographic-svg,
+[dir="rtl"] .topic-svg {
+	transform: scaleX(-1);
+}
+
+#conversation-overview-chart .topic-group-count {
+	font-size: var(--12px);
+	min-width: 84px;
+	flex-shrink: 0;
+	text-align: end;
+	white-space: nowrap;
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+}
+
+#conversation-overview-chart .topic-group-count img {
+	display: inline-block;
+	margin-inline-start: 0.25rem;
+}
+
+
+/* participant overview chart */
+.demographic-chart {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 1rem;
+	margin-top: 2rem;
+}
+
+.demographic-chart .demographic-wrapper {
+	width: calc(50% - 1rem);
+	background: var(--color-bg);
+	padding: 1rem;
+	border-radius: calc(var(--border-radius) * 0.25);
+}
+
+.demographic-chart .demographic-header {
+	font-size: var(--12px);
+	font-weight: 500;
+	margin-bottom: 0.25rem;
+	text-transform: uppercase;
+}
+
+
+.demographic-chart .demographic-legend {
+	display: flex;
+	flex-wrap: wrap;
+	margin-top: 0.5rem;
+}
+
+#topics-identified {
+	display: inline-block;
+	border-radius: var(--border-radius);
+	background: var(--color-mark);
+	margin-bottom: 2rem;
+	padding: 0.75rem 1.5rem;
+	font-weight: 500;
+	font-size: var(--18px);
+}
+
+.topic-overview {
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.topic-overview-stats {
+	display: flex;
+	width: 100%;
+	margin: 1rem 0;
+}
+
+.topic-overview-stats div {
+	margin-inline-end: 1rem;
+	font-size: var(--14px);
+	font-weight: 500;
+	color: var(--color-badge-text-light);
+}
+
+.topic-overview-stats .badge {
+	display: inline-block;
+	background: var(--color-badge-bg-dark);
+	color: var(--color-badge-text-dark);
+	border-radius: var(--border-radius);
+	font-weight: 600;
+	font-size: var(--12px);
+	padding: 0.25rem 0.5rem;
+	margin-inline-end: 0.25rem;
+	width: 3.5rem;
+	text-align: center;
+}
+
+.topic-overview-summary {
+	width: calc(100% - var(--overview-chart-width));
+	padding-inline-end: 2rem;
+}
+
+.topic-overview-summary p {
+	margin: 0;
+}
+
+.topic-overview-chart {
+	min-width: var(--overview-chart-width);
+	width: var(--overview-chart-width);
+}
+
+.topic-overview-chart-inner {
+	position: relative;
+	width: 100%;
+	aspect-ratio: 1;
+}
+
+.donut-chart-title {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	top: 0;
+	left: 0;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	pointer-events: none;
+	line-height: 1.325;
+}
+
+.donut-chart-title .underline {
+	display: inline-block;
+	font-size: var(--12px);
+	font-weight: 500;
+	color: var(--color-text-light);
+}
+
+.donut-chart-title .count {
+	display: inline-block;
+	font-size: var(--24px);
+	font-weight: 700;
+	color: var(--color-text);
+}
+
+.topic-opinion {
+	padding: 1rem 2rem;
+	border: 1px solid transparent;
+	border-bottom: 1px solid var(--color-bg);
+	margin-inline: -2rem;
+	width: auto;
+}
+
+.topic-opinion:last-of-type {
+	border-bottom: none;
+	padding-bottom: 2rem;
+
+}
+
+.topic-opinion[open] {
+	border-top: 1px solid var(--color-bg);
+	background: var(--color-blue-extra-light)
+}
+
+
+.topic-opinion summary {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0;
+  cursor: pointer;
+  list-style: none;
+  font-size: var(--16px);
+}
+
+
+.topic-opinion summary .summary-wrapper {
+	padding-inline-end: 1rem;
+	display: flex;
+	flex-direction: column;
+	
+}
+
+.topic-opinion summary span.summary-overline {
+	font-size: var(--12px);
+	font-weight: 700;
+	margin-bottom: 0.5rem;
+}
+
+.topic-opinion summary::-webkit-details-marker {
+  display: none;
+}
+
+.topic-opinion .chevron {
+  width: 2rem;
+  height: 2rem;
+  stroke: var(--color-text-light);
+  transition: transform 0.25s ease;
+  flex-shrink: 0;
+}
+
+
+.topic-opinion[open] .chevron {
+  transform: rotate(180deg);
+}
+
+.topic-opinion-sample ul {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: 1rem;
+	margin: 0;
+	padding: 0;
+	padding-top: 1rem;
+}
+
+.topic-opinion-sample li {
+	font-size: var(--14px);
+	padding: 1.5rem;
+	border: 1px solid var(--color-border);
+	border-radius: calc(var(--border-radius) * 0.5);
+	border-end-start-radius: 0;
+	background: var(--color-white);
+	line-height: 1.5;
+}
+
+.topic-opinion-view-all {
+	display: flex;
+	justify-content: center;
+	padding: 2rem 1rem;
+}
+
+.button-quotes {
+	text-align: center;
+	background: var(--color-badge-bg-dark);
+	color: var(--color-badge-text-dark);
+	padding: 0.5rem 1rem;
+}
+
+.button-quotes:hover {
+	background: var(--color-blue-medium);
+	color: var(--color-badge-text-dark);
+}
+
+
+/* drawer */
+#drawer {
+	display: flex;
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	justify-content: center;
+	align-items: center;
+	z-index: var(--z-overlay);
+	pointer-events: none;
+}
+
+#drawer.is-open {
+	pointer-events: auto;
+}
+
+.drawer-bg {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: rgba(0, 0, 0, 0.5);
+	opacity: 0;
+}
+
+#drawer.is-open .drawer-bg {
+	opacity: 1;
+	transition: opacity 0.25s ease;
+}
+
+.drawer-content {
+	position: absolute;
+	top: 0;
+	inset-inline-end: 0;
+	background: var(--color-card-bg);
+	border-start-start-radius: calc(var(--border-radius) * 0.5);
+	border-end-start-radius: calc(var(--border-radius) * 0.5);
+	padding: 2rem;
+	width: 100%;
+	height: 100%;
+	max-width: 960px;
+	z-index: var(--z-top);
+	display: flex;
+	flex-direction: column;
+	transform: translateX(100%);
+	transition: transform 0.25s ease;
+}
+
+[dir="rtl"] .drawer-content {
+	transform: translateX(-100%);
+}
+
+#drawer.is-open .drawer-content,
+[dir="rtl"] #drawer.is-open .drawer-content {
+	transform: translateX(0);
+}
+
+#drawer .button-close {
+	position: absolute;
+	top: 0.75rem;
+	inset-inline-end: 0.75rem;
+	background: none;
+	border: none;
+	z-index: var(--z-top);
+}
+
+#drawer .button-close img {
+	margin-inline-end: 0;
+}
+
+#drawer .tab {
+	overflow: auto;
+	display: none;
+}
+
+#drawer .tab.is-visible {
+	display: block;
+}
+
+.drawer-toggle-inner {
+	border-bottom: 1px solid var(--color-border);
+	margin-bottom: 1rem;
+	display: flex;
+	gap: 1rem;
+}
+
+.drawer-toggle-inner button {
+	display: block;
+	padding: 0;
+	padding-bottom: 0.5rem;
+	background: none;
+	border-radius: 0;
+	border-bottom: 2px solid transparent;
+}
+
+.drawer-toggle-inner button:hover {
+	background: none;
+}
+
+.drawer-toggle-inner button.is-active {
+	border-bottom: 2px solid var(--color-blue-medium);
+}
+
+.drawer-quotes-filters {
+	position: sticky;
+	top: 0;
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.5rem;
+	background: var(--color-white);
+	z-index: var(--z-top);
+	padding-bottom: 1rem;
+}
+
+.drawer-quotes-filters select {
+	border-radius: calc(var(--border-radius) * 0.25);
+	border: 1px solid var(--color-border);
+	padding: 0.25rem 0.5rem;
+	padding-inline-end: 2rem;
+	font-size: var(--14px);
+	font-weight: 500;
+	appearance: none;
+	-webkit-appearance: none;
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23333'/%3E%3C/svg%3E");
+	background-repeat: no-repeat;
+	background-position: right 0.6rem center;
+	background-size: 10px 6px;
+	text-transform: capitalize;
+}
+
+[dir="rtl"] .drawer-quotes-filters select {
+	background-position: left 0.6rem center;
+}
+
+.drawer-opinion {
+	font-size: var(--18px);
+	font-weight: 500;
+	line-height: 1.325;
+	width: 100%;
+} 
+
+.drawer-quotes {
+	position: relative;
+	flex-grow: 1;
+	min-height: 0;
+	overflow: auto;  
+}
+
+.drawer-quotes li {
+	font-size: var(--14px);
+	line-height: 1.5;
+	margin-bottom: 0.5rem;
+	border-top: 1px solid var(--color-border);
+	padding-top: 0.5rem;
+}
+
+.drawer-quotes li > span {
+	display: block;
+}
+
+.drawer-quotes li span.demographics {
+	display: flex;
+	gap: 1rem;
+	margin-top: 0.5rem;
+	font-size: var(--11px);
+	font-weight: 700;
+	color: var(--color-text-lightest);
+}
+
+#filter-compare {
+	display: none;
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	justify-content: center;
+	align-items: center;
+	z-index: var(--z-overlay);
+}
+
+#filter-compare.is-open {
+	display: flex;
+}
+
+.filter-compare-bg {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: rgba(0, 0, 0, 0.5);
+}
+
+.filter-compare-content {
+	position: relative;
+	background: var(--color-card-bg);
+	border-radius: calc(var(--border-radius) * 0.5);
+	padding: 2rem;
+	padding-bottom: 0;
+	width: 90%;
+	max-height: 80%;
+	max-width: 800px;
+	z-index: var(--z-top);
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	overflow-y: auto;
+}
+
+.filter-compare-title {
+	font-size: var(--18px);
+	font-weight: 500;
+	line-height: 1.325;
+	padding-inline-end: 2rem;
+}
+
+.filter-compare-description {
+	font-size: var(--14px);
+	color: var(--color-text-secondary);
+	margin: 0;
+}
+
+#filter-compare .button-close {
+	position: absolute;
+	top: 0.75rem;
+	inset-inline-end: 0.75rem;
+	background: none;
+	border: none;
+	z-index: var(--z-top);
+}
+
+#filter-compare .button-close img {
+	margin-inline-end: 0;
+}
+
+.filter-compare-groups {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+}
+
+.filter-group-card {
+	border: 1px solid var(--color-border);
+	border-radius: calc(var(--border-radius) * 0.5);
+	padding: 1rem;
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+}
+
+.filter-group-header {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	justify-content: space-between;
+}
+
+.filter-group-label {
+	font-weight: 700;
+	font-size: var(--14px);
+}
+
+.filter-group-summary {
+	font-size: var(--14px);
+	color: var(--color-text-secondary);
+	background: var(--color-bg);
+	border-radius: calc(var(--border-radius) * 0.25);
+	padding: 0.4rem 0.75rem;
+}
+
+.filter-group-selects {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+	gap: 0.5rem;
+}
+
+.filter-select-wrapper {
+	display: flex;
+	flex-direction: column;
+	gap: 0.125rem;
+	background: var(--color-bg);
+	border-radius: calc(var(--border-radius) * 0.25);
+	padding: 0.5rem;
+	position: relative;
+}
+
+.filter-select-wrapper::after {
+	content: "";
+	position: absolute;
+	inset-inline-end: 1rem;
+	top: 50%;
+	transform: translateY(100%);
+	width: 10px;
+	height: 6px;
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23333'/%3E%3C/svg%3E");
+	background-repeat: no-repeat;
+	background-size: contain;
+	pointer-events: none;
+}
+
+.filter-select-wrapper label {
+	font-size: 11px;
+	font-weight: 500;
+	color: var(--color-text-secondary);
+	pointer-events: none;
+	text-transform: capitalize;
+}
+
+.filter-select-wrapper select {
+	appearance: none;
+	-webkit-appearance: none;
+	border: none;
+	background: transparent;
+	font-size: var(--14px);
+	font-weight: 500;
+	padding: 0;
+	cursor: pointer;
+	width: 100%;
+	text-transform: capitalize;
+}
+
+.filter-select-wrapper select:focus {
+	outline: none;
+}
+
+.filter-compare-footer {
+	position: sticky;
+	bottom: 0;
+	background: var(--color-white);
+	display: flex;
+	justify-content: flex-end;
+	margin-top: 0.5rem;
+	align-items: center;
+	z-index: var(--z-top);
+	padding: 1rem 0;
+	border-top: 1px solid var(--color-border);
+}
+
+.filter-compare-footer button {
+	padding: 0.5rem 1rem;
+	font-size: var(--14px);
+}
+
+.button-reset-groups {
+	border: none;
+	background: none;
+	color: var(--color-text-secondary);
+	cursor: pointer;
+	text-decoration: underline;
+}
+
+.button-reset-groups:hover {
+	background: none;
+	color: var(--color-text);
+}
+
+.button-apply-groups {
+	background: var(--color-badge-bg-dark);
+	color: var(--color-badge-text-dark);
+}
+
+.button-apply-groups:hover {
+	background: var(--color-blue-medium);
+	color: var(--color-badge-text-dark);
+}
+
+.button-add-group {
+	border: 1px dashed var(--color-border);
+	padding: 0.75rem;
+	font-size: var(--14px);
+	text-align: center;
+	cursor: pointer;
+	width: 100%;
+}
+
+.button-add-group:hover {
+	background: var(--color-bg);
+}
+
+.button-delete-group {
+	border: none;
+	background: none;
+	color: var(--color-text-secondary);
+	cursor: pointer;
+	padding: 0.25rem;
+	display: flex;
+	align-items: center;
+}
+
+.button-delete-group:hover {
+	background: none;
+	color: var(--color-text);
+}
+
+
+/* share modal */
+#share {
+	display: none;
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	justify-content: center;
+	align-items: center;
+	z-index: var(--z-overlay);
+}
+
+#share.is-open {
+	display: flex;
+}
+
+.share-bg {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: rgba(0, 0, 0, 0.5);
+}
+
+.share-content {
+	position: relative;
+	background: var(--color-card-bg);
+	border-radius: calc(var(--border-radius) * 0.5);
+	padding: 1rem 1.5rem;
+	width: 90%;
+	max-height: 80%;
+	overflow: hidden;
+	max-width: 480px;
+	z-index: var(--z-top);
+}
+
+.share-title {
+	font-size: var(--24px);
+	line-height: 1.2;
+	margin: 0;
+	margin-bottom: 1rem;
+}
+
+.share-description {
+	font-size: var(--14px);
+	color: var(--color-text-medium);
+	margin: 0;
+}
+
+.share-url {
+	margin-top: 1rem;
+	position: relative;
+	border-radius: calc(var(--border-radius) * 0.25);
+	border: 1px solid var(--color-border);
+	padding: 0.5rem;
+}
+
+.share-url .button-copy {
+	position: absolute;
+	top: 50%;
+	inset-inline-end: 0.5rem;
+	transform: translateY(-50%);
+	width: 2rem;
+	height: 2rem;
+	cursor: pointer;
+	padding: 0.375rem;
+}
+
+.share-url .button-copy:before { 
+	content: attr(data-copied);
+	position: absolute;
+	top: 50%;
+	inset-inline-end: 0;
+	transform: translateY(-50%);
+	background: var(--color-badge-bg-light);
+	color: var(--color-badge-text-light);
+	font-size: var(--12px);
+	padding: 0.5rem;
+	border-radius: calc(var(--border-radius) * 0.5);
+	opacity: 0;
+	transition: opacity 0.125s ease;
+}
+
+.share-url .button-copy.is-copied:before {
+	opacity: 1;
+}
+
+/* .share-url .button-copy:hover {
+	background: none;
+} */
+
+.share-url .button-copy img, .share-url .button-copy svg {
+	width: 100%;
+}
+
+.share-url input {
+	width: calc(100% - 2.25rem);
+	border: none;
+	background: none;
+	font-size: var(--14px);
+	color: var(--color-text-medium);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	direction: ltr;
+	text-align: left;
+}
+
+.share-close {
+	text-align: end;
+}
+
+.button-close-share {
+	border: none;
+	background: none;
+	color: var(--color-button-text-alt);
+	cursor: pointer;
+	display: inline-block;
+	padding: 0;
+	margin-top: 2rem;
+}
+
+.button-close-share:hover {
+	color: var(--color-badge-text-light);
+	background: none;
+}
+
+/* predicted agreement */
+.predicted-table {
+	width: 100%;
+}
+#predicted-agreement tbody td {
+	border-top: 1px solid var(--color-border);
+	padding: 1rem 0;
+}
+
+#predicted-agreement th {
+	font-weight: 700;
+	font-size: var(--12px);
+	padding-bottom: 0.5rem;
+}
+
+#predicted-agreement th:first-of-type, #predicted-agreement td:first-of-type {
+	text-align: start;
+}
+
+#predicted-agreement th:last-of-type, #predicted-agreement td:last-of-type {
+	text-align: end;
+	min-width: 10rem;
+}
+
+#predicted-agreement td:first-of-type {
+	font-size: var(--18px);
+}
+
+#predicted-agreement td:last-of-type {
+	font-size: var(--24px);
+}
+
+
+
+
+
+.tippy-box[data-theme~=light]{color:#26323d;box-shadow:0 0 20px 4px rgba(154,161,177,.15),0 4px 80px -8px rgba(36,40,47,.25),0 4px 4px -2px rgba(91,94,105,.15);background-color:#fff}.tippy-box[data-theme~=light][data-placement^=top]>.tippy-arrow:before{border-top-color:#fff}.tippy-box[data-theme~=light][data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:#fff}.tippy-box[data-theme~=light][data-placement^=left]>.tippy-arrow:before{border-left-color:#fff}.tippy-box[data-theme~=light][data-placement^=right]>.tippy-arrow:before{border-right-color:#fff}.tippy-box[data-theme~=light]>.tippy-backdrop{background-color:#fff}.tippy-box[data-theme~=light]>.tippy-svg-arrow{fill:#fff}
+
+.tippy-content {
+	padding: 0.75rem 1rem;
+}
+
+.tippy-content .topic-text {
+	font-size: var(--12px);
+	margin-bottom: 0.75rem;
+	color: var(--color-text-light);
+}
+
+.tippy-content .quote-count {
+	font-weight: 700;
+	font-size: var(--12px);
+	margin-bottom: 0.125rem;
+	color: var(--color-text);
+}
+
+.tippy-content .opinion-text {
+	color: var(--color-text);
+	font-size: var(--12px);
+}
+
+
+.tippy-content .topic-group-item {
+	margin: 0.25rem 0;
+	color: var(--color-text-medium);
+	font-size: var(--12px);
+	font-weight: 500;
+	text-transform: capitalize;
+}
+
+.tippy-content .topic-group-label {
+	color: var(--text-color);
+	font-size: var(--12px);
+	font-weight: 700;
+	text-transform: capitalize;
+}
+
+.tippy-content .topic-group-description {
+	color: var(--color-text-medium);
+	font-size: var(--12px);
+	font-weight: 500;
+	text-transform: capitalize;
+}
+
+.tippy-content .low-sample {
+	font-size: var(--12px);
+	font-weight: 500;
+	color: #B3261E;
+}
+
+.print-only {
+	display: none;
+}
+
+.opinion-list-container {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+}
+
+.opinion-row .opinion-label {
+	font-size: var(--12px);
+	line-height: 1.2;
+	margin-bottom: 4px;
+}
+
+.opinion-bar-wrapper {
+	flex: 1;
+}
+
+.opinion-legend {
+	display: flex;
+	flex-wrap: wrap;
+	margin-bottom: 0.5rem;
+}
+
+.legend-item {
+	display: flex;
+	align-items: center;
+	margin-inline-end: 0.5rem;
+	margin-bottom: 0.25rem;
+}
+
+.legend-color {
+	display: inline-block;
+	width: 0.75rem;
+	height: 0.75rem;
+	border-radius: 0.25rem;
+	margin-inline-end: 0.25rem;
+}
+
+.legend-text {
+	font-size: var(--12px);
+	text-transform: capitalize;
+}
+
+
+.sr-only {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	clip-path: inset(50%);
+	white-space: nowrap;
+}
+
+@media screen and (max-width: 1024px) {
+	#content {
+		margin-inline-start: auto;
+		margin-inline-end: auto;
+		padding: 2rem 0.5rem;
+		width: 100%;
+		max-width: 960px;
+	}
+
+	.sidebar {
+		pointer-events: none;
+		transform: translate(-100%, 0);
+		position: fixed;
+		top: var(--header-height);
+		inset-inline-start: 0;
+		left: auto;
+		right: auto;
+		transition: all 0.25s ease;
+		background: var(--color-bg);
+	}
+
+	[dir="rtl"] .sidebar {
+		transform: translate(100%, 0);
+	}
+
+	.sidebar.is-open,
+	[dir="rtl"] .sidebar.is-open {
+		pointer-events: auto;
+		transform: translate(0, 0);
+	}
+
+	body > header button {
+		display: block;
+	}
+}
+
+@media screen and (max-width: 800px) {
+	article {
+		/* padding: 1rem; */
+	}
+
+	.summary-stats {
+		flex-wrap: wrap;
+	}
+
+	.topic-overview {
+		flex-direction: column;
+	}
+
+	.topic-overview-summary {
+		order: 4;
+		width: 100%;
+		padding-inline-end: 0;
+	}
+
+	.topic-overview-chart {
+		order: 3;
+		margin: 1rem 0 2rem 0;
+	}
+
+	.topic-opinion-sample ul {
+		display: grid;
+		grid-template-columns: repeat(1, 1fr);
+	}
+
+	.summary-stats {
+		flex-direction: column;
+	}
+
+	.summary-stats li {
+		padding: 0.5rem 0;
+	}
+
+	.topic-overview-info-stats div {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	.topic-opinion summary {
+		font-size: var(--16px);
+	}
+
+	.drawer-content {
+		border-radius: 0;
+	}
+}
+
+@media screen and (max-width: 540px) {
+	.demographic-chart .demographic-wrapper {
+		width: calc(100% - 1rem);
+	}
+
+	#conversation-overview .toggle-container {
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 0.5rem;
+	}
+}