:root {
    --focus-outline: 4px solid rgba(70, 146, 247, .75);
    --header-box-shadow: 0px 1px 1.5px -1px rgba(0, 0, 0, .25);
    --edge: .5px solid rgba(0, 0, 0, 0.2);
    --tint-gray: rgba(0, 0, 0, 0.02);
}

* {
    /* outline: .1px dotted red; */
}

html {
    overflow: hidden;
}

body {
    padding: 0px;
    margin: 0px;
    height: 100vh;
    width: 100vw;
    position: absolute;
    /* height: 800px; */
    /* width: 800px; */
    translate: 0px 0px;
    display: block;
    top: 0px;
    left: 0px;
}

body2:after {
    content: '';
    position: fixed;
    top: 0px;
    left: 0px;
    height: 800px;
    width: 800px;
    /*    background-image: url('../_dev/pr_editor_1.png');*/
    /*    background-image: url('../_dev/pr_login_1.png');*/
    background-size: auto calc(1600px/2);
    background-position: top left;
    outline: 1px solid red;
    opacity: .25;
    pointer-events: none;
    opacity: 0;
}

#loginForm carousel {
    height: var(--height);
    width: var(--width);
    transition: height .125s linear;
}

#loginForm carousel-items {
    padding: 5px;
    margin: -5px;
}

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

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;
}

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

app-sidebar-head > icon-[name="Information"] {
    right: 35px;
}

app-sidebar-head > icon-[name="New"] {
    right: 10px;
}

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: column;
    align-items: center;
    row-gap: 5px;
}

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;
}

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;
}

#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%;
}

select-wrap:before {
    content: attr(placeholder);
    z-index: 8;
    overflow: visible;
    position: absolute;
    font-size: 13.33px;
    padding: 1px 8px;
    height: 20px;
    display: inline-block;
    line-height: 18px;
    letter-spacing: .5px;
    box-sizing: border-box;
    font-weight: 400;
    opacity: .25;
    text-rendering: geometricPrecision;
    pointer-events: none;
}

select-wrap:has( option:checked ):before {
    content: '';
}

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 {
}

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 {
}

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

#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;
}

#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 wrap {
    display: flex;
    flex-direction: column;
    flex: 1 1;
    row-gap: 10px;
    width: 100%;
}

#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;
    height: -webkit-fill-available;
    field-sizing: content;
    white-space: pre-wrap;
    font-size: 14px;
    text-rendering: geometricPrecision;
    font-weight: 300;
    line-height: 135%;
    word-break: break-word;
}

form- {
    top: 50%;
    left: 50%;
    display: grid;
    position: relative;
    translate: -50% -50%;
    width: 400px;
    min-width: fit-content;
    background: white;
    padding: 30px;
    box-sizing: border-box;
    padding-top: 0px;
    row-gap: 20px;
    outline: none;
    z-index: 1;
    opacity: 1;
    filter: blur(0px);
    transition: opacity .25s linear, filter .25s linear;
}

form-[fade] {
    opacity: 0;
    filter: blur(20px);
    pointer-events: none;
}

form-:after {
    content: '';
    position: fixed;
    height: 0px;
    width: 0px;
    display: block;
    outline: 100vmax solid #0c1c47;
    z-index: -2;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    contain: layout;
}

form-:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    display: block;
    background: white;
    z-index: -1;
    translate: 0% 0%;
    border-radius: 20px;
    box-shadow: 0px 20px 45px 0px #00000060;
}

form-body {
    display: contents;
}

form-foot {
}

form-foot:empty {
    display: none;
}

form-set {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}

form-[mode="choice"] form-set[role="up"] {
    display: none;
}

form-head {
    display: flex;
    background: url(../src/icon-calabrio-light.png) no-repeat center 20px;
    background-size: auto 45px;
    justify-content: center;
    align-items: end;
    height: 130px;
}

form-head:before {
    content: "Sign In";
    display: block;
    font-size: 35px;
    font-weight: 500;
}

form-[context="admin"] form-head:before {
    content: 'Admin Panel';
}

#loginForm form-set :is( input, select, select-wrap ) {
    outline: none;
    border: none;
    height: 40px;
    box-shadow: none;
    display: flex;
    align-items: center;
    font-size: 16px;
    width: 100%;
    padding: 0px !important;
    box-sizing: border-box;
}

#loginForm form-set :is( input, select-wrap ) {
    display: flex;
    border: var(--edge);
    border-radius: 10px;
    text-indent: 20px;
}

form-body select-wrap {
    padding-right: 0px !important;
}

#loginForm select-wrap select {
    background: none;
    width: 100%;
    text-indent: 20px;
    contain: unset;
    font-weight: 600;
    border-radius: 10px;
    padding-right: 0px !important;
    background-repeat: no-repeat;
    background-position: calc(100% - 15px) center;
    background-size: auto 10px;
    background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2272.7409%22%20height%3D%2246.3167%22%3E%3Cpath%20d%3D%22M36.3949%2046.3167C38.9612%2046.2794%2040.968%2045.3665%2043.0807%2043.2681L70.5245%2015.2559C72.0403%2013.7401%2072.7409%2011.9802%2072.7409%209.81264C72.7409%205.42872%2069.1667%201.80573%2064.8574%201.80573C62.7014%201.80573%2060.6573%202.70435%2058.9923%204.43244L35.1817%2029.124L37.7084%2029.124L13.7859%204.43244C12.1209%202.74165%2010.0999%201.80573%207.895%201.80573C3.58569%201.80573%200%205.42872%200%209.81264C0%2011.9429%200.737882%2013.7028%202.21637%2015.2559L29.709%2043.2681C31.8332%2045.4038%2033.8543%2046.3167%2036.3949%2046.3167Z%22%20fill%3D%22%23000000%22%20fill-opacity%3D%220.2%22%2F%3E%3C%2Fsvg%3E);
}

#loginForm buttons button:focus, form-body input:focus, form-body select-wrap:has(select:focus) {
    outline: var(--focus-outline);
}

#loginForm input[type='password']::-webkit-input-placeholder {
    color: rgba(0, 0, 0, .25) !important;
}

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

button[disabled] {
    opacity: .5 !important;
}

form-body:after {
    color: red;
    height: 0px;
}

form-body[state='rejected']:after {
    content: 'Invalid Sign In';
}

form-body[state='error']:after {
    content: 'Error: See Console';
}

form-body[state='expired']:after {
    content: 'Session Expired — Sign In Again';
}

form-body[state='rejected'] input:is([name="username"],[name="password"]) {
    background: #ff000010;
}

form-body[state='accepted'] input:is([name="username"],[name="password"]) {
    background: #00ff2010;
}

form-body select-wrap:before {
    content: attr(label);
    white-space: nowrap;
    opacity: .25;
    font-size: 16px;
    letter-spacing: .75px;
    width: 0px;
    display: inline-block;
    overflow: visible;
    padding: 0px;
    line-height: initial;
}

form-body select-wrap:has( option:checked ):before {
    content: "";
}

form-body select:before {
    content: "x";
}

form-body > buttons {
    display: flex;
    column-gap: 20px;
    margin-top: 10px;
}

form-body buttons button {
    flex: 1 1;
    /* min-height: 40px; */
}

form-body-items[error]:after {
    content: attr(error);
}

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;
}

#formSubmit {
    min-height: 40px;
    font-size: 17px;
    padding: 0px;
    background: #0c1c47;
    color: white;
}

#formSubmit:focus {
    outline: var(--focus-outline);
}

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;
}

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;
}

#adminPortalLink {
    order: 1;
    text-align: center;
    color: gray;
    font-size: 14px;
    border-bottom: 1px solid;
    width: fit-content;
    justify-self: center;
    padding: 0px 1px;
    display: flex;
    cursor: pointer;
    border-radius: 0.5px;
}

#adminPortalLink:focus {
    outline: var(--focus-outline);
    outline-offset: 3px;
}

#adminPortalLink[open]:before {
    content: '􀯶';
    font-family: 'SF-Pro';
    display: inline-block;
    scale: .75;
    font-weight: bold;
}

#adminPanel {
    display: grid;
    grid-template-rows: 1fr auto;
    row-gap: 10px;
    text-rendering: geometricPrecision;
    position: relative;
}

#adminPanel .header .slim {
    width2: 150px;
}

#adminPanel buttons {
}

#adminPanel form-panel-head {
    translate: 0px -100%;
    position: absolute;
    top: -25px;
}

#adminPanel form-panel-body {
    position: relative;
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: row;
    max-height: 60vh;
    gap: 10px;
}

#adminPanel form-panel-foot buttons {
    display: flex;
    justify-content: space-between;
    column-gap: 10px;
}

#adminPanel form-panel-foot buttons button {
    flex: 0 0;
    padding-left: 20px;
    padding-right: 20px;
}

#adminPanel tr:has(code-editor) {
    display: flex;
    flex-direction: column;
}

#adminPanel tr code-editor {
    margin: 10px;
    width: calc(100% - 20px);
    box-shadow: var(--menu_shadow);
}

form-[mode="admin"] form-body:before {
    content: "Admin Panel";
}

form-[mode="admin"] form-body {
    width: 50vw;
    min-width: 800px;
    /* height: calc(100% - 40px); */
    margin-top: 0px;
}

form-panel-body > table.mac {
    /* position: absolute; */
    /* height: 100%; */
}

#adminPortal list- {
    display: block;
    overflow: auto;
    outline: .5px solid rgba(0,0,0,.15);
    border-radius: 6px;
    /* max-height: 100px; */
}

#adminPortal list-item {
    display: block;
    padding: 3px 8px;
    box-sizing: border-box;
    letter-spacing: .5px;
    cursor: default;
    font-size: 14px;
    max-height: 300px;
    overflow: auto;
}

#adminPortal list-item:nth-child(2n) {
    background: var(--tint-gray);
}

#adminPortal list-item[selected] {
    color: white;
    background: rgb(0 100 225);
}

carousel[message="admin"] {
    width: 80vw;
}

carousel[message="admin-select"] buttons {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    align-content: center;
    height: 100%;
    justify-content: center;
}

carousel[message="admin-select"] buttons > button {
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
}

#adminPanelUsers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto;
    gap: 10px;
    height: 100%;
}

#adminPanelUsers code-editor {
}

#adminPanelUsers buttons {
    grid-column: 1 / -1;
    display: flex;
    gap: 10px;
}

#adminPanelUsers #userDelete {
    color: red;
    margin-right: auto;
}

#adminPanelUsers button {
    flex: 0 0;
}

#adminPanelUsers :is(#userUpdate,#userDelete,code-editor) {
    opacity: .5;
    pointer-events: none;
}

#adminPanelUsers:has(list-item[selected]) :is(#userUpdate,#userDelete,code-editor) {
    opacity: 1;
    pointer-events: all;
}

#loginForm :is(select, input):focus {
    outline: var(--focus-outline);
}

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

#adminPanelClients:before {
    content: attr(mode-message);
    font-size: 12px;
    color: rgba(0,0,0,.33);
    text-align: center;
    letter-spacing: 0.2px;
    background: #eee;
    padding: 5px 8px;
    border-radius: 5px;
    width: fit-content;
    /* text-transform: uppercase; */
    justify-self: center;
    font-weight: 600;
}

#adminPanelClients buttons {
    display: grid;
}

#adminClientNew {
    margin-left: auto;
}

form-body code-editor-message {
    white-space: pre-wrap;
}

#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: 20px;
    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;
    background: linear-gradient(to right, var(--color) var(--percentage), #ccc var(--percentage), #ccc);
}

#sectionJobsLimitsTracker:before {
    content: 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;
}

/**/
table-custom {
    border-radius: 6px;
    cursor: default;
    display: grid;
    font-size: 11px;
    grid-template-columns: repeat( var(--columns), 1fr );
    letter-spacing: 0.5px;
    border: var(--edge);
    box-sizing: border-box;
    text-rendering: geometricPrecision;
    width: 100%;
    contain: paint;
    --columns: 2;
    --table-custom-vertical-line: inset -.5px 0px 0px 0px rgba(0,0,0,.2);
    --table-custom-horizontal-line: inset 0px -.5px 0px 0px rgba(0,0,0,.2);
}

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

table-custom-row, table-custom-header-row {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
}

table-custom-header-row {
    position: sticky;
    top: 0px;
    background: white;
    border-radius: 7px 7px 0px 0px;
    z-index: 9999;
}

table-custom-cell {
    display: block;
    overflow: hidden;
}

table-custom-cell-value {
    display: block;
    padding: 3px 8px;
    box-sizing: border-box;
    cursor: default;
}

table-custom-cell[ellipsis] table-custom-cell-value {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

table-custom-header-row {
}

table-custom-header-cell {
    align-items: center;
    border-bottom: var(--edge);
    box-sizing: border-box;
    display: flex;
    font-weight: 500;
    justify-content: center;
    min-height: 29px;
    padding: 5px 8px;
    text-align: center;
    text-transform: capitalize;
    white-space: pre-line;
}

table-custom-header-cell > table-custom-cell-value {
}

table-custom-header-cell + table-custom-header-cell {
    box-shadow: -5.5px 0px 0px -5px rgba(0, 0, 0, 0.2);
}

table-custom-cell:has( + table-custom-cell ) {
    box-shadow: var(--table-custom-vertical-line)
}

table-custom-row:has( + table-custom-row ) {
    box-shadow: var(--table-custom-horizontal-line)
}

-table-custom-row:hover table-custom-cell-value:after {
    content: '􀆈';
    font-family: 'SF-Pro';
    font-size: 10px;
    font-weight: 600;
    opacity: .33;
    width: 0px;
    display: inline-block;
    translate: 1px -0.5px;
}

-table-custom-row[open]:hover table-custom-cell-value:after {
    content: '􀆇';
}

table-custom-row[open] table-custom-cell:has( + * ) {
    display: grid;
    grid-template-rows: auto 1fr;
}

table-custom-cell-value[more] + * {
    text-align: initial;
    display: block;
    background: rgba(0,0,0,.025);
    padding: 3px 8px;
    color: #333;
    box-sizing: border-box;
    /*font-size: 90%;*/
    overflow: scroll;
    max-height: 200px;
    height2: 100%;
    min-height: -webkit-fill-available;
}

table-custom-cell-value[more] + span {
    letter-spacing: .5px;
}

table-custom-row[open] table-custom-cell[key=ccrId] {
    /*resize: vertical;*/
}

table-custom-row:not([open]) table-custom-cell {
    height: auto !important;
}

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;
}

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,.085);
}

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: '-'
}

info {
    position: relative;
    display: inline-block;
    width: 1em;
    height: 1em;
    font-size: 12px;
    font-weight: 400;
    margin: 0px 4px;
    text-rendering: geometricPrecision;
    cursor: pointer;
}

info:before {
    font-family: 'SF-Pro';
    content: "􀅴";
    z-index: 99999999;
    position: relative;
    display: inline-block;
    opacity: 0;
}

info[open]:before, *:has( > info ):hover info:before {
    opacity: .5;
}

info:not([open]) info-text {
    display: none;
}

info info-text {
    display: block;
    width: 200px;
    position: absolute;
    background: white;
    padding: 10px;
    box-shadow: var(--menu_shadow);
    border-radius: 10px;
    z-index: 9999999;
    translate: -10px -25px;
    padding-left: 30px;
    color: #555;
    letter-spacing: .1px;
    white-space: pre-line;
}

info[open] info-text {
    animation: info .125s forwards;
}

@keyframes info {
    from {
        margin-top: 10px;
        opacity: 0;
    }

    to {
        margin-top: 0px;
        opacity: 1;
    }
}

#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;
}