/*
Unified coalesced CSS
Based on branding.css + minimalist.css
*/

/* ========================================
   Root / theme tokens
======================================== */

:root {
 color-scheme: light only;

 --app-bg: #ffffff;
 --app-surface: #ffffff;
 --app-surface-muted: #f8fafc;
 --app-border: #dbe3ee;
 --app-border-strong: #c8d3e1;
 --app-text: #152334;
 --app-text-soft: #5d6b7c;
 /* The design's primary button gradient start and its hover, per
    docs/branding.md. These were #7f56d9/#6941c6, a third purple that rendered
    alongside the ported screens - most visibly on every link in the app.
    Not the design system's --primary #7E60F6: that is 4.29:1 on white and
    fails AA for body text, and this token colours links. */
 --app-primary: #9333ea;
 --app-primary-strong: #7e22ce;
 --app-primary-tint: #faf5ff;
 --app-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
 --app-radius: 14px;
 --app-container: 1240px;
 --app-header-height: 72px;

 --brand-accent: #ff773c;
 --brand-dark: #454554;
 --brand-light: #dedeed;

 --white: #fff;
 --black: #000;

 --gray-050: #f9fafb;
 --gray-075: #f8fafc;
 --gray-100: #f5f5f5;
 --gray-150: #efefef;
 --gray-175: #efeff5;
 --gray-200: #eee;
 --gray-225: #e4e4e7;
 --gray-250: #e2e8f0;
 --gray-275: #dedede;
 --gray-300: #ddd;
 --gray-325: #d1d5db;
 --gray-350: #ccc;
 --gray-375: #c8d3e1;
 --gray-400: #bbb;
 --gray-450: #aaa;
 --gray-500: #999;
 --gray-550: #888;
 --gray-600: #777;
 --gray-650: #666;
 --gray-700: #555;
 --gray-750: #444;
 --gray-800: #374151;
 --gray-850: #334155;
 --gray-900: #282828;

 --blue-link: #10a;
 --blue-link-hover: #33f;
 --blue-soft: #8af;
 --blue-info: #60a5fa;
 --blue-info-bg: #eff6ff;
 --blue-info-text: #1d4ed8;
 --blue-strong: #08a;
 --blue-valid: #22c55e;
 --blue-valid-bg: #ecfdf3;
 --blue-valid-text: #166534;
 --blue-ui: #2d78ff;
 --blue-ui-soft: #eaf2ff;
 --blue-ui-border: #3b82f6;
 --blue-ui-hover: #e3eeff;
 --blue-mid: #99c;
 --blue-alert: #adf;
 --blue-panel: #afb7cc;
 --blue-table-hd: #eef;
 --blue-table-even: #dde;
 --blue-user-hover: #b8b8cc;
 --blue-tooltip: #ffa;

 --orange-warn: #fb923c;
 --orange-warn-bg: #fff7ed;
 --orange-warn-text: #9a3412;
 --orange-strong: #ffb400;
 --orange-soft: #fdb;
 --orange-row-hover: rgb(245, 184, 53);
 --orange-row-selected: rgb(241, 133, 74);

 --red: #f00;
 --red-dark: #a00;
 --red-soft: #fdd;
 --red-error: #ef4444;
 --red-error-bg: #fff1f1;
 --red-error-text: #991b1b;
 --red-deep: #c00;
 --red-invalid: #600;
 --red-badge: #ff0000;
 --red-session-error: #b42318;
 --red-pva-error: #b00020;

 --yellow: #ff0;
 --yellow-soft: #ffd;
 --yellow-row: #ffa;

 --green-good: #090;

 --purple-soft: #835fff;
 --purple-mid: #c34bae;
 --purple-dark: #638;

 --shadow-soft: 0 1px 2px rgba(2, 6, 23, 0.05);
 --shadow-sm: 1px 1px 3px rgba(0, 0, 0, 0.2);
 --shadow-md: 2px 2px 3px rgba(0, 0, 0, 0.2);
 --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.18);
 --shadow-panel: 0 18px 35px rgba(15, 23, 42, 0.12);
 --shadow-dark: 0 0 8px rgba(0, 0, 0, 0.6);
 --shadow-faint: 0 0 4px 0 #0000001f;
 --shadow-faint-lg: 0 0 10px 0 #0000001f;
 --shadow-faint-strong: 0 0 10px 0 #0000003f;
}

/* ========================================
   Global elements
======================================== */

html,
body {
 /*background: var(--app-bg);*/
 color: var(--app-text);
}

html {
}

body {
 font-size: 14px;
 margin: 0;
 padding: 0;
 background-size: cover;
 min-height: 100dvh;
 display: flex;
 flex-direction: column;
}

body.app-shell {
 min-height: 100dvh;
 display: flex;
 flex-direction: column;
}

img {
 border: 0;
}

span {
 min-height: 1px;
}

table {
 border-collapse: collapse;
}

td {
 vertical-align: top;
 font-size: 14px;
}

hr {
 border: 0;
 width: 95%;
 height: 1px;
 color: var(--brand-light);
 background-color: var(--brand-light);
}

hr.divider {
 border: 0;
 border-top: 1px solid var(--app-border);
 width: 100%;
 margin: 24px 0;
 height: auto;
 color: initial;
 background: none;
}

textarea {
 height: 90px;
 font-family: Arial, Sans;
 font-size: 14px;
 line-height: 1.4em;
}

input[type="text"],
input[type="password"] {
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
}

input.text,
textarea,
select {
 font-size: 14px;
 padding: 1px;
 border-top: 1px solid var(--gray-600);
 border-left: 1px solid var(--gray-350);
 border-right: 1px solid var(--gray-350);
 border-bottom: 1px solid var(--gray-300);
 background-color: var(--white);
 resize: none;
}

select {
 position: relative;
 top: -2px;
}

label input[type="radio"] {
 position: relative;
 top: 2px;
}

a,
a:link {
 color: var(--app-primary);
}

a:hover,
a:link:hover {
 color: var(--app-primary-strong);
}

/* bugfix from original broken selector */
.entry-content a,
.entry-content a:link {
 color: var(--blue-link) !important;
}

/* ========================================
   App shell layout
======================================== */

.app-header {
 position: sticky;
 top: 0;
 z-index: 50;
 background: rgba(255, 255, 255, 0.94);
 backdrop-filter: blur(10px);
 border-bottom: 1px solid var(--app-border);
 box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

.app-container {
  position:relative;
}

.app-container,
.app-main,
.app-page-shell,
.app-page-content,
.main-content {
 min-width: 0;
 width: 100%;
 max-width: none;
}

.app-header-inner,
.app-nav-inner,
.app-footer-inner {
 width: min(var(--app-container), calc(100% - 32px));
 margin: 0 auto;
}

.app-container {
 width: 100%;
 margin: 0;
}

.app-header-inner {
 min-height: var(--app-header-height);
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 24px;
}

.app-brand {
 display: flex;
 align-items: center;
 min-width: 0;
}

.app-logo-link {
 display: inline-flex;
 align-items: center;
 text-decoration: none;
}

.app-logo {
 display: block;
 max-height: 42px;
 width: auto;
 max-width: 220px;
}

.app-header-right {
 display: flex;
 align-items: center;
 justify-content: flex-end;
 gap: 12px;
}

.app-user-menu {
 display: flex;
 align-items: center;
 gap: 8px;
}

.app-nav {
 border-top: 1px solid rgba(219, 227, 238, 0.8);
 background: var(--white);
}

.app-nav-inner {
 min-height: 54px;
 display: flex;
 align-items: center;
}

.app-main {
 flex: 1 1 auto;
 padding: 0 0; 
 min-width: 0;
}

.app-page-shell {
 background: transparent;
 border: 0;
 border-radius: 0;
 box-shadow: none;
 overflow: visible;
 min-width: 0;
}

.app-page-content {
 padding:24px;
 min-width: 0;
 width: 100%;
}
body.Onboarding .app-page-content {
  padding:0;
}

.app-page-content.no-page-title {
 padding-top: 0;
}

.app-title-row {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: 16px;
 margin-bottom:0;
}

body.Onboarding .app-title-row
{
  margin-left:24px;
}

.app-page-title {
 margin: 0;
 font-size: 2rem;
 line-height: 1.15;
 letter-spacing: -0.02em;
 color: var(--app-text);
}

.app-footer {
 border-top: 1px solid var(--app-border);
 background: transparent;
}

.app-footer-inner {
 min-height: 72px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
 color: var(--app-text-soft);
 font-size: 0.95rem;
}

.app-footer-brand strong {
 color: var(--app-text);
}

/* ========================================
   Legacy layout containers
======================================== */

.topSurround {
 min-height: calc(100vh - 2em - 24px);
 padding-bottom: 16px;
}

.headerContent {
 margin: 0;
 border-bottom: 3px solid var(--brand-dark);
 background-color: var(--white);
 padding: 0;
}

.prebody {
 background-color: var(--white);
 border-bottom: 2px solid var(--brand-dark);
 height: 2px;
 overflow: hidden;
}

body.Start .bodyContent {
 max-width: 500px;
 margin-top: 80px;
}

.bodyContent {
 margin: 16px auto 0;
 width: 95%;
 max-width: 1640px;
}

.footerContent {
 padding: 0 0 4px;
 border-top: 4px solid var(--brand-dark);
 background-color: var(--white);
}

.header {
 min-height: 98px;
 position: relative;
 width: 95%;
 max-width: 1640px;
 margin: 0 auto;
}

.headerLogo {
 width: 256px;
 padding: 8px 0 4px;
}

.footer {
 text-align: center;
 color: #111;
}

.footerCredit {
 color: var(--gray-650);
 line-height: 2em;
}

.sectionContent {
 padding: 0;
 background: transparent;
 border-bottom-left-radius: 4px;
 border-bottom-right-radius: 4px;
}

.contentWrapper,
.site,
.site-content,
.content-area,
.inside-article {
 background: transparent !important;
}

.entry-content {
 padding: 0 !important;
 min-width: 0;
}

#title-flex > .flex-grow {
 min-width: 0;
}

.inside {
 margin: 4px 60px;
}

.para {
 padding: 6px 16px 16px;
}

/* ========================================
   Utilities
======================================== */

.clearer {
 clear: both;
}

.ral {
 text-align: right;
}

.cal {
 text-align: center;
}

.noSel {
 cursor: default;
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 -o-user-select: none;
 user-select: none;
}

.sel {
 cursor: text;
 -webkit-touch-callout: text;
 -webkit-user-select: text;
 -khtml-user-select: text;
 -moz-user-select: text;
 -ms-user-select: text;
 -o-user-select: text;
 user-select: text;
}

.flex-grow {
 flex-grow: 1 !important;
}

.flex-row-reverse {
 flex-direction: row-reverse;
}

.justify-end {
 justify-content: flex-end !important;
}

.visibleOnHoverOnly {
 color: rgba(255, 255, 255, 0.1) !important;
}

.visibleOnHoverOnly:hover {
 color: var(--blue-link) !important;
}

.sizeSanitizer {
 position: relative;
 overflow: hidden;
 white-space: nowrap;
}

th div.sizeSanitizer {
 padding: 8px 5px !important;
 border-left: solid 1px lightgray;
}

th:first-child div.sizeSanitizer {
 border-left: solid 1px transparent;
}

.loading {
 font-weight: normal;
 font-style: italic;
 font-size: 13px;
 text-align: center;
 display: block;
}

.noData {
 padding: 16px;
 margin: 8px;
 border: 1px solid var(--gray-300);
 text-align: center;
 background-color: var(--gray-150);
}

.noData .primary {
 font-size: 16px;
}

.noData .secondary {
 font-style: italic;
}

.miniDesc {
 font-size: 0.8em;
 color: var(--gray-650);
 font-style: italic;
 margin: 4px 8px;
}

.ordinalAnchor {
 position: relative;
 top: -4px;
 font-weight: bold;
 margin-left: 4px;
 text-decoration: none;
}

.vert {
 display: inline-block;
 margin-left: 12px;
 height: 26px;
 border-right: 2px solid var(--brand-dark);
 margin-right: 12px;
 vertical-align: middle;
}

.page-title {
 font-size: 18px;
 font-weight: bold;
 margin: 16px 0 4px;
}

.header-wrap {
 position: relative;
}

/* ========================================
   Alerts / messages / status
======================================== */

.alert {
 width: 100%;
 border-radius: 12px !important;
 padding: 12px 14px !important;
 border-width: 1px !important;
 border-style: solid !important;
 margin: 0 0 16px 0 !important;
 text-align: center !important;
}

div.error,
.error {
 background: var(--red-error-bg) !important;
 color: var(--red-error-text) !important;
 border-color: var(--red-error) !important;
}

div.error {
 border: 2px solid var(--brand-dark);
 margin: 8px;
 padding: 4px;
 text-align: center;
}

div.message,
.message {
 background-color: var(--orange-soft);
 margin-top: 12px;
 padding: 4px 8px;
}

div.message {
 background-color: var(--brand-light);
 border: 2px solid var(--brand-dark);
 margin: 8px;
 padding: 4px 0;
 text-align: center;
 border-radius: 8px;
}

.success {
 background: var(--blue-valid-bg) !important;
 color: var(--blue-valid-text) !important;
 border-color: var(--blue-valid) !important;
}

.warning {
 background: var(--orange-warn-bg) !important;
 color: var(--orange-warn-text) !important;
 border-color: var(--orange-warn) !important;
}

.info {
 background: var(--blue-info-bg) !important;
 color: var(--blue-info-text) !important;
 border-color: var(--blue-info) !important;
}

.staticContentAnnotation {
 width: 98%;
 background-color: var(--brand-light);
 border-top: 2px solid var(--brand-dark);
 border-bottom: 1px solid var(--brand-dark);
 margin: 8px 0;
 padding: 4px 1%;
 text-align: right;
}

.processingPanel {
 display: inline-block;
 margin: 0 auto;
 width: 300px;
 font-size: 1rem !important;
 vertical-align: middle;
}

.processingPanel::before {
 content: "";
 display: inline-block;
 vertical-align: middle;
 width: 32px;
 height: 32px;
 border-radius: 50%;
 border-top: 6px solid var(--orange-strong);
 border-right: 6px solid var(--brand-accent);
 border-bottom: 6px solid var(--purple-soft);
 border-left: 6px solid var(--purple-mid);
 animation: spin 2s infinite linear;
 margin-right: 12px;
}

.processingPanel::after {
 content: "...";
 color: var(--gray-550);
 animation: ellipsis 1.5s infinite linear;
}

.Install .processingPanel {
 display: block;
 margin: 32px auto;
 padding: 16px 0 8px 32px;
 background-color: rgba(0, 0, 0, 0.1);
 border-radius: 8px;
 border: 1px solid var(--gray-550);
 box-shadow: var(--shadow-md);
}

.progressBarOuter {
 position: relative;
 float: right;
 width: 300px;
 height: 18px;
 vertical-align: middle;
 border: 2px solid var(--brand-dark);
 border-radius: 5px;
 background-color: var(--gray-150);
 overflow: hidden;
}

.progressBarInner {
 position: absolute;
 width: 0%;
 height: 100%;
 left: 0;
 top: 0;
 background-color: var(--brand-dark);
 overflow: hidden;
}

.progressBarText {
 text-align: center;
 position: absolute;
 top: 0;
 left: 0;
 width: 296px;
}

.progressBarText.overlay {
 color: var(--gray-150);
}

.progressBarText.underlay {
 color: var(--brand-dark);
}

.prepopProgress {
 border: 1px solid var(--gray-300);
 padding: 12px 16px;
 background-color: var(--gray-150);
}

.prepopProgress .barOuter {
 display: block;
 position: relative;
 height: 18px;
 border: 1px solid var(--gray-500);
}

.prepopProgress .barInner {
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 height: 18px;
 border-right: 1px solid var(--gray-500);
 background-color: #77f;
 transition: 0.4s width;
}

.prepopProgress .status {
 margin: 0 12px 8px;
 text-align: center;
 font-weight: bold;
}

/* ========================================
   Start / login / generic app blocks
======================================== */

.userChoice {
 display: inline-block;
 width: 140px;
 height: 65px;
 vertical-align: middle;
 line-height: 65px;
 text-align: center;
 border: 1px solid var(--gray-450);
 margin: 24px 16px;
 cursor: pointer;
 background-color: var(--gray-300);
}

.userChoice:hover {
 background-color: var(--gray-550);
 color: var(--yellow-soft);
}

.validIdentities {
 text-align: center;
}

.loginBox {
 width: 80%;
 margin: 16px auto;
 text-align: center;
}

.loginTableField {
 text-align: right;
}

.optionList a {
 color: var(--black) !important;
 background-color: var(--gray-300);
 display: block;
 border: 1px solid var(--gray-550);
 font-style: normal;
 margin: 24px auto;
 width: 80%;
 height: 65px;
 line-height: 65px;
 vertical-align: center;
 text-align: center;
 text-decoration: none;
}

.optionList a:hover {
 background-color: var(--gray-550);
 color: var(--yellow-soft) !important;
}

.userNote {
 color: var(--brand-dark);
 float: right;
 padding: 8px 10px 4px;
 line-height: 25px;
}

.logoutBtn {
 float: right;
 margin-top: -4px;
 margin-left: 6px;
}

#logoutProgressInner {
 border-right: 1px solid var(--gray-450);
 background-color: var(--blue-soft);
 margin: 0;
 padding: 0;
 height: 16px;
}

#logoutProgressOuter {
 border: 2px solid var(--gray-650);
 height: 16px;
 width: 96%;
 margin: 10px auto;
 background-color: var(--white);
 padding: 0;
 overflow: hidden;
}

/* ========================================
   Tabs / regions / dashboard
======================================== */

.tabset {
 display: flex;
 cursor: pointer;
 margin-left: 0;
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 -o-user-select: none;
 user-select: none;
 width: fit-content;
}

.tabset .tab {
 transition: all 0.2s ease-in-out;
 position: relative;
 display: inline-block;
 font-weight: 500;
 padding: 5px 8px;
 text-decoration: none;
 cursor: pointer;
}

.tabset .tab.selected,
.tabset .tab:hover {
 background-color: var(--gray-150);
}

.tabset .tab.selected {
 color: var(--black);
}

.tabContents {
 border: 3px solid var(--gray-150);
 margin-bottom: 6px;
 overflow-y: auto;
 max-height: 60vh;
}

.tabContents .tabContent {
 background-color: var(--white);
 color: var(--black);
 display: none;
 padding: 8px;
}

.tabContents .tabContent.selected {
 display: block;
 max-height: 60vh;
}

.mini .tabContent {
 min-height: inherit;
}

.tabContent .field {
 margin-bottom: 1px;
}

.topSection {
 padding: 0 1% 24px;
}

.regionRow {
 clear: both;
}

.region {
 background: var(--white);
 border-radius: 10px;
 margin: 0 1%;
 overflow: hidden;
 vertical-align: top;
 white-space: normal;
 width: 60vw;
 display: flex;
 flex-direction: column;
}

.region .region {
 background-color: #dcc;
}

.region .title {
 font-size: large;
 font-weight: bold;
 padding: 25px 30px 10px;
}

.dashboardElements {
 text-align: center;
 border: 3px solid var(--brand-dark);
 margin: 4px;
 padding: 4px;
 background-color: var(--blue-panel);
}

.dashboardElements > * {
 text-align: left;
}

.dashboardElements .objectListingTable tr:hover td {
 background-color: var(--gray-450) !important;
 transition: background 0.2s;
}

.dashboardElements .key {
 width: 16px;
 height: 16px;
 margin: 1px auto;
 border: 1px solid var(--black);
 border-radius: 4px;
}

/* ========================================
   Tables
======================================== */

.centreTable {
 margin: 8px auto;
}

.centreTable td {
 padding: 8px 10px;
}

.centreTable tr.head td {
 background-color: var(--gray-300) !important;
 color: var(--black) !important;
 font-weight: 400;
 text-align: center;
 border: 1px solid var(--white);
 border-bottom: 1px solid var(--gray-650);
 cursor: normal !important;
}

.centreTable tr.even td {
 background-color: var(--gray-200);
}

tr.underlined td {
 border-bottom: 2px solid var(--gray-650);
}

.searchResults .centreTable tr:hover td {
 cursor: pointer;
 background-color: var(--gray-550);
 color: var(--white);
}

.sensibleTable {
 width: 100%;
 margin-bottom: 12px;
}

.sensibleTable td {
 padding: 4px;
}

.sensibleTable tr.hd td,
.sensibleTable tr.hd2 td {
 font-weight: 400;
 border-bottom: 1px solid var(--gray-750);
 background-color: var(--blue-table-hd);
}

.sensibleTable tr.even td {
 background-color: var(--blue-table-even);
}

.dataColumnLeft {
 border-left: 1px solid var(--gray-500);
 padding-left: 8px;
 text-align: right;
}

.dataColumnRight {
 border-right: 1px solid var(--gray-500);
 padding-right: 8px;
}

table.subscriptions td {
 padding: 5px;
 text-align: center;
}

.aiResultTable .header td {
 font-size: 14px;
 font-weight: bold;
 text-align: center;
}

.aiResultTable td.est {
 color: var(--green-good);
 text-align: right;
}

.aiResultTable td.pred {
 color: var(--blue-strong);
 text-align: right;
}

.aiResultTable .productRow {
 border-top: 0 hidden var(--white);
}

.aiResultTable tr td {
 border-bottom: 1px dotted #dededf;
 padding: 8px 4px;
 vertical-align: middle;
}

.videoProducersTable tr.hd td {
 font-weight: bold;
}

.videoProducersTable tr:not(.hd) td:first-child {
 font-weight: bold;
 color: var(--purple-dark);
}

/* ========================================
   Forms / fields / object data
======================================== */

.objectDataTable {
 width: 100%;
}

.objectDataTable select,
.objectDataTable input[type="text"],
.objectDataTable input[type="password"],
.objectDataTable textarea,
.objectDataTable .combo {
 width: 100%;
}

.objectDataTable .combo {
 margin-top: -4px;
 border: 1px solid var(--gray-450);
 margin-right: 8px;
}

.objectDataTable button.emailable,
.objectDataTable button.dialable,
.objectDataTable button.textable,
.objectDataTable button.webable {
 position: relative;
 top: -6px;
 height: 30px;
 width: 32px;
 padding: 0;
}

.objectDataTable button.dialable {
 background: var(--white) url("/images/phone.png") no-repeat 50% 50%;
}

.objectDataTable button.textable {
 background: var(--white) url("/images/txt.png") no-repeat 50% 50%;
}

.objectDataTable button.webable {
 background: var(--white) url("/images/web.png") no-repeat 50% 50%;
}

.objectDataTable button.emailable {
 background: var(--white) url("/images/email.png") no-repeat 50% 50%;
}

.objectDataTable button.emailable:hover,
.objectDataTable button.textable:hover,
.objectDataTable button.webable:hover,
.objectDataTable button.dialable:hover {
 background-color: var(--brand-dark);
}

.objectDataTable .flr {
 text-align: right;
 width: 35px;
 float: right;
}

.objectDataTable .fll {
 margin-right: 38px;
}

.objectDataTable .flr2 {
 text-align: right;
 width: 70px;
 float: right;
}

.objectDataTable .fll2 {
 margin-right: 73px;
}

.objectDataTable textarea {
 height: 118px;
 border: 1px solid lightgray;
 padding: 4px;
 border-top-left-radius: 6px;
 border-bottom-left-radius: 6px;
 box-shadow: var(--shadow-faint) !important;
}

.objectDataTable input[type="file"] {
 width: 190px;
}

.objectDataTable input[type="text"].sliderValue {
 width: 64px;
 text-align: center;
 background-color: var(--gray-200);
 margin-right: 32px;
}

.objectDataTable .ui-slider {
 display: inline-block;
 width: 360px;
}

.objectDataTable div.field {
 clear: both;
}

div.field.required .label,
div.field.required .labelFull {
 color: var(--red-deep);
}

.objectDataTable div.label {
 float: left;
 padding: 2px;
 width: 200px;
 display: inline-block;
 vertical-align: top;
}

.objectDataTable div.value {
 margin-left: 202px;
 vertical-align: top;
 padding: 2px;
}

.objectDataTable div.labelValue {
 padding-left: 32px;
}

.field textarea {
 resize: vertical;
}

.ui-autocomplete-input.invalid {
 color: var(--red-invalid);
 background-color: var(--red-soft);
}

#jobSelectContainer .combo {
 display: block;
 margin: 8px 16px 8px 30px;
 width: 75%;
}

.notes > div {
 padding: 8px 12px;
}

.pageElementsListing .field {
 padding: 8px 0;
 margin: 8px;
 border-top: 1px solid #dedede;
}

.configSettings .parameterLine {
 background-color: #f7f4ff;
 padding: 4px 12px;
}

.configSettings .parameterLine:nth-child(2n) {
 background-color: var(--white);
}

.configSettings .parameterLine div {
 display: inline-block;
 vertical-align: top;
}

.configSettings .parameterLine .parameterKey {
 width: 200px;
}

.configSettings .parameterLine .parameterValue {
 width: 70%;
 min-width: 320px;
}

.configSettings .parameterLine .parameterValue input[type="text"],
.configSettings .parameterLine .parameterValue textarea {
 width: 100%;
 box-sizing:border-box;
}

/* ========================================
   Cross table / tree / list panes
======================================== */

.crossTable {
 height: 120px;
 overflow-y: scroll;
 overflow-x: auto;
 border: 2px solid var(--gray-450);
 border-top-left-radius: 6px;
 border-bottom-left-radius: 6px;
 padding: 4px;
}

.crossTable .children {
 margin-left: 10px;
 padding-left: 21px;
 position: relative;
}

.crossTable .children::after {
 position: absolute;
 content: "";
 border-left: 1px solid var(--gray-750);
 left: 0;
 width: 1px;
 top: 0;
 bottom: 10px;
}

.crossTable .line {
 position: relative;
 white-space: nowrap;
}

.crossTable .children .line::before {
 position: absolute;
 content: "";
 border-top: 1px solid var(--gray-750);
 left: -21px;
 width: 18px;
 top: 11px;
 height: 1px;
}

.crossTable .lineContent {
 display: inline-block;
 vertical-align: top;
 white-space: normal;
}

.crossTable .lineContent:hover {
 background-color: var(--gray-200);
}

.crossTable.CandidateLanguage {
 height: 106px;
 margin-bottom: 4px;
}

.crossTable.CandidateSource,
.crossTable.JobSource {
 height: auto;
 overflow-y: inherit;
 overflow-x: inherit;
 border: 1px solid var(--gray-150);
}

.pseudoArrayListing {
 overflow-y: scroll;
 height: 128px;
 border: 1px solid var(--black);
 background-color: var(--white);
 margin: 4px;
 padding: 4px 8px;
}

#historyList {
 max-height: 160px;
 border: 1px solid var(--black);
 background-color: var(--white);
 overflow-y: scroll;
 padding: 4px;
}

.toursContainer {
 min-height: 200px;
 max-height: 360px;
 margin: 12px;
 overflow-y: scroll;
 overflow-x: hidden;
 padding-right: 20px;
}

.alertsContainer,
.patchContainer {
 height: 200px;
 margin: 12px;
 overflow-y: scroll;
 overflow-x: hidden;
 padding-right: 20px;
}

#autocompleteOutput {
 margin: 8px 16px;
 padding: 8px;
}

/* ========================================
   Object listings
======================================== */

.objectListingContainer {
 overflow-x: auto;
 margin-top: 0.5rem;
 box-shadow: var(--shadow-faint-lg);
 border-top: none;
 border-left: none;
}

.objectListingContainer div.head {
 display: none;
}

.objectListingContainer div.data {
 min-width: 100% !important;
}

.objectListingTable.head,
.objectListingTable.data {
 display: inline-block;
}

.objectListingTable.head {
 margin: 12px 0 0;
 overflow: hidden;
 z-index: 10 !important;
}

.objectListingTable.data {
 margin: 0 0 12px;
 max-height: 400px;
 overflow-y: auto;
 overflow-x: hidden;
}

.objectListingTable.ActivityDocument,
.objectListingTable.ActivityComment {
 height: 200px;
}

.objectListingTable table {
 border: none;
}

.objectListingTable.data table {
 width: 100%;
}

.objectListingTable table thead {
 background-color: var(--gray-150);
 color: var(--white);
 position: sticky;
 top: 0;
 z-index: 1;
}

.objectListingTable table thead tr {
 border: none;
}

.objectListingTable table tbody {
 z-index: 1;
}

.objectListingTable th {
 padding: 0 !important;
 color: #1a1c1e;
 text-align: left;
 font-size: xx-small;
 border: none;
 cursor: pointer;
}

.objectListingTable td {
 height: 26px;
 vertical-align: middle;
 padding: 7px;
 cursor: pointer;
 border: none;
 font-size: x-small;
}

.objectListingTable.data td {
 white-space: nowrap;
}

.objectListingTable.head td {
 overflow: hidden;
 padding: 4px;
}

.objectListingTable tr {
 transition: all 0.2s;
}

.objectListingTable tr td:last-child {
 border-right: 0 none;
}

.objectListingTable tr:nth-child(2n+2) {
 background-color: var(--gray-100);
}

.objectListingTable table tbody tr:hover {
 background-color: var(--orange-row-hover);
}

.objectListingTable tr.selected {
 background-color: var(--orange-row-selected);
}

.objectListingTable tr.selected a {
 color: var(--white) !important;
}

.objectListingTable tr.selected a:hover {
 color: var(--black) !important;
}

.objectListingTable .preRow,
.objectListingTable .postRow {
 position: relative;
}

.objectListingTable .rowsLoadingPanel {
 position: absolute;
 background-color: var(--white);
 font-style: italic;
 left: 35%;
 width: 30%;
 border: 2px solid var(--brand-dark);
 border-radius: 5px;
 padding: 8px 16px;
 text-align: center;
}

.objectPager {
 float: left;
}

.objectPager span {
 margin-left: 12px;
 margin-right: 12px;
}

.objectToolbar {
 text-align: center;
}

.objectOverlays {
 position: relative;
 overflow: visible;
 height: 2px;
 margin-bottom: 4px;
}

.overlayContent {
 background-color: #dcdcdc;
 position: relative;
 top: 0;
 left: 0;
 width: 100%;
 margin-left: -8px;
 z-index: 2;
 border-bottom-left-radius: 12px;
 border-bottom-right-radius: 12px;
 border: 3px solid var(--brand-dark);
}

/* ========================================
   Menus / navigation
======================================== */

#dynamic-menu,
#dynamic-menu div.topmenu {
 display: inline;
}

#menuLegend td {
 padding: 4px;
 vertical-align: middle;
}

.menuControl {
 width: 32px;
 padding: 0 0 2px;
 position: relative;
 top: 2px;
}

.linkList {
 position: absolute;
 bottom: -3px;
 right: 4px;
}

.linkList a,
.linkList .topmenu > div.menuItem {
 border: 3px solid var(--brand-dark);
 border-top-left-radius: 5px;
 border-top-right-radius: 5px;
 display: inline-block;
 background-color: var(--brand-dark);
 color: var(--white);
 font-weight: 400;
 padding: 2px 6px;
 margin: 0 2px;
 text-decoration: none;
}

.linkList a.current,
.linkList div.menuItem.current {
 border-bottom: 3px solid var(--white);
 background-color: var(--white) !important;
 color: var(--brand-dark);
}

.linkList a:hover,
.linkList .menuItem:hover {
 transition: background 0.2s, color 0.2s;
 background-color: var(--gray-150);
 color: var(--brand-dark);
}

.wp-menu-shell,
.wp-menu-shell > * {
 min-width: 0;
 width: 100%;
}

.wp-menu-shell ul,
.wp-user-menu-shell ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

.wp-menu-shell .menu {
 display: flex !important;
 flex-wrap: wrap;
 align-items: center;
 gap: 6px;
 width: 100%;
 overflow: visible !important;
}

.wp-menu-shell .menu > li,
#primary-menu .menu > li {
 position: relative !important;
 margin: 0;
 display: block;
}

.wp-menu-shell .menu > li > a {
 display: inline-flex;
 align-items: center;
 min-height: 42px;
 padding: 10px 14px;
 border-radius: 10px;
 color: var(--app-text);
 text-decoration: none;
 font-size: 0.92rem;
 font-weight: 600;
 transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.wp-menu-shell .menu > li:hover > a,
.wp-menu-shell .menu > li:focus-within > a,
.wp-menu-shell .menu > li.menu-active > a,
.wp-menu-shell .menu > li.current-menu-item > a,
.wp-menu-shell .menu > li.current_page_item > a {
 background: rgba(147, 51, 234, 0.1);
 color: var(--app-primary-strong);
}

.wp-menu-shell .sub-menu,
.wp-user-menu-shell .user-sub-menu,
.wp-user-menu-shell .sub-menu,
#primary-menu .sub-menu {
 display: none !important;
 position: absolute !important;
 top: calc(100% - 1px) !important;
 left: 0 !important;
 min-width: 220px;
 background: var(--white) !important;
 border: 1px solid var(--app-border);
 box-shadow: var(--shadow-panel);
 padding: 6px !important;
 z-index: 120 !important;
 margin: 0 !important;
 border-bottom-left-radius: 12px !important;
 border-bottom-right-radius: 12px !important;
 box-sizing: border-box !important;
}

.wp-menu-shell li:hover > .sub-menu,
.wp-menu-shell li:focus-within > .sub-menu,
.wp-user-menu-shell li:hover > .user-sub-menu,
.wp-user-menu-shell li:focus-within > .user-sub-menu,
.wp-user-menu-shell li:hover > .sub-menu,
.wp-user-menu-shell li:focus-within > .sub-menu,
#primary-menu li:hover > .sub-menu,
#primary-menu li:focus-within > .sub-menu {
 display: block !important;
}

.wp-menu-shell .sub-menu li,
.wp-user-menu-shell .user-sub-menu li,
.wp-user-menu-shell .sub-menu li {
 margin: 0;
 display: block;
}

.wp-menu-shell .sub-menu a,
.wp-user-menu-shell .user-sub-menu a,
.wp-user-menu-shell .sub-menu a,
#primary-menu .sub-menu li > a,
#primary-menu .user-sub-menu li > a {
 display: block !important;
 width: 100%;
 padding: 10px 12px !important;
 border-radius: 8px !important;
 color: var(--app-text) !important;
 text-decoration: none;
 white-space: nowrap;
 background: transparent !important;
}

.wp-menu-shell .sub-menu a:hover,
.wp-user-menu-shell .user-sub-menu a:hover,
.wp-user-menu-shell .sub-menu a:hover,
#primary-menu .sub-menu li:hover > a,
#primary-menu .sub-menu li:focus-within > a,
#primary-menu .user-sub-menu li:hover > a,
#primary-menu .user-sub-menu li:focus-within > a {
 background: var(--app-surface-muted) !important;
 color: var(--app-primary-strong) !important;
}

.wp-user-menu-shell {
 display: flex;
 align-items: center;
 justify-content: flex-end;
}

.wp-user-menu-shell .userMobileMenu {
 display: flex !important;
 align-items: center;
 justify-content: flex-end;
 gap: 8px;
}

.wp-user-menu-shell .userMobileMenu > li {
 position: relative;
 list-style: none;
}

/*
.avatar {
 background: var(--gray-225);
 color: #27272a !important;
 display: inline-flex !important;
 align-items: center;
 justify-content: center;
 border-radius: 50%;
 position: relative;
 width: 40px;
 height: 40px;
 max-width: 40px;
 max-height: 40px;
 min-width: 40px;
 min-height: 40px;
 border: none !important;
 box-shadow: var(--shadow-faint-lg);
 text-decoration: none !important;
 margin-left: 10px;
 padding-left: 0 !important;
 padding-right: 0 !important;
}

.avatar:hover,
.avatar:focus {
 background: var(--gray-325) !important;
 text-decoration: none !important;
}

.avatar a:link,
.avatar a:visited,
.avatar a:hover {
 text-decoration: none !important;
}

.wp-user-menu-shell .avatar {
 display: inline-flex !important;
 align-items: center;
 justify-content: center;
 width: 42px;
 height: 42px;
 min-width: 42px;
 min-height: 42px;
 border-radius: 999px;
 background: #eef2f7;
 color: var(--gray-850);
 text-decoration: none;
 border: 1px solid var(--app-border);
 box-shadow: none;
 margin: 0;
 padding: 0;
}

.wp-user-menu-shell .avatar:hover,
.wp-user-menu-shell .avatar:focus {
 background: var(--gray-250);
}

.wp-user-menu-shell .avatar::before {
 content: "☰";
 font-size: 16px;
 line-height: 1;
}
*/
.userAvatar {
 cursor: pointer;
 width: 50px;
 height: auto;
 border-radius: 50%;
}

.selectedUserAvatar {
 border: 2px solid;
 box-shadow: var(--shadow-faint-strong);
}

.localAvatar {
 width: 40px;
 height: 40px;
}

.sub-menu {
 background: transparent !important;
 margin-left: -5px !important;
 box-shadow: none !important;
 padding-top: 5px !important;
}

.user-sub-menu {
 background: transparent !important;
 margin-left: -5px !important;
 box-shadow: none !important;
 margin-top: -5.5px !important;
}

.sub-menu a,
.sub-menu li,
.sub-menu ul li,
.user-sub-menu a,
.user-sub-menu li,
.user-sub-menu ul li {
 border-radius: 0 !important;
}

.userMenu {
}

.main-navigation ul ul,
.wp-user-menu-shell .user-sub-menu,
.wp-user-menu-shell .userMenu {
 right: 0 !important;
 left: auto !important;
 min-width: 220px;
}

.wp-user-menu-shell .user-sub-menu .menu-item,
.wp-user-menu-shell .userMenu .menu-item {
 display: flex !important;
 align-items: center;
 gap: 8px;
}

.wp-user-menu-shell .user-sub-menu .menu-item > i,
.wp-user-menu-shell .userMenu .menu-item > i {
 width: 18px;
 text-align: center;
 color: var(--app-text-soft);
}

.wp-user-menu-shell .user-sub-menu .userListItem > a,
.wp-user-menu-shell .userMenu .userListItem > a {
 font-weight: 700;
 color: var(--app-text);
}

#ddd-menu > a {
 font-weight: 700;
 letter-spacing: 0.04em;
}

#primary-menu {
 min-height: 38px !important;
 overflow: visible !important;
}

#primary-menu .menu-active {
 border-bottom: 5px solid var(--app-primary) !important;
 background: var(--gray-250) !important;
}

#primary-menu ul li.menu-item,
ul.user-sub-menu li.menu-item,
#primary-menu ul li.menu-item:hover,
#primary-menu ul li.menu-active,
#primary-menu ul li.current-menu-item {
 margin: 0 !important;
 border-radius: 0 !important;
 border: 0 !important;
 border-bottom: 0 !important;
 box-shadow: none !important;
 background: transparent !important;
 transition: all 0.3s;
}

#primary-menu ul li.menu-item a,
ul.user-sub-menu li.menu-item a {
 font-size: small !important;
 background: var(--gray-050);
 border-radius: 10px 10px 0 0;
 padding: 10px 10px 5px !important;
 color: var(--black);
 padding-left: 5px;
 padding-right: 5px;
 line-height: normal;
}

#primary-menu > ul > li.menu-item,
#primary-menu > ul > li.menu-item.menu-active {
 background: transparent !important;
 color: var(--white) !important;
 box-shadow: none !important;
 border-bottom: none !important;
}

#primary-menu > ul > li.menu-item > a,
.wp-menu-shell #primary-menu > ul > li.menu-item > a,
#primary-menu > ul > li > a {
 padding-top: 5px !important;
 background: transparent !important;
 color: var(--app-text) !important;
}

#primary-menu > ul > li.menu-item.menu-active,
#primary-menu > ul > li.menu-item:hover {
 text-decoration: underline;
}

.wp-menu-shell #primary-menu > ul > li.menu-item:hover > a,
.wp-menu-shell #primary-menu > ul > li.menu-active > a,
.wp-menu-shell #primary-menu > ul > li.current-menu-item > a,
#primary-menu > ul > li.menu-item:hover > a,
#primary-menu > ul > li.menu-active > a,
#primary-menu > ul > li.current-menu-item > a {
 color: var(--app-primary-strong) !important;
 background: rgba(147, 51, 234, 0.1) !important;
}

#primary-menu > ul.menu > li:last-child:not(.menu-item) {
 margin-left: auto !important;
}

#primary-menu .menu > li.menu-active,
#primary-menu .menu > li.current-menu-item,
#primary-menu .menu > li.current_page_item {
 position: relative !important;
 top: 0 !important;
 bottom: auto !important;
 transform: none !important;
}

#primary-menu .menu > li.menu-active > a,
#primary-menu .menu > li.current-menu-item > a,
#primary-menu .menu > li.current_page_item > a {
 color: var(--app-primary-strong) !important;
 background: rgba(147, 51, 234, 0.1) !important;
 border: 0 !important;
 box-shadow: none !important;
}

#primary-menu ul li.menu-item:not(.menu-item-has-children) a {
 border-radius: 10px;
}

#primary-menu .user-sub-menu.userMenu {
 display: none !important;
 position: absolute !important;
 top: calc(100% - 1px) !important;
 right: 0 !important;
 left: auto !important;
 margin: 0 !important;
 min-width: 220px;
 background: var(--white) !important;
 border: 1px solid var(--app-border);
 border-radius: 12px !important;
 box-shadow: var(--shadow-panel);
 padding: 6px !important;
 z-index: 130 !important;
}

#primary-menu .menu > li:hover > .user-sub-menu.userMenu,
#primary-menu .menu > li:focus-within > .user-sub-menu.userMenu {
 display: block !important;
}

.app-nav,
.app-nav-inner,
.wp-menu-shell {
 overflow: visible !important;
}

.inside-header {
 align-items: flex-end !important;
}

.slideout-menu .menu-active {
 color: var(--base-3);
 background-color: var(--accent-2);
}

/* ========================================
   Week / day selectors
======================================== */

#weekControl {
 text-align: center;
}

#weekChoice .week {
 border: 1px solid var(--gray-350);
 background-color: var(--gray-200);
 padding: 4px;
 margin: 1px;
 cursor: pointer;
 text-align: middle;
}

#weekChoice .week.selected {
 border: 1px solid var(--black);
 background-color: var(--gray-450);
}

#dayChoice {
 width: 354px;
 margin: 2px auto;
}

#dayChoice .day {
 float: left;
 width: 40px;
 height: 20px;
 border: 1px solid var(--gray-350);
 background-color: var(--gray-200);
 padding: 4px;
 cursor: pointer;
 text-align: middle;
}

#dayChoice .day.selected {
 border: 1px solid var(--black);
 background-color: var(--gray-450);
}

#dayChoice .day.other {
 background-color: var(--blue-mid);
}

#dayChoice .day.colhead {
 text-align: center;
 background-color: var(--orange-soft);
 border: 1px solid var(--white);
 border-bottom: 2px solid #222;
}

#dayChoice .day.colhead.wkend {
 background-color: var(--yellow-row);
}

/* ========================================
   Dialogs / overlays / tooltips
======================================== */

.clickShield {
 background-color: rgba(0, 0, 0, 0.6);
 position: fixed;
 width: 100%;
 height: 100%;
 left: 0;
 top: 0;
 z-index: 2000;
 pointer-events: all;
}

.clickShield.dragManager {
 background-color: rgba(0, 0, 0, 0) !important;
}

.buggyBrowser .clickShield {
 background-color: rgba(255, 255, 255, 0.25);
}

.dragWrap {
 display: block;
 position: absolute;
 overflow: visible;
 width: 1px;
 height: 1px;
}

.dragWrap * {
 cursor: grab;
}

.dialogContainer {
 position: absolute;
 top: 50%;
 left: 50%;
 overflow: visible;
}

.dialog {
 position: absolute;
 box-shadow: 1px 1px 10px gray;
}

.dialog .content {
 max-height: 80vh !important;
 overflow-y: hidden;
 overflow-x: hidden;
 padding: 20px 15px;
}

.dialog .controls {
 padding: 10px 10px 15px 30px;
}

/* ----------------------------------------------------------------------
   Dialog finish

   mhos.core.openWindow builds every modal in the app - eight call sites
   between object.js, the launch planner, products, the profile and the top
   bar - and it had been left at defaults: a grey 1px offset shadow, a title
   with no separation from the body, and a controls row with no gap between
   the buttons.

   Finish only. Widths, positioning and the markup are untouched, because
   openWindow sizes some of these from JavaScript and the object grids put
   whole forms inside them.
   ---------------------------------------------------------------------- */

.clickShield {
 /* Slate rather than pure black, and lighter: 0.6 black over a light app
    reads as a lightbox. The blur is what separates the dialog from the page
    behind it now the shadow is no longer doing all the work. */
 background-color: rgba(15, 23, 42, 0.45);
 backdrop-filter: blur(2px);
 -webkit-backdrop-filter: blur(2px);

 /* Above the chrome. At the original z-index 20 this sat under the left nav
    rail (z-index 1100 in left-nav.css) and the top bar (30), so opening any
    dialog dimmed the content while leaving the navigation lit - which made
    the shell look like it had brightened rather than the page dimmed.

    Below .aiSessionHistoryMenu at 9999, which is deliberately the top of the
    stack and not ours to move. */
 z-index: 1200;
}

.region.dialog {
 border: 1px solid var(--app-border);
 border-radius: var(--app-radius, 14px);
 box-shadow: 0 20px 50px rgba(15, 23, 42, 0.22);
 animation: dialogRise 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

.region.dialog .title {
 padding: 20px 24px 16px;
 border-bottom: 1px solid var(--app-border);
 font-size: 17px;
 font-weight: 600;
 letter-spacing: -0.2px;
}

.region.dialog .content {
 padding: 20px 24px;
 font-size: 14px;
 line-height: 1.55;
}

.region.dialog .controls {
 gap: 8px;
 padding: 0 24px 20px;
}

/* Every button openWindow makes is `btn btn-sm secondary`, so without this
   the affirmative action and the way out look identical. The confirming
   button is always the last one - mhos.core.confirm passes {Cancel, Ok} and
   the object dialogs end on Save - so the last child carries the emphasis. */
.region.dialog .controls button:last-child {
 background: var(--app-primary) !important;
 border-color: var(--app-primary) !important;
 color: var(--white) !important;
}

.region.dialog .controls button:last-child:hover {
 background: var(--app-primary-strong) !important;
 border-color: var(--app-primary-strong) !important;
}

@keyframes dialogRise {
 from { opacity: 0; transform: translateY(8px); }
 to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
 .region.dialog {
  animation: none;
 }
}

.dlgContent {
 margin: 2px 16px 8px;
}

.tooltip {
 position: absolute;
 height: auto;
 border: 2px solid var(--brand-dark);
 background-color: var(--blue-tooltip);
 padding: 4px;
 white-space: normal;
 overflow-y: auto;
 max-height: 200px;
 z-index: 40;
}

.tooltip br {
 margin-bottom: 8px;
}

.inlay {
 position: relative;
}

#pop {
 opacity: 0;
 pointer-events: none;
 transition: opacity 0.4s;
}

#pop.popped {
 opacity: 1;
 pointer-events: all;
 z-index: 2;
}

#popback {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(255, 255, 255, 0.3);
}

#popover {
 position: absolute;
 top: 1.5px;
 left: 8px;
 width: calc(100% - 18px);
 border: 1px solid var(--black);
 border-bottom-left-radius: 8px;
 border-bottom-right-radius: 8px;
 box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
 background-color: #efefee;
 z-index: 3;
}

/* ========================================
   Reports / analytics / compare
======================================== */

.reportElement {
 display: inline-block;
 vertical-align: top;
 width: 400px;
 margin: 4px;
 padding: 4px 8px;
 border: 1px solid var(--brand-dark);
 background-color: var(--white);
}

.reportElement h2 {
 text-align: center;
 margin-bottom: 8px;
}

.reportPlot {
 height: 392px;
}

.reportData {
 height: 240px;
 margin-top: 16px;
 overflow-y: auto;
 border: 1px solid var(--gray-150);
}

.reportData .objectListingTable {
 width: 100%;
}

#compareProductsWrapper {
 position: sticky;
 bottom: 0;
 z-index: 60;
 width: 100%;
 background: rgba(255, 255, 255, 0.96);
 border-top: 1px solid var(--app-border);
 box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.08);
 padding: 10px 0;
}

#compareProductsContent {
 width: min(var(--app-container), calc(100% - 24px));
 margin: 0 auto;
 display: flex;
 justify-content: flex-end;
 gap: 16px;
 align-items: center;
}

#compareMiniProducts {
 display: flex;
 gap: 10px;
 align-items: center;
 flex-grow: 1;
 justify-content: flex-end;
}

.scatterBlock > div {
 display: block;
 width: 100%;
 padding: 8px auto;
}

.legend-group {
 width: calc(25% - 9px);
 display: inline-block;
 margin-left: 12px;
 vertical-align: top;
}

.legend-group:first-child {
 margin-left: 0;
}

.legend-group-title {
 padding: 8px 12px;
}

.legend-group-callout {
 width: 28px;
 height: 28px;
 border-radius: 32px;
 box-shadow: var(--shadow-sm);
 margin-right: 12px;
 display: inline-block;
 vertical-align: top;
}

.legend-group-title-text {
 display: inline-block;
 vertical-align: top;
 margin-top: 4px;
 width: calc(100% - 40px);
}

.product-column {
 display: inline-block;
 vertical-align: top;
 width: 25%;
 margin-right: 12px;
}

.product-column .legend-group {
 display: block;
 width: initial;
}

.after-product-column {
 display: inline-block;
 vertical-align: top;
 width: calc(75% - 24px);
}

#scatter,
#history {
 margin: 12px 0 16px;
}

#scatter {
 display: inline-block;
 vertical-align: top;
 width: calc(100% - 260px - 24px);
}

#scatterHoverDetails {
 display: inline-block;
 vertical-align: top;
 width: 260px;
 margin-top: 31px;
 float: right;
}

.scatter-legend {
 margin: 8px 0 32px;
}

.filter {
 margin-top: 16px;
}

.priceRange,
.saleRange {
 display: inline-block;
 cursor: pointer;
 border: solid 1px gray;
 background-color: var(--gray-150);
 color: var(--gray-500);
 padding: 4px 16px;
 box-shadow: var(--shadow-sm);
 margin-right: 12px;
}

.priceRange.selected,
.saleRange.selected {
 background-color: var(--white);
 color: var(--black);
}

#trendStatusSummaryPanel {
 vertical-align: top;
 width: 50%;
 display: inline-block;
}

#populationStatusPanel {
 vertical-align: top;
 width: calc(30% - 8px);
 padding-left: 8px;
 margin: 0 10%;
 display: inline-block;
}

#populationStatusPanel button {
 display: block;
 margin: auto;
 width: 100%;
}

/* ========================================
   Search / products / market analysis
======================================== */

.searchPanel {
 margin: 12px 0 16px 120px;
}

.btn.searchButton,
.analyseButton,
.prepopButton {
 display: inline-block;
 vertical-align: middle;
 width: 140px;
 box-sizing: border-box;
}

.prepopButton {
 font-size: 14px;
 padding: 6px 24px;
}

.searchButton:focus,
.analyseButton:focus,
.prepopButton:focus {
 background-color: var(--black);
 color: var(--white);
}

.searchInput {
 min-width: 250px;
 display: inline-block;
 border: 3px solid var(--black);
 border-radius: 5px;
 box-sizing: border-box;
 line-height: normal;
 color: var(--gray-900);
 width: calc(100% - 240px);
 font-size: 20px !important;
 padding: 8px 6px 8px 12px;
 vertical-align: middle;
}

.searchInput:focus {
 border: 3px solid #5551ff;
}

#content {
 padding: 0;
}

#menu {
 padding: 8px;
 text-align: center;
 border-top: 1px solid #787887;
}

#menu button {
 margin: 0 12px;
}

.productTitle::before {
 content: "Analysing: ";
 font-weight: normal;
}

.productTitle {
 font-size: 1.4em;
 font-weight: bold;
 padding-top: 8px;
}

.searchHeader {
 border-bottom: 1px solid #dededf;
}

.searchHeader .similarHeaderTitle {
 font-size: 1.2em;
 padding-bottom: 4px;
 text-align: center;
}

.searchHeader .wholesaleHeader,
.searchHeader .retailHeader {
 display: inline-block;
 vertical-align: top;
 width: calc(50% - 17px);
 text-align: center;
 font-size: 1.2em;
 font-weight: bold;
}

.searchResults {
 display: flex;
 height: 60vh;
 overflow-y: scroll;
 overflow-x: hidden;
}

.wholesaleResults,
.retailResults {
 display: flex;
 flex-direction: column;
 vertical-align: top;
 width: calc(50% - 17px);
 flex-grow: 1;
}

.productRow {
 border-top: 1px solid #dededf;
 padding: 16px;
}

.productRow * {
 vertical-align: top;
}

.productRow .left {
 display: inline-block;
 vertical-align: top;
 width: 70px;
 height: 64px;
 text-align: center;
}

.productRow .right {
 display: inline-block;
 vertical-align: top;
 width: calc(100% - 70px);
}

.productRow .constrainedImage {
 max-width: 64px;
 max-height: 64px;
}

.MarketAnalysis .productItem img.constrainedImage {
 max-width: 180px;
 max-height: 180px;
 display: block;
 margin: 0 auto;
}

.productRow .name {
 font-size: 1.2em;
 font-weight: bold;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.productRow .rating {
 position: relative;
 font-size: 0.8em;
 padding: 3px;
 height: 1em;
 background-color: var(--gray-275);
 overflow: hidden;
 text-align: center;
 border-radius: 4px;
 display: inline-block;
 border: 1px solid var(--black);
 width: calc(50% - 8px);
}

.productRow .rating .ratingBar {
 position: absolute;
 top: 0;
 left: 0;
 height: 100%;
 background-color: var(--white);
 mix-blend-mode: difference;
}

.productRow div.viewLink {
 text-align: right;
 display: inline-block;
 font-size: 0.8em;
 margin-top: 2px;
 width: 50%;
 font-style: italic;
}

.productRow div.viewLink a:link {
 color: var(--gray-550);
 text-decoration: none;
}

.productRow div.viewLink a:link:hover {
 text-decoration: underline;
}

.productRow div.price {
 margin-top: 4px;
}

.productRow.toScan {
 background-color: var(--yellow-row);
}

.productRow.scanning {
 background-color: var(--blue-alert);
}

.product-paginator {
 margin-bottom: 12px;
 border-bottom: 1px solid var(--gray-275);
 padding-bottom: 4px;
}

.product-paginator * {
 width: calc(33.3% - 8px);
 display: inline-block;
 margin: 4px;
 text-align: center;
}

.product-paginator button {
 border-radius: 12px;
 border: 1px solid var(--gray-275);
}

.product-paginator .paginator-prev::after {
 content: "<-";
}

.product-paginator .paginator-next::after {
 content: "->";
}

.productItem {
 position: relative;
}

.productItem:hover .product-view-external {
 display: block !important;
}

.product-view-external {
 position: absolute;
 top: 20px;
 left: 26px;
 display: none !important;
}

/* .stage-site-callout moved to top-bar.css: it is rendered inside the top bar
   now, so it is a flex item rather than something absolutely positioned into
   the corner the avatar occupies. */

.userMarketplaceSelection {
 display: block;
 margin-top: 0;
 padding: 0.5rem 0.75rem !important;
 border: 1px solid lightgray !important;
 background: var(--white) !important;
 color: var(--gray-800) !important;
 box-shadow: var(--shadow-faint) !important;
 font-size: 0.75rem !important;
 min-height: 34px;
}

.userMarketplaceSelection .userMarketplaceOption {
 display: block;
}

.userMarketplaceSelection .userMarketplaceOption input {
 position: relative;
 top: 1px;
}

.mp-select,
.mp-select.mini {
 display: flex;
 gap: 10px;
}

.mp-select-option {
 border: 1px solid lightgray;
 box-shadow: 0 0 5px 1px #0000001f;
 cursor: pointer;
 transition: all 0.5s ease;
 background-color: oklch(0.984 0.003 247.858) !important;
 gap: 10px;
 display: flex;
 align-items: center;
 padding: 5px 8px;
}

.mp-select-option.selected {
 background-color: var(--white);
 color: var(--black);
}

.mp-select-option:hover {
 background: oklch(0.929 0.013 255.508) !important;
}

.mp-select-option img,
.mp-select.mini img {
 display: inline-block;
 width: 40px;
 vertical-align: middle;
}

.mp-select-option img {
 opacity: 0.4;
}

.mp-select-option.selected img {
 opacity: 1;
}

.mp-select-option div,
.mp-select.mini .mp-select-option {
 font-weight: bold;
 font-size: small;
}

.mp-select.mini .mp-select-option {
 padding: 5px 8px;
}

.mp-select.mini.tiny .mp-select-option > div {
 display: none;
}

#marketplaceSelectorSlot {
 padding: 1rem 0;
 display: flex;
 justify-content: center;
}

.market-analysis-filters #marketplaceSelectorSlot {
 justify-content: flex-start;
}

.marketplaceImage img {
 box-shadow: 0 0 5px 1px #0000001f;
 width: 50px;
 height: auto;
 border: 1px solid gray;
 padding: 1px;
 position: absolute;
 top: 5px;
 right: 0;
}

.searchFlag {
 width: 50px;
 height: auto;
 border: 1px solid gray;
 border-radius: 0 !important;
 padding: 1px !important;
}

/* ========================================
   Buttons
======================================== */

.btn {
 padding: 8px 12px;
 border-radius: 6px;
 border: 1px solid var(--gray-350);
 cursor: pointer;
 background: var(--white);
}

.btn-primary {
 background: var(--blue-ui);
 color: var(--white);
 border-color: var(--blue-ui);
}

.btn-secondary {
 background: #f6f6f6;
}

.btn[disabled] {
 opacity: 0.6;
 cursor: default;
}

/* ========================================
   Messaging / messenger
======================================== */

.messagingEngine {
 position: fixed !important;
 z-index: 1000;
 background-color: var(--gray-150);
 bottom: 0;
 left: 0;
 padding: 7px 8px;
 border-right: 2px solid var(--brand-dark);
 cursor: pointer;
}

.messagingEngine.open {
 background-color: var(--yellow);
}

.messagerDialog {
 position: fixed;
 z-index: 1000;
 bottom: 40px;
 left: 0;
 border: 2px solid var(--brand-dark);
 min-width: 400px;
 padding: 8px 16px 8px 8px;
 background-color: var(--gray-150);
}

.messagerDialog .userList {
 border: 2px solid var(--brand-dark);
 margin: 4px;
 overflow-y: scroll;
 max-height: 30vh;
 background-color: var(--white);
}

.messagerDialog .userList .user {
 padding: 4px;
 cursor: pointer;
}

.messagerDialog .userList .user:hover,
.previousMessages .objectListingTable tr:hover td {
 background-color: var(--blue-user-hover);
}

.messagerDialog .userList .user.selected {
 background-color: var(--brand-dark) !important;
 color: var(--white);
}

.previousMessages {
 height: 25vh;
 width: 98%;
 margin: 2px auto;
 border: 2px solid var(--brand-dark);
 overflow-y: scroll;
}

.previousMessages .objectListingTable {
 width: 100%;
}

.previousMessages .objectListingTable td {
 vertical-align: top;
 padding: 10px 4px 4px;
 width: 13%;
}

.newMessage textarea {
 display: block;
 width: 98%;
 margin: 4px auto;
}

.newMessages {
 position: relative;
 padding-right: 32px;
}

.newMessages::after {
 content: attr(_numMessages);
 border-radius: 18px;
 height: 22px;
 padding: 0 6px;
 background-color: var(--brand-dark);
 color: var(--white);
 font-weight: bold;
 text-align: center;
 line-height: 22px;
 vertical-align: middle;
 position: absolute;
 right: 4px;
 bottom: 13%;
 transition: background-color 400ms linear;
}

.newMessages.flash::after {
 background-color: var(--red-badge);
}

/* ========================================
   Chat window / assistant output
======================================== */

.chatWindow {
 position: fixed;
 bottom: 12px;
 right: 16px;
 width: 46vw;
 min-height: 100px;
 background-color: var(--white);
 border: 1px solid var(--black);
 border-radius: 4px;
 border-top-left-radius: 16px;
 border-bottom-left-radius: 16px;
 overflow: hidden;
 padding: 4px 8px 4px 36px;
 box-sizing: border-box;
 box-shadow: var(--shadow-dark);
 transition: right 0.8s;
 z-index: 10;
 text-align: center;
}

.chatWindow.hidden {
 right: calc(-46vw + 32px);
}

.chatWindow:not(.asAIController) {
 display: none;
}

.chatWindow .dragHandle {
 position: absolute;
 top: 0;
 left: 0;
 background-color: var(--app-primary);
 height: 100%;
 width: 32px;
}

.chatWindow .dragHandle::after {
 content: "AI Config";
 display: block;
 position: absolute;
 font-size: 16px;
 font-weight: bold;
 white-space: nowrap;
 top: 50%;
 left: 50%;
 transform: translateX(-50%) translateY(-50%) rotate(-90deg);
 color: rgba(255, 255, 255, 0.8);
}

.chatWindow .loading {
 vertical-align: top;
 margin-left: 12px;
}

.chatWindow .outputPanel,
.chatWindow .inputPanel,
.chatWindow button.submit {
 display: none;
}

.chatWindow .outputPanel {
 max-height: calc(96vh - 160px);
 min-height: 32px;
 overflow-y: scroll;
 border: 1px solid #ededef;
 padding: 4px 8px;
}

.chatWindow .outputPanel .inputText {
 white-space: pre-line;
 color: #00a;
 margin-bottom: 4px;
 border-bottom: 1px solid #dedede;
 padding-bottom: 4px;
}

.chatWindow .outputPanel .outputText {
 white-space: pre-line;
 margin-bottom: 12px;
 padding-bottom: 4px;
 font-style: italic;
 border-bottom: 1px solid #dedede;
}

.chatWindow .outputPanel .old {
 opacity: 0.7;
}

.chatWindow .inputPanel {
 margin-bottom: 55px;
}

.chatWindow .submit {
 position: absolute;
 bottom: 8px;
 right: 8px;
 border-radius: 8px;
 background-color: var(--red);
 padding: 8px 16px;
 border: 2px solid var(--red-dark);
 cursor: pointer;
 color: var(--white) !important;
 transition: 0.4s;
}

.chatWindow .submit:hover {
 background-color: var(--yellow);
 color: var(--red-dark) !important;
}

.chatWindow .voiceChatBtn,
.chatWindow .aiConfigBtn {
 border-radius: 8px;
 background-color: var(--white);
 padding: 8px 16px;
 border: 2px solid var(--red-dark);
 cursor: pointer;
 color: var(--red-dark);
 transition: 0.4s;
}

.chatWindow .voiceChatBtn {
 position: absolute;
 bottom: 8px;
 left: 40px;
}

.chatWindow .aiConfigSurround {
 position: absolute;
 bottom: 8px;
 left: 200px;
}

.chatWindow .aiConfigBtn {
 display: inline-block;
 margin-right: 16px;
 vertical-align: middle;
}

.chatWindow .voiceChatBtn.connected,
.chatWindow .voiceChatBtn:hover {
 background-color: var(--yellow);
 color: var(--red-dark);
}

.chatWindow .voiceChatBtn,
.chatWindow .aiConfigSurround {
 margin-top: 8px;
 display: inline-block;
 position: initial;
 margin-right: 12px;
}

.chatWindow .outputProducts,
.assistantMessage .outputProducts {
 margin-bottom: 16px;
}

.assistantMessage .outputProducts {
 margin-top: 20px;
}

.chatWindow .outputProducts .productItem,
.assistantMessage .outputProducts .productItem {
 display: inline-block;
 vertical-align: top;
 width: 25%;
}

.chatWindow .productItem img.constrainedImage,
.assistantMessage .productItem img.constrainedImage {
 width: 100%;
}

.assistantMessage.hideDivs > div {
 visibility: hidden;
}

.assistantMessage .outputProducts .productItem {
 background-color: rgba(0, 0, 0, 0);
 box-shadow: none;
}

.chatWindow .outputReports .reportLink,
.assistantMessage .outputReports .reportLink {
 display: inline-block;
 background-color: var(--gray-175);
 border: 1px solid var(--gray-550);
 padding: 4px 16px 4px 12px;
 margin-bottom: 8px;
 font-size: 14px;
 border-radius: 10px;
 box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4);
 cursor: pointer;
}

.chatWindow .outputReports .reportLink::before,
.assistantMessage .outputReports .reportLink::before {
 content: "📎 ";
}

.frontAndCentreChat .table-wrapper {
 margin: 2px 0;
 visibility: visible !important;
 opacity: 1 !important;
}

.frontAndCentreChat table.chat-table {
 width: 100%;
 border-collapse: separate;
 border-spacing: 0;
 background: var(--white);
 color: #0f172a;
 border: 1px solid var(--gray-250);
 border-radius: 8px;
 overflow: hidden;
 box-shadow: var(--shadow-soft);
 font-size: 14px;
}

.frontAndCentreChat table.chat-table thead th {
 background: #0f172a;
 color: var(--gray-250);
 text-align: left;
 font-weight: 600;
 padding: 10px 12px;
 letter-spacing: 0.02em;
}

.frontAndCentreChat table.chat-table tbody td {
 padding: 10px 12px;
 border-top: 1px solid var(--gray-250);
 vertical-align: top;
}

.frontAndCentreChat table.chat-table tbody tr:nth-child(even) td {
 background: var(--gray-075);
}

.frontAndCentreChat table.chat-table tbody tr:hover td {
 background: #eef2ff;
}

.frontAndCentreChat table.chat-table th,
.frontAndCentreChat table.chat-table td {
 word-break: break-word;
}

/* ========================================
   AI panel / AI helpers
======================================== */

.aiPanel {
 margin-top: 0;
 margin-bottom: 20px;
 padding-bottom: 18px;
 border-bottom: 1px solid var(--app-border);
}

.aiPanel:empty {
  display:none !important;
}

.aiPanel .frontAndCentreChat {
 --boundsColour: var(--gray-600);
 --backColour: #f5f5f8;

 display: inline-block;
 position: relative;
 overflow: hidden;
 vertical-align: top;
 border-top: 3px solid var(--boundsColour);
 border-right: 3px solid var(--boundsColour);
 border-bottom: 3px solid var(--boundsColour);
 border-top-right-radius: 10px;
 border-bottom-right-radius: 10px;
 box-sizing: border-box;
 width: calc(100% - 120px);
 min-height: 120px;
 padding: 12px 12px 12px 50px;
 background: var(--backColour);
 box-shadow: var(--shadow-md);
 transition: 2s background;
}

.aiPanel .frontAndCentreChat::before {
 content: "";
 position: absolute;
 display: block;
 border-left: 3px solid var(--boundsColour);
 left: 0;
 top: 116px;
 height: 100%;
 width: 5px;
}

.aiPanel .frontAndCentreChat::after {
 content: "";
 position: absolute;
 display: block;
 left: -42px;
 top: -16px;
 height: 146px;
 width: 76px;
 border-top: 3px solid var(--boundsColour);
 border-right: 3px solid var(--boundsColour);
 border-bottom: 3px solid var(--boundsColour);
 border-top-right-radius: 100px;
 border-bottom-right-radius: 100px;
 background-color: var(--white);
}

.aiPanel .frontAndCentreChat.ai-mode-active {
 --boundsColour: var(--app-primary);
 background: linear-gradient(245.97deg, #ffb40044 0.11%, #ff762d44 34.04%, #c14bac44 66.96%, #825fff44 99.89%);
}

.aiPanel .commenceAIModePanel {
 margin: 0;
}

.commenceAIModeNotes {
 font-size: 0.9em;
}

.aiPanel .aiModeSwitchButtonContainer {
 text-align: right;
 margin-right: 32px;
}

.aiPanel .aiModeSwitchButtonContainer .btn {
 display: inline-block;
}

.aiPanel .userOptions .option {
 display: inline-block;
 padding: 8px 12px;
 background-color: var(--white);
 border-radius: 10px;
 cursor: pointer;
 border: 2px solid var(--gray-650);
 box-shadow: var(--shadow-md);
}

.aiPanel .userOptions .option:hover {
 background-color: var(--orange-strong);
}

.aiPanel .userOptions .option:not(:first-child) {
 margin-left: 16px;
}

.aiPanel .userOptions textarea {
 background-color: rgba(255, 255, 255, 0.8);
 width: 100%;
 border: none;
 border-radius: 12px;
 font-size: 17px;
 font-weight: 400 !important;
 color: rgb(9, 9, 11);
}

.aiPanel .userOptions textarea:focus {
 outline: none !important;
}

.ai-highlight {
 position: relative;
}

.ai-highlight::before {
 content: "";
 position: absolute;
 top: -5px;
 left: -16px;
 width: calc(100% + 32px);
 height: calc(100% + 10px);
 border: 3px solid;
 border-color: rgb(var(--ai-chosen-colour));
 background-color: rgba(var(--ai-chosen-colour), 0.1);
 box-shadow: var(--shadow-sm);
 border-radius: 8px;
 pointer-events: none;
}

.ai-highlight::after {
 position: absolute;
 max-width: 40%;
 display: block;
 top: calc(100% - 10px);
 right: 8px;
 content: "AI: " var(--ai-annotation);
 color: var(--black);
 border: 3px solid;
 border-color: rgb(var(--ai-chosen-colour));
 padding: 2px 8px;
 background-color: var(--white);
}

.aiActionButtons {
 display: flex;
 align-items: center;
 justify-content: flex-end;
 gap: 0.5rem;
 flex-wrap: wrap;
}

.aiHistoryBtn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 0.45rem;
}

.aiHistoryBtn i.fa {
 font-size: 0.95em;
}

.aiHistoryBtn.loading {
 opacity: 0.75;
 pointer-events: none;
}

.aiSessionHistoryBackdrop {
 position: fixed;
 inset: 0;
 z-index: 9998;
 background: transparent;
}

.aiSessionHistoryMenu {
 position: absolute;
 z-index: 9999;
 background: var(--white);
 border: 1px solid rgba(0, 0, 0, 0.12);
 border-radius: 10px;
 box-shadow: var(--shadow-lg);
 overflow: hidden;
 display: flex;
 flex-direction: column;
}

.aiSessionHistoryHeader {
 display: flex;
 align-items: center;
 gap: 0.5rem;
 padding: 0.85rem 1rem;
 font-weight: 600;
 border-bottom: 1px solid rgba(0, 0, 0, 0.08);
 background: #f7f9fc;
 color: #243447;
}

.aiSessionHistoryBody {
 overflow-y: auto;
 padding: 0.35rem 0;
}

.aiSessionHistoryLoading,
.aiSessionHistoryEmpty {
 padding: 1rem;
 font-size: 0.95rem;
 color: #5b6573;
}

.aiSessionHistoryEmpty.error {
 color: var(--red-session-error);
}

.aiSessionHistoryItem {
 display: block;
 width: 100%;
 text-align: left;
 padding: 0.8rem 1rem;
 background: transparent;
 border: 0;
 border-bottom: 1px solid rgba(0, 0, 0, 0.05);
 cursor: pointer;
 transition: background 0.15s ease;
}

.aiSessionHistoryItem:last-child {
 border-bottom: 0;
}

.aiSessionHistoryItem:hover {
 background: #f4f7fb;
}

.aiSessionHistoryItem.loading,
.aiSessionHistoryItem.renaming {
 opacity: 0.65;
 pointer-events: none;
}

.aiSessionHistoryItem.active {
 background: var(--blue-ui-soft);
 box-shadow: inset 3px 0 0 var(--blue-ui-border);
}

.aiSessionHistoryItem.active:hover {
 background: var(--blue-ui-hover);
}

.aiSessionHistoryItemTopRow {
 display: flex;
 align-items: center;
 gap: 0.5rem;
}

.aiSessionHistoryItemTitleWrap {
 flex: 1 1 auto;
 min-width: 0;
}

.aiSessionHistoryItemTitle,
.aiSessionHistoryItemTitleEdit {
 font-weight: 600;
 color: #1f2937;
 line-height: 1.3;
 margin-bottom: 0.2rem;
 width: 100%;
 box-sizing: border-box;
}

.aiSessionHistoryItemTitle {
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.aiSessionHistoryItemTitleEdit {
 display: none;
 padding: 0.28rem 0.45rem;
 border: 1px solid #94a3b8;
 border-radius: 6px;
 background: var(--white);
 font: inherit;
}

.aiSessionHistoryItem.editing .aiSessionHistoryItemTitle {
 display: none;
}

.aiSessionHistoryItem.editing .aiSessionHistoryItemTitleEdit {
 display: block;
}

.aiSessionHistoryItemMeta {
 font-size: 0.85rem;
 color: #6b7280;
 line-height: 1.35;
}

.aiSessionHistoryRenameBtn {
 flex: 0 0 auto;
 border: 0;
 background: transparent;
 color: #6b7280;
 cursor: pointer;
 padding: 0.3rem 0.35rem;
 border-radius: 6px;
 transition: background 0.15s ease, color 0.15s ease;
}

.aiSessionHistoryRenameBtn:hover {
 background: rgba(59, 130, 246, 0.08);
 color: #2563eb;
}

/* ========================================
   Terminal / mic / voice
======================================== */

.terminal {
 color: #42a;
 font-family: Consolas, "Courier New", Courier, monospace;
 font-weight: bold;
 margin-bottom: 12px;
 font-size: 16px;
 white-space: pre-wrap;
}

.terminal .term-cursor {
 display: inline-block;
 animation: term-blink 1s steps(1, end) infinite;
}

.mic-button {
 display: inline-block;
 vertical-align: top;
 position: relative;
 width: 120px;
 height: 120px;
 cursor: pointer;
 background-image: url("/images/mic-off-ai3.svg");
 background-size: contain;
 background-repeat: no-repeat;
}

.mic-button.mic-on {
 background-image: url("/images/mic-on-ai3.svg");
}

.mic-button.mic-connecting::after {
 content: "";
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-image: url("/images/mic-on-ai3.svg");
 animation: flash 1.4s infinite;
 background-size: contain;
 background-repeat: no-repeat;
}

/* ========================================
   Chat wireframe / builder
======================================== */

.chatWireframe .chatNode {
 white-space: nowrap;
 position: relative;
}

.chatWireframe .chatNode > * {
 white-space: normal;
 vertical-align: top;
}

.chatWireframe .view {
 overflow: scroll;
 display: block;
 width: 100%;
 height: calc(60vh - 150px);
 border: 1px solid var(--gray-300);
 padding: 8px 12px;
 box-sizing: border-box;
}

.chatWireframe .chatNodeControls {
 display: inline-block;
 position: relative;
 width: 360px;
 background-color: #f5f5fa;
 border: 1px solid #dedede;
 padding: 4px 8px;
 margin: 8px 12px;
 box-shadow: var(--shadow-sm);
}

.chatWireframe .field .label {
 width: 100px;
}

.chatWireframe .field .value {
 margin-left: 110px;
}

.chatWireframe .chatNodeChildren {
 display: inline-block;
 margin-left: 64px;
}

.chatWireframe .chatNodeControls::after {
 content: "";
 position: absolute;
 top: 32px;
 left: -64px;
 width: 48px;
 border-bottom: 1px solid var(--gray-650);
}

.chatWireframe .chatNode:first-child > .chatNodeControls::after {
 left: -80px;
 width: 64px;
}

.chatWireframe .chatNode:not(:last-child)::after {
 content: "";
 position: absolute;
 top: 40px;
 left: -52px;
 width: 8px;
 height: calc(100% + 2px);
 border-left: 1px solid var(--gray-650);
}

/* ========================================
   PVA
======================================== */

.pva-root {
 display: flex;
 min-height: 560px;
 color: #222;
}

.pva-root textarea {
 min-height: 260px;
}

.pva-sidebar {
 width: 260px;
 border-right: 1px solid #e1e1e1;
 background: #fafafa;
 padding: 12px;
}

.pva-step {
 padding: 10px 12px;
 margin: 6px 0;
 border-radius: 6px;
 cursor: pointer;
 display: flex;
 align-items: center;
 gap: 10px;
}

.pva-step .num {
 background: var(--gray-300);
 width: 20px;
 height: 20px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 border-radius: 50%;
 font-size: 12px;
}

.pva-step.active {
 background: var(--blue-ui-soft);
}

.pva-step.disabled {
 color: var(--gray-450);
 cursor: default;
}

.pva-main {
 flex: 1;
 padding: 16px;
}

.pva-card {
 background: var(--white);
 border: 1px solid #e1e1e1;
 border-radius: 8px;
 padding: 16px;
}

.pva-card-title {
 font-weight: 600;
 margin-bottom: 12px;
}

.pva-flex {
 display: flex;
 gap: 16px;
}

.pva-left {
 width: 280px;
}

.pva-right {
 flex: 1;
}

.pva-prod-img {
 width: 100%;
 border-radius: 6px;
 border: 1px solid #eee;
}

.pva-img-ph {
 background: #f3f3f3;
 color: var(--gray-650);
 border: 1px dashed var(--gray-350);
 height: 220px;
 display: flex;
 align-items: center;
 justify-content: center;
 border-radius: 6px;
}

.pva-img-ph.small {
 height: 72px;
}

.pva-actions {
 margin-top: 12px;
 display: flex;
 gap: 8px;
}

.pva-status {
 margin-top: 8px;
 color: var(--gray-750);
}

.pva-status.error,
.pva-concept-status.error {
 color: var(--red-pva-error);
}

.pva-concepts-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
 gap: 12px;
}

.pva-concept-card {
 border: 1px solid #e1e1e1;
 border-radius: 8px;
 padding: 10px;
 position: relative;
}

.pva-concept-card.selected {
 outline: 2px solid var(--blue-ui);
}

.pva-concept-title {
 font-weight: 600;
 margin-bottom: 6px;
}

.pva-concept-image img {
 width: 100%;
 border-radius: 6px;
 border: 1px solid #eee;
}

.pva-concept-desc {
 width: 100%;
 margin-top: 8px;
}

.pva-concept-actions {
 display: flex;
 gap: 6px;
 margin-top: 8px;
 flex-wrap: wrap;
}

.pva-concept-status {
 margin-top: 6px;
 font-size: 12px;
 color: var(--gray-700);
}

.pva-prod-top {
 display: grid;
 grid-template-columns: 2fr 1fr;
 gap: 12px;
}

.pva-video-stage {
 position: relative;
 background: var(--black);
 min-height: 360px;
 border-radius: 6px;
 overflow: hidden;
}

.pva-video-stack {
 position: absolute;
 inset: 0;
}

.pva-video-stack video {
 width: 100%;
 height: 100%;
 object-fit: contain;
 background: var(--black);
}

.pva-video-placeholder {
 position: absolute;
 inset: 0;
 color: var(--white);
 display: flex;
 align-items: center;
 justify-content: center;
 opacity: 0.7;
}

.pva-video-placeholder.waiting {
 color: transparent;
 position: absolute;
 inset: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 background: rgba(0, 0, 0, 0.35);
}

.pva-video-placeholder.waiting::after {
 content: "";
 position: absolute;
 left: 50%;
 top: 50%;
 width: 44px;
 height: 44px;
 border-radius: 50%;
 border: 4px solid rgba(255, 255, 255, 0.35);
 border-top-color: var(--white);
 transform: translate(-50%, -50%) rotate(0deg);
 animation: pvaSpin 0.9s linear infinite;
}

.pva-video-placeholder.waiting::before {
 content: attr(data-waiting);
 position: absolute;
 left: 50%;
 top: calc(50% + 42px);
 transform: translateX(-50%);
 color: var(--white);
 font-weight: 600;
 text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.pva-prod-controls .pva-row {
 margin-bottom: 8px;
}

.pva-scrubber {
 margin-top: 12px;
 padding: 8px;
 border-top: 1px solid #eee;
}

.pva-scrubber-inner {
 display: flex;
 gap: 8px;
 overflow-x: auto;
}

.pva-scrubber-inner.disabled {
 pointer-events: none;
 opacity: 0.6;
}

.pva-thumb {
 width: 120px;
 cursor: pointer;
 margin: 4px;
 padding: 2px;
 border-radius: 4x;
}

.pva-thumb img {
 width: 100%;
 border-radius: 4px;
 border: 1px solid var(--gray-300);
}

.pva-thumb .idx {
 text-align: center;
 font-size: 12px;
 color: var(--gray-650);
 margin-top: 4px;
}

.pva-thumb.active {
 box-shadow: 0 0 0 3px var(--blue-ui);
 border-radius: 4px;
 background: var(--white);
}

.pva-thumb.active .idx {
 color: var(--blue-ui);
 font-weight: 600;
}

.pva-card.thinking,
.pva-concept-card.thinking {
 position: relative;
}

.pva-card.thinking::after,
.pva-concept-card.thinking::after {
 content: " ";
 position: absolute;
 inset: 0;
 background: rgba(255, 255, 255, 0.6);
}

.pva-card.thinking::before,
.pva-concept-card.thinking::before {
 content: attr(data-thinking) " ";
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 padding: 8px 10px;
 border-radius: 6px;
 background: var(--white);
 border: 1px solid var(--gray-300);
 color: #333;
 font-size: 13px;
}

.pva-right input[type="text"],
.pva-right textarea,
.pva-concept-desc {
 width: 100%;
 box-sizing: border-box;
 border: 1px solid var(--gray-350);
 border-radius: 6px;
 padding: 8px;
}

.pva-right label {
 display: block;
 margin-top: 8px;
 margin-bottom: 4px;
}

/* ========================================
   Misc
======================================== */

.fa-circle-xmark {
 font-size: medium;
 color: var(--red-error);
}

.fa-circle-check {
 font-size: medium;
 color: var(--blue-valid);
}

h2.gb-headline {
 margin-bottom: 20px;
}

h2.gb-headline-text {
 margin-bottom: 10px;
}

.workExperienceDropdown,
.docsDropdown {
 margin: 4px 16px 12px;
}

.advancedOptions {
 width: 550px;
 padding-top: 4px;
 border-top: 1px solid var(--brand-light);
 border-bottom: 1px solid var(--brand-light);
 padding-bottom: 4px;
 margin: 12px auto 8px;
}

.selector {
 margin-top: 10px;
 margin-left: 20px;
 font-style: italic;
 cursor: pointer;
}

.selectorDesc {
 margin: 6px 0 6px 32px;
 color: #898998;
}

.popper {
 text-align: right;
 cursor: pointer;
}

.popper::before {
 display: inline-block;
 position: relative;
 transform: rotate(0deg);
 transition: 1s transform;
}

.popper.popped::before {
 transform: rotate(90deg);
}

.poppable {
 text-align: left;
 display: none;
}

.poppable.popped {
 display: block;
}

#productPageButtons .flex,
.aiActionButtons,
.objectControls {
 flex-wrap: wrap;
}

div.grid-container {
}

.auditDialog table {
 width: 100%;
}

.auditDialog .changeListing {
 display: inline-block;
 width: calc(50% - 8px);
 padding: 4px 2px 4px 4px;
 border-right: 2px solid var(--gray-500);
 overflow-y: scroll;
 height: 60vh;
}

.auditDialog .fieldChangeListing {
 display: inline-block;
 width: calc(50% - 8px);
 padding: 4px;
 overflow-y: scroll;
 height: 60vh;
}

tr.deletedMessage td,
tr.deletedMessage:hover td {
 background-color: var(--gray-350) !important;
 color: var(--white);
 text-decoration: line-through;
}

.main-content {
 position: relative;
 transition: opacity 180ms ease;
}

.main-content.dynamic-page-leaving,
.main-content.dynamic-page-content-loading {
 opacity: 0.35;
}

.main-content.dynamic-page-entering {
 opacity: 0;
 animation: dynamic-page-fade-in 220ms ease forwards;
}

.main-content.dynamic-page-content-loading::after {
 content: "";
 position: absolute;
 top: 2rem;
 right: 2rem;
 width: 2rem;
 height: 2rem;
 border: 3px solid rgba(0, 0, 0, 0.15);
 border-top-color: rgba(0, 0, 0, 0.65);
 border-radius: 50%;
 animation: dynamic-page-spin 0.8s linear infinite;
 pointer-events: none;
 z-index: 2;
}

body.dynamic-page-loading {
 cursor: progress;
}

/* ========================================
   Keyframes
======================================== */

@keyframes spin {
 0% { transform: rotate(0deg); }
 100% { transform: rotate(360deg); }
}

@keyframes ellipsis {
 0% { content: "."; }
 50% { content: ".."; }
 100% { content: "..."; }
}

@keyframes flash {
 0% { opacity: 1; }
 50% { opacity: 0; }
 100% { opacity: 1; }
}

@keyframes term-blink {
 0%, 49% { opacity: 1; }
 50%, 100% { opacity: 0; }
}

@keyframes pvaSpin {
 from { transform: translate(-50%, -50%) rotate(0deg); }
 to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes dynamic-page-spin {
 to { transform: rotate(360deg); }
}

@keyframes dynamic-page-fade-in {
 from { opacity: 0; }
 to { opacity: 1; }
}

/* ========================================
   Media queries
======================================== */

@media print {
 .topSection,
 .headerContent,
 .footer {
 display: none;
 }

 .region {
 border: 0 hidden;
 border-radius: 0;
 }

 body {
 font-size: 12px;
 margin: 0;
 background-color: var(--white);
 }

 .sensibleTable {
 border: 1px solid var(--gray-550);
 }

 @page {
 size: auto;
 margin: 10mm;
 }
}

@media only screen and (max-width: 1280px) {
 .reportPlot {
 height: 352px;
 }

 .reportElement {
 width: 360px;
 margin: 4px;
 padding: 4px;
 border: 1px solid var(--brand-dark);
 background-color: var(--white);
 }

 .inside {
 width: 100%;
 margin: 0;
 }
}

@media only screen and (max-width: 960px) {
 .bodyContent {
 width: 99%;
 }

 .header {
 min-height: 50px;
 }

 .userNote {
 margin: 8px 40px 0 0;
 }

 .objectPager {
 float: none;
 }

 .headerLogo {
 margin: 0 auto;
 }

 .linkList {
 position: inherit;
 margin-top: 4px;
 margin-right: 4px;
 bottom: inherit;
 top: inherit;
 }

 .linkList a,
 .linkList .topmenu > div.menuItem {
 display: block;
 border: 3px solid var(--brand-dark) !important;
 border-radius: 4px;
 margin: 4px;
 }

 .userNote span {
 display: none;
 }

 .centreTable {
 margin: 0;
 }
}

@media only screen and (max-width: 899px) {
 .inside {
 width: 100%;
 margin: 0;
 }

 .para {
 padding: 6px 0;
 }

 .headerLogo {
 padding-top: 6px;
 }
}

@media (max-width: 900px) {
 .site-logo {
 display: none;
 }

 .user-sub-menu li a,
 .user-sub-menu li,
 .userListItem {
 background: var(--white) !important;
 }

 .menu-toggle {
 justify-content: flex-start !important;
 display: flex !important;
 align-items: center !important;
 background: transparent !important;
 }

 .gb-container-eae04a8a {
 padding: 40px 10px !important;
 }

 .app-main {
 padding-top: 16px;
 }

.app-page-content {
 padding: 20px 18px 24px;
}

 .app-title-row {
 flex-direction: column;
 align-items: stretch;
 }

 #primary-menu > ul {
 gap: 4px;
 }

 #primary-menu > ul > li > a {
 padding: 9px 12px;
 min-height: 38px;
 font-size: 0.88rem;
 }

 #compareProductsContent {
 width: calc(100% - 16px);
 gap: 12px;
 }
}

@media (max-width: 700px) {
 .wp-menu-shell .menu,
 #primary-menu > ul {
 flex-direction: column;
 align-items: stretch;
 }

 .wp-menu-shell .menu > li > a,
 #primary-menu > ul > li > a {
 width: 100%;
 }

 .wp-menu-shell .sub-menu,
 .wp-user-menu-shell .user-sub-menu,
 .wp-user-menu-shell .sub-menu,
 #primary-menu ul ul,
 .user-sub-menu,
 .sub-menu {
 position: static !important;
 top: auto;
 left: auto;
 right: auto;
 min-width: 0;
 margin-top: 6px;
 box-shadow: none;
 border: 1px solid var(--app-border);
 }

 .app-header-inner,
 .app-nav-inner,
 .app-container,
 .app-footer-inner {
 width: calc(100% - 20px);
 }

 .app-header-inner {
 min-height: auto;
 padding: 12px 0;
 flex-wrap: wrap;
 gap: 12px;
 }

 .app-header-right {
 width: 100%;
 justify-content: flex-end;
 }

 .app-nav-inner {
 padding: 8px 0 12px;
 }

 #compareProductsContent {
 flex-wrap: wrap;
 justify-content: flex-start;
 }

 #compareMiniProducts {
 width: 100%;
 justify-content: flex-start;
 flex-wrap: wrap;
 }

}



body:not(.lovable-page) .app-page-content {
  color: var(--app-text);
  font-size: 15px;
  line-height: 1.6;
}

body:not(.lovable-page) .app-title-row {
  align-items: flex-end;
  padding: 8px 0 0;
}

body:not(.lovable-page) .app-page-title {
  margin: 0;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: #24164a;
}

body:not(.lovable-page) .main-content {
  width: 100%;
  max-width: none;
}

body:not(.lovable-page) .main-content > [ai-describable],
body:not(.lovable-page) .main-content > .contentSection,
body:not(.lovable-page) .main-content > .sectionBlock {
  display: block;
  margin-top: 32px;
}

body:not(.lovable-page) .main-content > [ai-describable]:first-child,
body:not(.lovable-page) .main-content > .contentSection:first-child,
body:not(.lovable-page) .main-content > .sectionBlock:first-child {
  margin-top: 0;
}

body:not(.lovable-page) .sectionTitle {
  margin: 0 0 14px;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: #24164a;
}

body:not(.lovable-page) .sectionContent {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(124, 92, 255, 0.10);
  border-radius: 22px;
  box-shadow: 0 12px 34px rgba(84, 43, 160, 0.06);
  padding: 22px 22px 18px;
}

body:not(.lovable-page) .para {
  padding: 0;
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(36, 22, 74, 0.74);
}

body:not(.lovable-page) .para:last-child {
  margin-bottom: 0;
}

body:not(.lovable-page) .para + .para {
  margin-top: 0;
}

body:not(.lovable-page) .sectionContent > .para:first-child {
  margin-top: 0;
}

body:not(.lovable-page) .sectionContent > .para:last-child {
  margin-bottom: 0;
}

body:not(.lovable-page) .sectionContent a,
body:not(.lovable-page) .para a {
  color: var(--app-primary);
  font-weight: 600;
  text-decoration: none;
}

body:not(.lovable-page) .sectionContent a:hover,
body:not(.lovable-page) .para a:hover {
  color: var(--app-primary-strong);
  text-decoration: underline;
}

/* AI panel should feel integrated, but not oversized */
body:not(.lovable-page) .aiPanel {
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(124, 92, 255, 0.10);
}

/* Listing areas: add spacing and soften outer container only */
body:not(.lovable-page) .objectListingContainer {
  margin-top: 12px;
  box-shadow: none;
  background: #fff;
  overflow: auto;
}

/* Keep existing table mechanics intact */
body:not(.lovable-page) .objectListingTable.head,
body:not(.lovable-page) .objectListingTable.data {
  border-radius: 0;
  box-shadow: none;
}

body:not(.lovable-page) .objectListingTable table thead {
  background: #f7f4ff;
  color: #24164a;
}

body:not(.lovable-page) .objectListingTable th {
  font-size: 11px;
  color: #4b3b77;
  letter-spacing: 0.02em;
}

body:not(.lovable-page) .objectListingTable td {
  font-size: 12px;
  color: #152334;
}

/* Filter controls inside listings */
body:not(.lovable-page) .objectListingTable .filterText,
body:not(.lovable-page) .objectListingTable .filterSelect {
  border: 1px solid rgba(124, 92, 255, 0.14);
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
  padding: 5px 8px;
}

/* Bottom controls under listings */
body:not(.lovable-page) .objectControls {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

body:not(.lovable-page) .objectControls .btn {
  border-radius: 10px;
  padding: 8px 12px;
  font-weight: 600;
  box-shadow: none;
}

/* Generic cards/regions if used by legacy pages */
body:not(.lovable-page) .region,
body:not(.lovable-page) .reportElement,
body:not(.lovable-page) .pva-card {
  border-radius: 18px;
  border-color: rgba(124, 92, 255, 0.10);
  box-shadow: 0 12px 32px rgba(84, 43, 160, 0.05);
}

/* Minor spacing rhythm for stacked major blocks */
body:not(.lovable-page) .main-content > * + * {
  margin-top: 0;
}

body:not(.lovable-page) .main-content > [ai-describable] + [ai-describable] {
  margin-top: 36px;
}

/* Mobile */
@media (max-width: 900px) {
  body:not(.lovable-page) .sectionTitle {
    font-size: 21px;
  }

  body:not(.lovable-page) .sectionContent {
    padding: 18px 16px 16px;
    border-radius: 18px;
  }

  body:not(.lovable-page) .app-page-title {
    font-size: 30px;
  }

  body:not(.lovable-page) .objectControls {
    justify-content: stretch;
  }

  body:not(.lovable-page) .objectControls .btn {
    flex: 1 1 auto;
  }
}

body:not(.lovable-page) .objectListingTable table {
  border-collapse: separate;
  border-spacing: 0;
}

body:not(.lovable-page) .objectListingTable table thead tr.hd th:first-child {
  border-top-left-radius: 16px;
}

body:not(.lovable-page) .objectListingTable table thead tr.hd th:last-child {
  border-top-right-radius: 16px;
}

body:not(.lovable-page) .objectListingTable table thead tr.hd th:first-child > div {
  border-top-left-radius: 16px;
}

body:not(.lovable-page) .objectListingTable table thead tr.hd th:last-child > div {
  border-top-right-radius: 16px;
}


/* Coalesced title regions */
.app-v2-header {
  margin-bottom:16px;
}

.app-v2-breadcrumbs {
  margin-bottom:4px;
  opacity:0.7;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.04em;
}
.app-v2-breadcrumbs > * {
  display:inline-block;
  vertical-align:top;
}
.app-v2-breadcrumbs > *:NOT(:first-child)::before {
  content:">";
  pointer-events:none;
  color:#000;
  margin-left:8px;
  margin-right:8px;
  font-weight:bold;
  cursor:normal;
}

.app-v2-title {
  font-size:24px;
  font-weight:600;
  line-height:1.2;
  margin-bottom:6px;
  color:#241b4b;
}

.app-v2-byline {
  font-size:14px;
  opacity:0.8;
  color:#7d74a8;
}

.sectionContent > .para > div {
  margin-bottom:8px;
}