#chatInterrogator {
	app-root {
		display: grid;
		grid-template-columns: 200px 1fr;
		height: 100%;
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
	}

	app-sidebar {
		display: grid;
		grid-template-rows: auto 1fr auto;
		overflow: hidden;
		justify-content: end;
		background-image: linear-gradient(to left, rgba(0, 0, 0, .15) 0px, rgba(0, 0, 0, .05) 1px, transparent 2px), linear-gradient(#f6f6f6, #f6f6f6);
	}

	app-sidebar > * {
		width: 200px;
	}

	app-sidebar-head {
		padding: 10px;
		box-sizing: border-box;
		display: flex;
		grid-template-columns: 1fr auto;
		flex-direction: column;
		row-gap: 10px;
		height: fit-content;
		position: relative;    /* padding-bottom: 0px; */
		box-shadow: 0px -1.5px 3.25px 1px rgba(0, 0, 0, .4);
		z-index: 2;
	}

	app-sidebar-head icons- {
		display: flex;
		justify-content: end;
		column-gap: 5px;
		justify-content: center;
	}

	app-sidebar-head icon- {
		padding: 0px !important;
		height: 20px;
		border-radius: 4px;
		background: none !important;
	}

	app-sidebar-head icon-[name="Information"] {
	}

	app-sidebar-head icon-[name="New"] {
	}

	app-sidebar-head icon-:not(:hover) {
		opacity: .33;
	}

	#goback {
		background-image: url(../src/logo-calabrio-light.png);
		background-size: auto 20px;
		background-repeat: no-repeat;
		background-position: 2px center;
		display: flex;
		height: 30px;
		width: calc(100% - 30px);
		box-sizing: border-box;
		border-radius: 4px;
		align-items: center;
		transition: translate .25s linear;
	}

	#goback:before {
		content: "􀯶";
		font-family: 'SF-Pro';
		font-weight: 500;
		color: rgba(0, 0, 0, 0.2);
		display: block;
		translate: -15px 0px;
		font-size: 14px;
		opacity: 0;
		transition: translate .25s linear, opacity .25s linear;
	}

	#goback:hover:before {
		opacity: 1;
	}

	#goback:hover {
		translate: 10px 0px;
	}

	app-sidebar-body {
		display: block;
		overflow: scroll;
	}

	app-sidebar-body {
		scrollbar-width: none; /* Firefox */
		-ms-overflow-style: none;  /* Internet Explorer 10+ */
	}

	app-sidebar-body::-webkit-scrollbar {

		/* WebKit */
		width: 0;
		height: 0;
	}

	app-sidebar-body sidebar {
		height: 100%;
		min-width: 50px;
	}

	app-sidebar-body sidebar {
		width: 100% !important;
	}

	app-sidebar-foot {
		display: flex;
		padding: 10px 10px;
		box-sizing: border-box;
		border-top: var(--edge);
		flex-direction: row;
		align-items: center;
		row-gap: 5px;
		justify-content: space-between;
	}

	app-main {
		display: grid;
		grid-template-rows: min-content 1fr 0px;
		overflow: hidden;
		position: relative;
	}

	app-sidebar-foot:before {
		content: 'Daily AI Usage Remaining';
		font-size: 12px;
		opacity: .5;
		font-weight: 500;
		letter-spacing: .1px;
		text-rendering: geometricPrecision;
		display: none;
	}

	app-main-head, app-head {
		display: grid;
		grid-auto-flow: column;
		padding: 20px 20px;
		position: relative;
		box-sizing: border-box;
		z-index: 999999;
		box-shadow: 0px -1.5px 3.25px 1px rgba(0, 0, 0, .4);
		align-items: center;
		justify-content: space-between;
		column-gap: 10px;
	}

	#pagePrompt app-main-head {

		/* min-height: 90px; */
	}

	#pagePrompt app-main-head app-title {
		translate: 0px 8px;
	}

	app-body, app-main-body {
		display: block;
		overflow: auto;
	}

	app-main-foot {
	}

	app-main-head path {
		font-size: 10px;
		display: flex;
		font-weight: 400;
		column-gap: 2px;
		opacity: .35;
		translate: 0px -2px;
		letter-spacing: .33px;    /*height: 0px;*/
		align-items: center;
		cursor: default;
		position: absolute;
		top: 10px;
		left: 20px;
	}

	app-main-head path sy {
		font-family: 'SF-Pro';
		font-size: 7px;
		font-weight: 600;
	}

	app-title {
		font-size: 30px;
		display: flex;
		align-items: center;
		border-radius: 3px;
		min-height: 35px;
	}

	app-main-head app-title:empty:before {
		content: "Name of prompt";
		opacity: .2;
	}

	app-main-head select {

		/*position: absolute;*/

		/*right: 20px;*/

		/*bottom: 20px;*/

		/* margin-top: 35px; */

		/* translate: 0px -50%; */
	}

	app-main-head app-title:hover:after {
		content: "􀈊";
		font-family: 'SF-Pro';
		opacity: .2;
		margin-left: 10px;
	}

	app-main-head app-title:focus-within {
		outline: var(--focus-outline);
		outline-offset: 4px;
	}

	app-section {

		/* display: block; */

		/* padding: 13px 20px; */
		display: grid;
		grid-template-rows: auto 1fr;
	}

	app-section + app-section {
		box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, .05);
	}

	#sectionPrompt app-section-item {
		display: flex;
		flex-direction: column;
		row-gap: 10px;
		position: relative;
		padding: 15px 0px;
	}

	#sectionPrompt app-section-item:has([disabled]):hover:before {
		content: "􀎡";
		position: absolute;
		left: 0px;
		translate: -14px 6px;
		font-family: 'SF-Pro';
		font-size: 10px;
		opacity: .5;
	}

	#sectionPrompt app-section-item + app-section-item {

		/* margin-top: 25px; */
		border-top: var(--edge);
	}

	#sectionPrompt app-section-item-title {
		font-size: 16px;
		font-weight: 500;
		display: flex;
		align-items: center;
	}

	#sectionPrompt app-section-head {

		/* justify-content: space-between; */
	}

	#sectionJobs app-section-item-title {
		column-gap: 10px;
		display: inline;
		margin-right: auto;
	}

	#sectionJobs app-section-item-title button {
		white-space: nowrap;
	}

	#sectionPrompt textarea {
		border: none;
		padding: 0px;
		font-size: 15px;
		font-weight: 300;
		opacity: .70;
		border-radius: .1px;
		outline-offset: 4px;
		text-rendering: geometricPrecision;
		line-height: 1.25em;
		field-sizing: content;
		max-height: 150px;
	}

	#sectionPrompt textarea[mandatory] {
		outline: 2px solid red;
	}

	#sectionPrompt app-section-item[role='options'][type='freeform']:after, #sectionPrompt textarea::placeholder {
		color: black;
		opacity: .33;
	}

	#sectionJobs app-section-item-title select-wrap {

		/*margin-left: auto;*/

		/* margin-right: 10px; */
		min-width: 300px;
		position: relative;
	}

	#sectionJobs app-section-item-title select-wrap select {
		width: 100%;
	}

	table.mac {
		font-size: 11px;
		letter-spacing: 0.5px;
		outline: var(--edge);
		width: 100%;
		box-sizing: border-box;
		background: white;
		border-collapse: collapse;
		position: relative;
		user-select: text !important;
		border-radius: 6px;
		outline-offset: -1px;
		contain: paint;
	}

	table.mac:is(td, th) {
		padding: 3px 8px;
		box-sizing: border-box;
		letter-spacing: .5px;
		cursor: default;
	}

	table.mac:is(th, tr.header > td) {
		font-weight: normal;
		border-bottom: var(--edge);
		text-transform: capitalize;
		padding: 5px 8px;
	}

	table.mac tr.header > td + td, table.mac th + th {
		box-shadow: -5.5px 0px 0px -5px rgba(0, 0, 0, 0.2);
	}

	table.mac[banding] tr:not(.header):nth-child(2n) {
		background: var(--tint-gray);
	}

	table.mac[border-verticals] tr:not(.header) td:has(+ td) {
		box-shadow: inset -.5px 0px 0px 0px rgba(0, 0, 0, .2);
	}

	table.mac[border-horizontals] tr:has(+ tr) {
		box-shadow: inset 0px -.5px 0px 0px rgba(0, 0, 0, .2);
	}

	table.mac tr:first-of-type {
	}

	table.mac td.header {
		font-weight: 500;
		text-align: right;
		background: #eee;
		text-transform: capitalize;
	}

	table.mac tbody {

		/* overflow: scroll; */
	}

	table.mac tr.header {

		/* border-bottom: var(--edge); */
	}

	table.mac tbody:after {
		content: 'No Results';
		display: block;
		position: relative;
		text-align: center;
		padding: 3px 0px;
		opacity: .25;
	}

	table.mac:has(tr:not(.header)) tbody:after {
		display: none;
	}

	table.mac tr.header td.header {
		background: white;
	}

	table.mac tr.header td {
		font-weight: 500;
		text-align: center !important;
		white-space: pre-line;
	}

	table.mac td.tight, table.jobResults > tbody > tr > td:first-of-type {
		min-width: fit-content;
		width: 0px;
		white-space: nowrap;
	}

	table.mac tr.header td[colspan] {

		/* border-bottom: none; */
	}

	table.jobResults td {
		text-align: center;
	}

	table.jobResults2 tr:not(:is(.header, .nested)):hover {
		background-color: rgb(0 100 225);
	}

	table.jobResults2 tr:not(:is(.header, .nested)):hover td {
		color: white;
	}

	table.jobResults2 tr:not(:is(.header, .nested)) td:not([colspan]):hover:after {
		content: "􀅴";
		content: "􀆊";
		font-family: 'SF-Pro';
		font-size: 12px;
		font-weight: 300;
		text-indent: 4px;
		opacity: .5;
		display: inline-block;
		box-sizing: border-box;
		width: 0px;
	}

	#promptMetrics {
		table-layout: fixed;
	}

	#promptMetrics td {
		text-align: right;
	}

	#promptMetrics td[colSpan="4"] {
		text-align: center;
	}

	tr.nested {
		box-shadow: inset 0px 1px 3.5px -1px rgba(0, 0, 0, .25);
		background: #ddd;
	}

	tr.divider-top, tr:has(>td[colSpan="4"]) {
		border-top: 3px solid rgba(0, 0, 0, 0.05);
	}

	tr.divider-top + tr.divider-top {
		border-top: none;
	}

	tr.nested table {
		z-index: 0;
		border-radius: 0px 0px 10px 10px;
		contain: paint;
	}

	tr.nested table tr:not(.header) td {
		text-align: left;
		white-space: pre-wrap;
		vertical-align: top;
	}

	tr.nested table:before {
		content: "^";
		display: none;
	}

	tr.nested > td {
		padding: 5px !important;
	}

	#sectionPrompt {
		overflow: hidden;
	}

	#sectionPrompt app-section-body {
		padding: 0px 20px;
		display: flex;
		flex-direction: column;    /* row-gap: 30px; */
		overflow: scroll;
	}

	#sectionJobs {
		display: grid;
		flex-direction: column;
		border-left: var(--edge);
		--color: black;
		--bg_color: gray;
	}

	#sectionJobs slide-list-item {
		display: flex;
		flex-direction: column;
		padding: 16px 20px;
		row-gap: 7px;
		padding-right: 40px;
		--t_color: gray;
	}

	#sectionJobs slide-list-item[today]:has(+:not([today])) {
		border-bottom: .5px solid rgba(0, 0, 0, 0.1);
	}

	#sectionJobs [today] + slide-list-item:not([today]), #sectionJobs slide-list-item[today]:first-of-type {
		margin-top: 40px;
		contain: none;
	}

	#sectionJobs [today] + slide-list-item:not([today]):after, #sectionJobs slide-list-item[today]:first-of-type:after {
		content: 'Today';
		display: block;
		position: absolute;
		top: -10px;
		font-size: 14px;
		font-weight: 600;
		translate: 0px -100%;
		color: black;
	}

	#sectionJobs [today] + slide-list-item:not([today]):after {
		content: 'Yesterday & Older';
	}

	#sectionJobs slide-list-item:is(:focus, :focus-within) {

		/* background: rgba(0,0,0,.05); */

		/* color: inherit; */

		/* outline: inherit; */
		--t_color: white;
	}

	#sectionJobs slide-list-item:before {
		right: 10px;
	}

	#sectionJobs slide-list-item text {
		font-size: 15px;
		font-weight: 400;
		letter-spacing: .2px;
		text-align: justify;
		display: flex;
		align-items: end;
		justify-content: space-between;
		color: var(--t_color);
	}

	#sectionJobs slide-list-item subtext {
		font-size: 12px;
		color: var(--t_color);
		letter-spacing: .02em;
		white-space: pre;
		margin-top: -4px;    /* text-align: right; */
		white-space: break-spaces;
	}

	#sectionJobs app-section-item-head {
		display: flex;
		justify-content: center;
	}

	#sectionJobs app-section-item-body {
		display: flex;    /* flex-direction: column; */

		/* row-gap: 10px; */

		/* margin-top: 10px; */
		flex-direction: column;
		text-rendering: geometricPrecision;
		gap: 10px;
	}

	#sectionJobs slide-list-item text:after {
		content: attr(percent);
		font-size: 20px;
		font-weight: 600;
		color: var(--color);
	}

	#sectionJobs progress:not([torus])::-webkit-progress-value {
		background: var(--color);
	}

	app-section-item-body > error, .conv_missing {
		--label: 'From Process';
		background: #ff000010;
		color: darkred;
	}

	app-section-item-body > message {
		background: #00000010;
		color: darkgray;
	}

	app-section-item-body:is(error, message) {
		padding: 5px 10px;
		outline: var(--edge);
		border-radius: 5px;
	}

	app-section-item-body:is(error, message):before {
		content: var(--label) ":";
		font-weight: bold;
		display: inline-block;
		margin-right: 10px;
	}

	.conv_missing:before {
		content: "Some conversations were not found:";
	}

	#sectionJobs2 app-section-item-body:not(:has(table)):not(:empty) {
		justify-content: center;
		color: rgba(0, 0, 0, .5);
		font-weight: 300;
		letter-spacing: .5px;
		background-color: #eee;
		padding: 5px 10px;
		border-radius: 6px;
		align-self: center;
		white-space: nowrap;
	}

	#promptJobsToggle {

		/* width: 300px; */
		align-self: center;
	}

	#promptStatus {
		text-transform: uppercase;
		font-weight: 500;
		text-align: center;
		padding-top: 2px;
		color: var(--color);
		outline: 1px solid var(--color);
		font-size: inherit;
		padding: 0px !important;
		margin: 0px -30px;
		outline: none;
		box-shadow: none;
		padding: 0px 25px !important;
		background: none;
		height: 20px;
		translate: 0px -2px;
		field-sizing: content;
	}

	app-info:has(#promptStatus[value='A']) {
		--color: limegreen;
		--bg_color: rgb(50 205 50 / 10%);
	}

	app-info:has(#promptStatus[value='D']) {
		--color: deepskyblue;
		--bg_color: rgb(0 191 255 / 10%);
	}

	app-info:has(#promptStatus[value='X']) {
		--color: red;
		--bg_color: rgb(255 0 0 / 10%);
	}

	#popoutNewItem {
		height: fit-content;
		padding: 5px;
		width: fit-content;

		hr {
			all: unset;
			display: block;
			border-top: var(--edge);
			margin: 5px 5px;
		}

	}

	#popoutNewItem span {
		display: block;
		cursor: default;
		width: 100%;
		padding: 5px 10px;
		box-sizing: border-box;
		border-radius: 6px;
		max-width: 200px;
	}

	#popoutNewItem span[disabled] {
		pointer-events: none;
		opacity: .2;
	}

	#popoutNewItem span:hover {
		background: rgb(0 100 225);
		color: white;
	}

	#dialogJobNew p {
		margin: 0px;
		text-wrap: balance;
	}

	#dialogJobNew dialog-body {
		position: relative;
	}

	#dialogJobNew wrap {
		display: grid;    /* flex-direction: column; */

		/* flex: 1 1 0; */
		row-gap: 10px;
		width: 100%;
		height: 100%;
		position: absolute;
		grid-template-rows: 1fr auto auto;
	}

	#dialogJobNew {
		width: 400px;
		height: 400px;
	}

	#dialogJobNew[message]:after {
		translate: 0px 7px;
	}

	#dialogJobNew[message="sending"]:after {
		content: 'Sending...';
	}

	#dialogJobNew[message="sent"]:after {
		content: 'Successfully sent';
	}

	#dialogJobNew[message="error"]:after {
		content: 'Error sending';
		color: red;
	}

	#dialogJobNew wrap input {
		margin-top: 10px;
	}

	#dialogJobNew wrap textarea {
		width: 100%;
		border-radius: 4px;
		display: block;
		text-align: left;
		resize: both;
		field-sizing: content;
		white-space: pre-wrap;
		font-size: 14px;
		text-rendering: geometricPrecision;
		font-weight: 300;
		line-height: 135%;
		word-break: break-word;
		overflow: auto;
		font-family: monospace;
	}

	#dialogJobNew wrap textarea:placeholder-shown {
		font-family: inherit;
	}

	#dialogJobNew[message]:after, form-body:after {
		display: block;
		text-align: center;
		font-size: 12px;
		letter-spacing: .25px;
		font-weight: 600;
	}

	app-sidebar-body sidebar {
		--empty_text: 'Click the 􀈎 icon to create a section first, then a prompt'
	}

	app-main-body {
		--empty_text: 'Create or select a prompt to edit it'
	}

	app-main-head:empty {
		min-height: 0px;
		max-height: 0px;
		height: 0px;
		padding: 0px;
		opacity: 0;
	}

	#popoutNewSections {
		max-height: 305px;
		overflow: scroll;
		display: block;
		min-width: 100px;
	}

	#popoutNewSections:before {
		content: 'Choose a section';
		font-size: 12px;
		padding: 5px 10px;
		text-align: center;
		display: block;
		opacity: .5;
		letter-spacing: .3px;
	}

	#selectTranscript {
		width: 100%;
		display: grid;
	}

	#selectTranscript:before {
		content: attr(label);
	}

	#selectTranscript:has(:checked):before {
		display: none;
	}

	matrix {
		display: grid;    /* grid-template-columns: auto 1fr; */
		border: var(--edge);
		border-radius: 6px;
		font-size: 11px;
		letter-spacing: 0.5px;
		text-rendering: geometricPrecision;
		box-sizing: border-box;
	}

	matrix-row {
		display: grid;
		grid-template-columns: 150px 1fr;
		box-shadow: 0px .5px 0px 0px #00000010;
	}

	matrix-cell {
		white-space: pre-wrap;
		padding: 5px 10px;
		box-sizing: border-box;
		letter-spacing: .5px;
		cursor: default;
	}

	matrix-cell[header] {
		white-space: nowrap;
		font-weight: bold;
		text-align: right;
		background: rgba(0, 0, 0, .025);
	}

	button[chevron]:after {
		content: '􀆈';
		font-family: 'SF-Pro';
		font-size: 7.5px;
		font-weight: 900;
		width: 9px;
		display: inline-block;
		translate: 2px -0.5px;
		line-height: 0px;
	}

	#dialogJobCompare dialog-body {
		text-align: initial;
		height: fit-content;
		width: fit-content;
	}

	#dialogJobCompare {
		width: fit-content;
	}

	#dialogJobCompare checklist-section-header {
		white-space: nowrap;
		display: none;
	}

	#dialogJobCompare wrap {
		display: grid;
		row-gap: 10px;
	}

	#dialogJobCompare checklist-item {
		white-space: nowrap;
	}

	#dialogJobCompare wrap:before {
		content: 'Select 2 completed AI responses to compare their answers.';
		display: block;
		text-align: center;
	}

	#dialogJobCompare checklist {
		outline: var(--edge);
		border-radius: 5px;
		letter-spacing: initial;
		text-rendering: geometricPrecision;
		max-height: 200px;
	}

	#dialogJobCompare checklist-section-body {
		padding: 4px 0px;
	}

	select-wrap > select {
		width: 100%;
	}

	#dialogJobCompare select-wrap {
		width: 100%;
		display: block;
	}

	td.prewrap {
		white-space: pre-wrap;
	}

	td.text_center {
		text-align: center;
	}

	#sectionJobs app-section-item-head:empty {
		display: none !important;
	}

	app-section-item-body:has(#promptJobCompareTable):before {
		content: 'Job Comparison';
		text-align: center;
		font-weight: 600;
		background: #eee;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 30px;
		padding-bottom: 10px;
		margin-bottom: -10px;
		border-radius: 6px;
		font-size: 14px;
		letter-spacing: 0.5px;
		outline: var(--edge);
	}

	.edge_left {
		border-left: var(--edge);
	}

	transcript-box {
		display: block;
		overflow: auto;
		background: white;
		box-sizing: border-box;
		position: relative;
		min-width: 25em;
		height: 100%;
		text-rendering: geometricPrecision;
		letter-spacing: .1px;
		box-sizing: border-box;
		margin: 1px;
		margin-left: -1px;
	}

	transcript-wrap {
		padding: 10px;
		display: flex;
		flex-direction: column;
	}

	transcript-entry {
		display: block;
		box-sizing: border-box;
		padding: 6px 9px;
		font-size: 13px;
		display: block;
		background: rgb(233 233 235);
		border-radius: 13.5px;
		white-space: pre-wrap;
		line-height: 15.75px;
		position: relative;
		z-index: 2;
		max-width: fit-content;
		word-wrap: break-word;
	}

	transcript-entry + transcript-entry {
		margin-top: 3px;
	}

	transcript-entry[who="U"] {
		align-self: flex-end;
		background: rgb(54 122 246);
		color: white;
		width: fit-content;
		margin-left: 3em;
		text-rendering: auto;
	}

	transcript-entry[who="A"] {
		margin-right: 25%;
	}

	td:has(> transcript-box) {
		padding: 0px !important;
	}

	transcript-entry:before {
		content: '';
		position: absolute;
		z-index: -1;
		background-color: rgb(233 233 235);
		height: 13px;
		width: 12px;
		clip-path: polygon(2.4px 13px, 4.56px 11.4px, 5.88px 9.9px, 6.6px 8.4px, 7px 7px, 7px 0px, 11px 0px, 12px 10px, 10.44px 11px, 8.76px 12px, 6.72px 12.7px, 4.56px 13px);
		bottom: 0px;
		left: -7px;
		overflow: hidden;
	}

	transcript-entry[who="U"]:before {
		left: unset;
		scale: -1 1;
		background: rgb(54 122 246);
		right: -7px;
	}

	:is(table.extras, #promptJobCompareTable) tr + tr {
		border-top: var(--edge);
	}

	#promptJobCompareTable td {
		vertical-align: top;
	}

	td-contents {
		display: block;
		overflow: auto;
		max-height: 400px;
	}

	#promptJobCompareTable transcript-box > td-contents {
		text-align: center;
		display: block;
		background: #eee;
		padding: 5px 0px;
		font-weight: 500;
		color: #777;
		font-size: 11px;
		position: sticky;
		top: 0px;
		z-index: 6;
		outline: var(--edge);
		user-select: all;
	}

	#promptJobCompareTable td em {
		font-weight: bold;
	}

	#deleteTranscript {
		color: red;
	}

	#dialogJobNew buttons {
		display: flex;
		justify-content: space-between;
	}

	#sectionJobsLimitsTracker {
		white-space: nowrap;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: .02em;
		color: white;
		text-shadow: 0px 1px 5px rgba(0, 0, 0, .33);
		height: 30px;
		display: flex;
		width: 100%;
		flex-direction: row;
		gap: 5px;
		position: relative;
		align-items: center;
		justify-content: center;
		border: var(--edge);
		padding: 0px 6px;
		box-sizing: border-box;
		border-radius: 5px;
		--percentage: 0;
		background: linear-gradient(to right, var(--color) var(--percentage), #ccc var(--percentage), #ccc);
	}

	#sectionJobsLimitsTracker[percentage="..."] {
		background: gray;
	}

	#sectionJobsLimitsTracker:before {
		content: "AI Usage Remaining: "attr(percentage);
	}

	#sectionJobsLimitsTracker[quarter='2'] {
		--col: hsl(50 100% 95% / 1);
	}

	#sectionJobsLimitsTracker[quarter='1'] {
		--col: hsl(0 100% 95% / 1);
	}

	#sectionJobsLimitsTracker[quarter='0'] {
		color: red;
		border-color: red !important;
	}

	#sectionJobsLimitsTracker:empty {

		/* display: none; */
	}

	#sectionJobs #jobNew[exceeded] {
		color: red;
	}

	td-contents.jobCompare {
		padding: 1px;
	}

	td-contents.jobCompare > details {
		margin-top: 20px;
	}

	td-contents.jobCompare > details > summary {
		font-weight: bolder;
		padding: 4px 0px;
	}

	td-contents.jobCompare > details > summary::marker {
	}

	td-contents.jobCompare td.header {
		font-weight: bold !important;
	}

	#dialogJobValidationImporter app-body controls:before {
		content: "Transcript:";
		font-weight: bold;
	}

	#dialogJobValidationImporter {
		width: 400px;
	}

	#dialogJobValidationImporter p {
		margin: 0px;
	}

	#dialogJobValidationImporter app-body {
		display: flex;
		font-size: 14px;
		text-rendering: geometricPrecision;
		text-align: left;
		letter-spacing: 0.5px;
		flex-direction: column;
		gap: 10px;
		overflow: visible;
	}

	#dialogJobValidationImporter app-body code {
		display: block;
		font-size: 12px;
		padding: 10px;
		outline: var(--edge);
		border-radius: 5px;
		background: white;
		margin: 10px 0px;
		white-space: pre-line;
	}

	#dialogJobValidationImporter app-body controls {
		display: flex;
		grid-template-columns: auto auto;
		grid-template-rows: auto auto;
		gap: 10px;
		margin: 0px -18px;
		padding: 10px 18px;
		background: rgba(0, 0, 0, .05);
		flex-wrap: wrap;
		box-shadow: inset 0px 2px 2px -1.5px rgba(0, 0, 0, .15);
	}

	#dialogJobValidationImporter app-body table.mac {
		margin: 10px 0px;
	}

	#dialogJobValidationImporter app-body controls select-wrap {
		width: calc(100% - 90px);
		margin-left: auto;
	}

	#dialogJobValidationImporter app-body controls button {
		margin-left: auto;
	}

	#uploadConfirmation {
		max-width: 235px;
		font-size: 90%;
		align-content: center;
	}

	#dialogJobValidationImporter table.mac td {
		text-align: center;
	}

	button[danger] {
		color: hsl(6 100% 58% / 1) !important;
	}

	/**/
	#jobsAnswersTable[optionstype='choices'] {
		grid-template-columns: minmax(25em, 1fr) 1fr 1fr auto;
	}

	#jobsAnswersTable[optionstype='freeform'] {
		grid-template-columns: minmax(25em, 1fr) 1fr;
	}

	input-label {
		display: flex;
		gap: 5px;
		align-items: center;
	}

	textarea-label:before, input-label:after {
		content: attr(label);
		font-size: 14px;
		display: inline-block;
		translate: 0px -0.5px;
	}

	#jobAnswers {
		display: grid;
		gap: 10px;
		interpolate-size: allow-keywords;
		position: relative;
		padding-top: 4px;
	}

	#jobAnswers > span {
		white-space: pre-line;
		background: white;
		border-radius: 14px;
		height: 25px;
		width: 25px;
		letter-spacing: .05px;
		overflow: hidden;
		display: block;
		position: absolute;
		top: -4px;
		right: -4px;
		box-sizing: border-box;
		font-size: 0px;
	}

	#jobAnswers > span > icon- {
		display: none;
	}

	#jobAnswers > span:before {
		content: '􀅵';
		font-family: 'SF-PRO';
		display: block;
		font-size: 16px;
		opacity: .5;
		position: absolute;
		top: 4px;
		right: 4px;
	}

	#jobAnswers > span:hover {
		font-size: 14px;
		height: auto;
		width: 100%;
		padding: 20px;
		z-index: 9999999999999999;
		box-shadow: var(--menu_shadow);
	}

	#jobAnswers > input-label {
		margin-right: auto;
	}

	table-custom[optionstype="choices"] table-custom-row[disagreement] table-custom-cell[key="ccrId"] table-custom-cell-value {
		color: red;
		font-weight: bold;
	}

	table-custom[optionstype="choices"] table-custom-row[disagreement] {
		background: linear-gradient(to bottom, rgb(255 0 0 / 5%) 21px, transparent 21px);
	}

	table-custom[disagreements] table-custom-row:not([disagreement]) {
		display: none;
	}

	table-custom-cell[key="correct"] table-custom-cell-value {
		text-align: center;
		height: 100%;    /* align-content: center; */
	}

	app-infos {
		display: flex;
		gap: 10px;
		align-items: center;
		width: fit-content;
	}

	app-info {
		font-size: 20px !important;
		font-weight: 500;
		display: grid;
		text-align: center;
		grid-template-rows: 28px 0px;
		gap: 4px;
		align-items: center;
		height: 40px;
		padding: 2px 16px;
		border-radius: 7px;
		background: rgba(0, 0, 0, 0.05);
	}

	app-info[label]:after {
		content: attr(label);
		font-size: 10px;
		font-weight: 400;
		display: inline-flex;
		justify-self: center;
		letter-spacing: .3px;
	}

	[quarter='0'] {
		--color: gray;
		--bg_color: rgb(0 0 0 / 10%);
	}

	[quarter='1'] {
		--color: red;
		--bg_color: rgb(255 0 0 / 10%);
	}

	[quarter='2'] {
		--color: orange;
		--bg_color: rgb(255 165 0 / 10%);
	}

	[quarter='3'] {
		--color: gold;
		--bg_color: rgb(255 215 0 / 10%);
	}

	[quarter='4'] {
		--color: limegreen;
		--bg_color: rgb(50 205 50 / 10%);
	}

	app-info {
		color: var(--color);
		background-color: var(--bg_color);
		text-shadow: 0px 0px 5px white;
	}

	app-sidebar-head-items {
		display: flex;    /* gap: 5px; */
		flex-direction: column;
		text-rendering: geometricPrecision;
		border-radius: 6px;
		overflow: hidden;
	}

	app-sidebar-head-item {
		display: flex;
		font-size: 15px;
		padding: 0px 6px;
		height: 31px;
		min-height: 31px;
		align-items: center;
		padding-left: 34px;
		letter-spacing: .33px;
		word-spacing: .5px;
		padding-bottom: 1px;    /* border-radius: 6px; */
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		line-height: 31.5px;
		color: rgb(75 75 75);
		position: relative;
		font-weight: 500;
		cursor: pointer;
		background: rgba(0, 0, 0, .033);

		+ app-sidebar-head-item {

			/* border-top: var(--edge); */
			margin-top: 1px;
		}

	}

	app-sidebar-head-item[selected] {
		background: rgb(0 100 225);
		color: white;
	}

	#gotoMetrics:before {
		content: '􀐾';
	}

	#gotoTransc:before {
		content: '􀉁';
	}

	#gotoMetrics:before, #gotoTransc:before {
		font-family: 'SF-Pro';
		height: 100%;
		display: flex;
		width: 20px;
		position: absolute;
		left: 8px;
		text-indent: .5px;
		line-height: 33px;
		top: 0px;
		background-position: center center;
		background-size: contain;
		color: rgb(10 122 255);
		font-weight: 400;
		justify-content: center;
	}

	app-sidebar-head-item[selected]:before {
		color: white !important;
	}

	app-columns {
		display: grid;
		height: 100%;
		position: relative;
		width: 100%;
		overflow: hidden;
	}

	app-column {
		display: grid;
		overflow: hidden;
	}

	#pageTranscripts app-columns {
		grid-template-columns: auto auto 1fr;
	}

	#pageTranscripts app-column > gallery {
		position: relative;
		border-right: var(--edge);
	}

	convos {
		display: grid;
		grid-template-rows: auto 1fr auto;
		overflow: hidden;
	}

	convos-head {
		display: flex;
		column-gap: 10px;
		user-select: none;
		height: 28px;
		padding: 0px 16px;
		box-sizing: border-box;
		align-items: center;
	}

	convos-head {
		box-shadow: inset 0px -5px 1px -4.5px rgba(0, 0, 0, 0.2);
		justify-content: center;
	}

	convos-body {
		position: relative;
		overflow: hidden;
		display: block;
	}

	convos-foot {
		border-top: var(--edge);
		height: 45px;
		display: flex;
		flex-direction: row;
		box-sizing: border-box;
		padding: 0px 15.5px;
		align-items: center;
		user-select: none;
		background-color: white;
	}

	select-label[label]:before {
		content: attr(label);
		font-weight: 400;
		font-size: 13.33px;
		letter-spacing: 0.5px;
		text-rendering: auto;
	}

	convos-head select-label[label]:before, convos-head select {
		font-size: 12px;
		font-weight: 700;
		letter-spacing: .05em;
		color: rgba(0, 0, 0, .5);
		padding-left: .5em;
	}

	metric-cards {
	}

	metric-card {
	}

	metric-card-title {
	}

	metric-card-score {
	}

	metric-card progress {
	}

	metric-card-tags {
	}

	metric-card-tag {
	}

	#pageMetrics app-body {

		/*background: rgba(0,0,0,.1);*/
		padding: 20px;
		display: grid;
		grid-template-rows: auto 1fr;
		row-gap: 20px;
	}

	#pageMetrics app-body toggle {
		min-width: 300px;
		width: 33%;
		justify-self: center;
	}

	#metricsPrompts {
		display: grid;
		grid-template-rows: auto auto 1fr;
		row-gap: 20px;
		max-height: 100%;
		overflow: hidden;
	}

	metrics-card {
		display: block;
		padding: 20px;
		background: white;
		border-radius: 10px;
	}

	#pageMetrics app-slot {
		overflow: hidden;
		padding: 1px;
	}

	#pageMetrics metrics-card {
		outline: var(--edge);
	}

	#metricsPromptsTable {
		background: white;
		--table-custom-vertical-line: none;
		grid-template-columns: auto 1fr auto auto;
		overflow: scroll;
		max-height: fit-content;
	}

	#metricsPromptsTable table-custom-cell table-custom-cell-value {
		padding: 20px;
		text-align: center;
		font-size: 16px;
		min-height: 100%;
		align-content: center;
	}

	#metricsPromptsTable table-custom-cell-value[key="efficacy"] {
		font-size: 30px;
		color: var(--color);
		background-color: var(--bg_color);
	}

	#metricsPromptsTable table-custom-cell-value[key="efficacy"]:after {
		content: '%';
		font-size: 75%;
		height: 0px;
		display: inline-block;
		translate: 0px -4px;
	}

	#metricsPromptsTable table-custom-cell-value[key="prompt"] {
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		font-size: 20px;
	}

	#metricsPromptsTable table-custom-cell-value[key="validation"]:before {
		content: '􀁣';
		font-family: 'SF-Pro';
		font-weight: 900;
		color: limegreen;
	}

	#sectionJobs:is(matrix, table-custom, table.mac) {
		font-size: 12px !important;
	}

	info-table {
		display: grid;
		grid-template-columns: 1fr 1fr;    /* padding: 10px; */

		/* outline: var(--edge); */
		border-radius: 10px;
		gap: 20px;
		text-rendering: geometricPrecision;
	}

	info-table-title {
		display: flex;
		grid-column: 1 / 2;
		font-size: 30px;
		align-self: center;
		flex-direction: column;
		row-gap: 5px;    /* background: rgba(0,0,0,.02); */
	}

	info-table-title[label]:after {
		content: attr(label);
		font-size: 50%;
		opacity: .5;
	}

	info-table-media {
		display: flex;
		grid-column: 2 /3;
		justify-content: space-between;    /* padding: 0px 10px; */
		column-gap: 10px;
		margin-left: auto;
	}

	info-table-grid {
		display: grid;
		grid-column: 1 / -1;
		grid-template-columns: repeat(2, 1fr);
		border-top: var(--edge);    /* padding-top: 10px; */
		column-gap: 20px;
		border: var(--edge);
		border-radius: 5px;
		padding: 0px 10px;
		position: relative;
	}

	info-table-grid:empty:after {
		content: '...';
	}

	info-table-grid:before {
		content: '';
		position: absolute;
		width: 0px;
		display: block;
		border-right: var(--edge);
		height: calc(100% - 20px);
		left: 50%;
		top: 10px;
	}

	info-table-grid-item {
		font-size: 12px;
		display: inline-flex;
		padding: 7px 0px;
	}

	info-table-grid-item:has(+ * + *) {
		border-bottom: var(--edge);
	}

	info-table-media text[type=percentage] {
		font-size: 35px;
		letter-spacing: -1px;
		font-weight: 500;
		display: flex;    /* white-space: nowrap; */
		grid-template-rows: auto auto;
		text-align: center;    /* padding: 10px; */
		box-sizing: border-box;
		border-radius: 20px;    /* flex: 1 1; */
		color: var(--color);
		background-color: var(--bg_color);
		height: 90px;
		width: 100px;
		align-items: end;
		row-gap: 5px;    /* flex-direction: column; */
		align-items: center;
		justify-content: center;
		position: relative;
		padding-bottom: 20px;    /* box-shadow: inset 0px 0px 4px 0px black; */
	}

	info-table-media text:after {
		content: '%';    /* display: contents; */
		font-size: 20px;
		display: inline-block;
		translate: 0px -5px;
		width: 10px;
	}

	info-table-media text sup {

		/* display: contents; */
		font-size: 50%;
		display: none;
		width: 0px;
	}

	info-table-media text[label] {
	}

	text[label]:before {
		content: '× 'attr(label);
		font-size: 50%;
		align-self: start;
		width: 100%;
		display: flex;
		position: absolute;
		top: 0px;
		height: 100%;
		justify-content: center;
		align-items: end;
		padding: 10px;
		box-sizing: border-box;
		border-radius: 20px;
		border: 1px solid;
	}

	info-table-media text[label='0'] {

		/* opacity: .25; */
		--color: rgba(0, 0, 0, .1);
		--bg_color: rgba(0, 0, 0, .02);
	}

	#pageTranscripts app-column transcript-box {
		min-width: 200px;
	}

	[goto]:hover:after {
		content: '􀄯';
		display: inline-block;
		width: 0px;
		font-family: 'SF-Pro';
		font-variant-position: super;
		font-size: 10px;
		vertical-align: super;
		translate: 2px 2px;
		font-weight: 600;
		color: gray;
	}

	[goto] {

		/* cursor: alias; */
	}

	#pagePrompt app-main-body {
		display: grid;
		grid-template-columns: minmax(400px, 33%) 1fr;
	}

	app-section-head {
		height: 50px;
		display: flex;
		align-items: center;
		padding: 0px 20px;
		box-sizing: border-box;
		font-size: 16px;
		font-weight: 600;
		color: rgba(0, 0, 0, .5);
		letter-spacing: .1px;
		border-bottom: var(--edge);
		column-gap: 10px;
	}

	app-section-body {
		position: relative;
		display: block;
		flex: 1 1;
		overflow: hidden;
	}

	#sectionJobs app-section-body:empty:before {
		--empty_text: 'Loading history...';
	}

	#sectionJobs scrollbox-inner:empty:before {
		--empty_text: 'Prompt has not been sent to the AI yet. Responses will appear here after submission.';
	}

	#sectionJobs:is(app-section-body, scrollbox-inner):empty:before, :is(app-sidebar-body sidebar, app-main-body):empty:before {
		content: var(--empty_text);
		position: absolute;
		height: 100%;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0% 25%;
		box-sizing: border-box;
		text-align: center;
		opacity: .33;
		font-size: 20px;
		line-height: 125%;
		letter-spacing: .015em;
		text-wrap-style: balance;
		font-family: 'SF-Pro-Display', 'SF-Pro';
	}

	#sectionJobs slide-cover-body {

		/* padding: 20px; */

		/* background: #eee; */
	}

	#sectionJobs slide-cover-head {
		display: flex;
		justify-content: space-between;
		background: var(--bg_color);
	}

	#sectionJobs slide-cover-head percent {

		/* color: var(--bg_color); */
		color: var(--color);
		font-weight: 700;
		font-size: 20px;    /* background: var(--color); */
		padding: 4px 8px;
		border-radius: 5px;    /* text-shadow: 0px 0px 10px rgba(0,0,0,.2); */

		/* outline: 2px solid var(--color); */
	}

	#sectionJobs slide-cover[incomplete] slide-cover-head percent:before {
		content: '!';
	}

	#sectionJobs slide-cover[incomplete] slide-cover-body {
		padding: 20px;
		text-align: center;
	}

	#sectionJobs slide-cover-body app-area-head {
		display: flex;
		padding: 20px;
		justify-content: stretch;
	}

	#sectionJobs slide-cover-body app-area-body {
		display: block;
		padding: 20px;
	}

	details {
		box-sizing: border-box;
		position: relative;
	}

	details summary {
		font-size: 16px;
		font-weight: 600;
		appearance: auto;
		padding-left: 50px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		height: 60px;
		position: sticky;
		top: 0px;
		margin: 0px calc(-1* var(--padding));
		left: 0px;
		cursor: default;
		background: white;
		z-index: 10;
	}

	details summary::marker {
		display: none;
		appearance: none;
	}

	details summary:before {
		content: '􀆊';
		font-family: 'SF-Pro';
		font-weight: 600;
		font-size: 14px;
		display: flex;
		width: 1em;
		height: 1em;
		transform-origin: center center;
		position: absolute;
		left: 20px;
		top: 50%;
		translate: 0% -50%;
		align-items: center;
		justify-content: center;
		opacity: .5;
		transition: rotate .125s linear;
	}

	details[open] summary:before {
		rotate: 90deg;
	}

	details[open] {
		--padding: 20px;
		padding: var(--padding);
		padding-top: 0px;
	}

	details[open]:before {
		content: '';
		position: sticky;
		height: 100%;
		display: block;
		width: 100%;
		outline: 2px solid red;
		top: 60px;
		display: none;
	}

	details summary:focus {
		outline: var(--focus-outline);
		outline-offset: -4px;
	}

	#sectionJobs slide-cover-body details[key="comparisons"] app-area-body {
		display: flex;
		flex-direction: column;
		row-gap: 10px;
		overflow: hidden;
		padding: 0px;
	}

	select-label {
		display: flex;
		column-gap: 5px;
		align-items: center;
	}

	details[key="comparisons"] select-label {
		width: 100%;
		display: grid;
		grid-template-columns: auto 1fr;
		margin: 10px 0px;
	}

	#promptJobCompareTable {
	}

	#promptJobCompareTable transcript-box {
		min-width: auto;
		max-height: 300px;
		width: 100%;
		border-right: var(--edge);
		border-bottom: var(--edge);
	}

	#promptJobCompareTable table-custom-cell-value:has(transcript-box) {
		padding: 0px;
	}

	gallery-item-title {
		user-select: text;
	}

	matrix#promptTableCompared matrix-row[diff] matrix-cell[header] {
		color: orange;
	}

	matrix#promptTableCompared matrix-row[diff] matrix-cell span {
		display: block;    /* border-top: .5px solid orange; */
		color: gray;
		background: rgba(0, 0, 0, .02);
		padding: 4px 5px;
		margin: 0px -5px;
		border-radius: 6px;
		min-height: 1em;
		margin-top: 10px;
		border: 1px dashed orange;
	}

	matrix#promptTableCompared matrix-row[diff] matrix-cell span:empty:before {
		content: '-'
	}

	#jobNew {
		margin-left: auto;
	}

	#sectionPrompt app-section-item[role='options'] select {
		margin-left: auto;
	}

	app-section-item[role="questionExample"] textarea-label:before {
		text-transform: capitalize;
		opacity: .5;
		margin-left: 4px;
		margin-bottom: 4px;
	}

	#sectionPrompt app-section-item[role="questionExample"] textarea {
		display: block;
		background: rgba(0, 0, 0, .05);
		padding: 4px 8px;
		border-radius: 5px;
		width: 100%;
	}

	#sectionPrompt app-section-item[role='options'][type='freeform'] textarea {
		display: none;
	}

	#sectionPrompt app-section-item[role='options'][type='freeform']:after {
		content: 'Freeform: AI will respond naturally';
		font-size: 15px;
		font-weight: 300;
		text-rendering: geometricPrecision;
		line-height: 1.25em;
		font-style: italic;
		opacity: calc(.70 * .33);
	}

	table-custom-row:not([disagreement]) table-custom-cell[key="target"] table-custom-cell-value {
		opacity: .25;
	}

	#pageTranscripts:is(gallery-item-title, gallery-item-subtitle) {
		white-space: pre-wrap;
		word-break: break-all;
		height: auto;
		text-indent: 0px;
		padding-left: 15px;
	}

	#dialogJobSendAll {
		width: 75vw;
		min-width: 500px;
		height: 75vh;
		min-height: 500px;
		resize: both;
		overflow: auto;

		carousel-items {
			overflow: clip;
			overflow-clip-margin: 10px;
		}

		dialog-body {
			text-rendering: geometricPrecision;

			slide {
				position: absolute;
				height: 100%;
				width: 100%;
				top: 0px;
				left: 0px;
			}

		}

		checklist-item[status]:after, #slideSendAllResults slide-title:after {
			content: attr(status);
			display: inline-flex;
			margin-left: auto;
			text-transform: uppercase;
			font-size: 10px;
			align-items: center;
			font-weight: 800;
			padding: 4px 8px;
			box-sizing: border-box;
			border-radius: 4px;
			height: 20px;
			border-radius: 20px;
			width: 20px;
			justify-content: center;
			align-items: center;
			font-family: 'SF-PRO';
		}

		checklist- checklist-item > input {
			transform-origin: center center;
		}

		checklist-item[status] {
			border-bottom: var(--edge);
			padding: 8px 10px !important;
		}

		:is(slide-title, checklist-item)[status]:after {
			content: var(--icon) !important;
			font-weight: 800 !important;
			font-size: 10px !important;
		}

		checklist-item[status]:after {
			font-size: 8px;
			padding: 3px 6px;
		}

		[label="Responses"] checklist-item-label[subtitle]:after {
			content: attr(subtitle);
			display: block;
			font-size: 75%;
			opacity: .5;
		}

		:is(slide-title, checklist-item)[status="completed"]:after {
			color: green;
			background: #dff2d9;
			--icon: "􀆅";
		}

		:is(slide-title, checklist-item)[status="started"]:after {
			color: navy;
			background: #d9eaf2;
			--icon: "􀊯";
			animation: spin 2s linear infinite forwards;
		}

		:is(slide-title, checklist-item)[status="error"]:after {
			color: red;
			background: #fedcdc;
			--icon: "􀅎";
		}

		#slideSendAllResults {
			display: grid;
			height: 100%;
			width: 100%;
			grid-template-rows: auto 1fr;
			row-gap: 10px;

			slide-body {
				overflow: auto;
				border: var(--edge);
				border-radius: 6px;
				overscroll-behavior: none;
				box-sizing: border-box;
				position: relative;
			}

			slide-head {
				display: grid;
				row-gap: 10px;
			}

			slide-subtitle {
				display: block;
				white-space: pre;
				text-align: left;
				padding-left: 5px;				/* padding: 5px 10px; */

				/* background: rgba(0,0,0,.02); */

				/* border: var(--edge); */
				border-radius: 6px;
				box-sizing: border-box;				/* tab-size: 2em; */
			}

			slide-title {
				text-align: left;
				display: flex;
				font-size: 16px;
				font-weight: 600;
			}

			slide-foot {
				display: flex;
				justify-content: space-between;
				column-gap: 10px;
			}

			slide-title:before {
				content: "􀯶";
				font-family: "SF-Pro";
				font-weight: 600;
				display: inline-flex;
				margin-right: 10px;
				opacity: .25;
			}

			table.mac {
				outline: none;
				border-radius: 0px;
				border-bottom: var(--edge);

				tr.header {

					/* border-bottom: var(--edge); */position: sticky;
					top: 0px;
					background: white;
					box-shadow: 0px .5px 0px 0px rgba(0, 0, 0, .2);

					td {
						text-align: left !important;
					}

					td:nth-child(3) {
						width: 60px;
						text-align: center !important;
					}

				}

				tr:not(.header) td:nth-child(2) {
					font-weight: bold;
				}

				td:nth-child(3) {
					text-align: center;
				}

				td {
					padding: 6px 6px;
				}

				td[quarter='0'] {
					background: #e1e1e166;
				}

				td[quarter='1'] {
					background: #fedcdc66;
				}

				td[quarter='2'] {
					background: #ffe5b466;
				}

				td[quarter='3'] {
					background: #fff9c266;
				}

				td[quarter='4'] {
					background: #dff2d966;
				}

			}

		}

		#slideSendAllMain {
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: auto 1fr auto;
			gap: 10px;
			align-items: stretch;

			buttons {
				display: flex;
				justify-content: space-between;
			}

			> columns {
				grid-auto-columns: 1fr;				/* grid-template-rows: 1fr 1fr; */

				/* grid-template-columns: 1fr auto; */
				gap: 10px;
				overflow: hidden;				/* grid-template-areas:
					"a c"
					"b c"; */
			}

			> p {
				all: unset;
				display: block;
				white-space: pre-wrap;
				text-align: left;
				margin: 0px;
				padding: 0px 4px;
			}

			checklist-:before {
				content: attr(label);
				position: sticky;
				top: 0px;
				background: white;
				border-bottom: var(--edge);
				width: 100%;
				height: 25px;
				display: flex;
				z-index: 10;
				align-items: center;
				justify-content: flex-start;
				padding: 0px 10px;
				box-sizing: border-box;
				font-weight: 600;
				color: rgba(0, 0, 0, .5);
			}

			checklist- {
				display: block;
				overflow: auto;
				min-height: 100px;
				border: var(--edge);
				box-sizing: border-box;
				background: white;
				border-radius: 6px;
				padding: 0px 0px;
				overscroll-behavior: none;

				checklist-item {
					text-align: left;
					height: auto;
					display: grid;
					grid-template-columns: auto 1fr;
					padding: 4px 10px;
					align-items: center;

					&:has(:checked) {
					}

				}

			}

		}

	}

}