/* Iris & Mineral. The product root also themes inherited CSS/Tailwind aliases.
   The promotion gets the same palette locally within the OSCELab page. */
:root.gppt-theme,
.gppt-promotion,
.gppt-product-link {
  --paper: #f0f1ee;
  --paper-2: color-mix(in srgb, var(--accent) 8%, var(--paper));
  --paper-inset: color-mix(in srgb, var(--accent) 14%, var(--paper));
  --cp-card: #fbfcf8;
  --ink: #302c3a;
  --ink-soft: color-mix(in srgb, var(--ink) 80%, var(--paper));
  --ink-mute: #706b7b;
  --ink-faint: color-mix(in srgb, var(--ink-mute) 75%, var(--paper));
  --line: color-mix(in srgb, var(--ink) 8%, transparent);
  --line-soft: color-mix(in srgb, var(--ink) 4%, transparent);
  --rule: color-mix(in srgb, var(--ink) 12%, transparent);
  --accent: #61537e;
  --accent-hover: color-mix(in srgb, var(--accent) 85%, black);
  --accent-soft: color-mix(in srgb, var(--accent) 10%, var(--paper));
  --accent-wash: color-mix(in srgb, var(--accent) 4%, var(--paper));
  --accent-ink: #ffffff;
  --shadow-soft: 0 1px 2px rgb(48 44 58 / 5%), 0 8px 24px -12px rgb(48 44 58 / 12%);
}

/* The shared authentication and account forms use Tailwind's accent and
   neutral ramps as well as the app tokens. Keep those on the product palette. */
:root.gppt-theme {
  --color-indigo-50: var(--accent-wash);
  --color-indigo-100: var(--accent-soft);
  --color-indigo-200: color-mix(in srgb, var(--accent) 25%, var(--cp-card));
  --color-indigo-300: color-mix(in srgb, var(--accent) 40%, var(--cp-card));
  --color-indigo-400: color-mix(in srgb, var(--accent) 65%, var(--cp-card));
  --color-indigo-500: color-mix(in srgb, var(--accent) 85%, var(--cp-card));
  --color-indigo-800: color-mix(in srgb, var(--accent) 70%, black);
  --color-indigo-900: color-mix(in srgb, var(--accent) 55%, black);
  --color-indigo-950: color-mix(in srgb, var(--accent) 40%, black);
  --color-slate-200: var(--paper-inset);
  --color-slate-300: color-mix(in srgb, var(--ink) 25%, var(--paper));
  --color-slate-600: var(--ink-soft);
  --color-slate-800: var(--ink);
  --color-slate-950: color-mix(in srgb, var(--ink) 65%, black);
  --color-gray-200: var(--color-slate-200);
  --color-gray-300: var(--color-slate-300);
  --color-gray-600: var(--color-slate-600);
  --color-gray-800: var(--color-slate-800);
  --color-gray-950: var(--color-slate-950);
}

/* Shared Query components with fixed lilac colours in their original styles. */
.gppt-page :is(.query-home, .query-saved) {
  --shadow-lift: 0 2px 4px rgb(48 44 58 / 4%), 0 18px 44px -24px rgb(48 44 58 / 22%);
}
.gppt-page :is(.query-composer, .query-followup):focus-within {
  border-color: rgb(97 83 126 / 38%);
  box-shadow: 0 0 0 3px rgb(97 83 126 / 7%), var(--shadow-lift, var(--shadow-soft));
}
.gppt-page .query-send { box-shadow: 0 5px 14px -8px rgb(97 83 126 / 70%); }
.gppt-page :is(.query-composer, .query-followup).is-dragover { box-shadow: 0 0 0 3px rgb(97 83 126 / 12%); }
.gppt-page :is(.query-privacy-menu, .query-context-menu, .query-history-menu, .query-model-menu) { box-shadow: 0 20px 48px -20px rgb(48 44 58 / 35%); }
.gppt-page :is(.query-history-settings-summary, .query-recent-row):hover { background: rgb(251 252 248 / 66%); }
.gppt-page .query-recent-row { background: rgb(251 252 248 / 42%); }
.gppt-page .query-home.is-chatting .query-chat-composer { background: var(--cp-card); }
.gppt-page .query-saved-menu-panel { box-shadow: 0 18px 44px -22px rgb(48 44 58 / 35%); }
.gppt-page :is(.query-share-dialog, .query-opinion-dialog) { box-shadow: 0 30px 80px -30px rgb(48 44 58 / 50%); }
.gppt-page :is(.query-share-dialog, .query-opinion-dialog)::backdrop { background: rgb(48 44 58 / 42%); }
.gppt-page .query-retention-dialog::backdrop { background: rgb(48 44 58 / 34%); }
.gppt-page .query-retention-panel { box-shadow: 0 30px 80px -30px rgb(48 44 58 / 60%); }
.gppt-page .query-dd-sentence:hover { background: rgb(97 83 126 / 5%); }
.gppt-page .query-dd-sentence.is-pinned { background: rgb(97 83 126 / 8.5%); box-shadow: 0 0 0 3px rgb(97 83 126 / 8.5%); }
.gppt-page .query-dd-chip { border-color: rgb(97 83 126 / 26%); box-shadow: 0 4px 12px -6px rgb(48 44 58 / 35%); }
.gppt-page .query-dd-chip:hover { border-color: var(--accent); }
.gppt-page .query-dd-cite { background: rgb(97 83 126 / 10%); }
.gppt-page .query-dd-source-title { text-decoration-color: rgb(97 83 126 / 30%); }
.gppt-page .query-dd-source:hover .query-dd-source-title { text-decoration-color: var(--accent); }
.gppt-page .query-dd-spinner { border-color: rgb(97 83 126 / 20%); border-top-color: var(--accent); }
.gppt-page .app-account__menu { box-shadow: 0 12px 32px -12px rgb(48 44 58 / 28%), 0 0 0 1px var(--line); }
.gppt-page .app-shell > .app-sidebar.is-drawer-open { box-shadow: 0 24px 60px rgb(48 44 58 / 30%); }
.gppt-page .app-shell .dashboard-backdrop.is-active { background: rgb(48 44 58 / 38%); }
.gppt-page .price-consent { border-color: rgb(97 83 126 / 16%); }
.gppt-page .price-trial { background: rgb(251 252 248 / 72%); }
.gppt-page .auth-form input[type="submit"].btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.gppt-page .auth-form input[type="submit"].btn-primary:is(:hover, :focus) { background: var(--accent-hover); border-color: var(--accent-hover); }

/* Trends retains its feed layout while using the same surfaces and ink. */
body.cp-page.gppt-page:has(.trends-layout) { background: var(--paper); }
.gppt-page :is(.trends-tools, .trends-search svg, .trend-origin, .trend-actions button, .trend-source-note, .trend-review-date, .trends-ongoing a, .trends-empty, .trends-end) { color: var(--ink-mute); }
.gppt-page :is(.trend-discovery-context, .trend-note p, .trend-conversation p, .trend-evidence, .trend-models, .trends-ongoing h2) { color: var(--ink-soft); }
.gppt-page .trends-search { border-bottom-color: var(--rule); }
.gppt-page .trends-search:focus-within { border-bottom-color: var(--accent); }
.gppt-page .trend-topic-icon { background: var(--accent-soft); color: var(--accent); }
.gppt-page .trend-note { background: var(--paper-2); }
.gppt-page .trend-copy { background: var(--paper); color: var(--accent); }
.gppt-page .trend-history summary { color: var(--accent); }
.gppt-page :is(.trend-actions button:hover, .trend-actions [aria-expanded="true"], .trends-ongoing a:hover) { color: var(--accent); }
.gppt-page .trends-more { color: var(--accent); }

/* The shared consent dialog has standalone inline lilac styles. */
.gppt-page .mda-scrim { background: rgb(48 44 58 / 56%); }
.gppt-page .mda-card { background: var(--cp-card); color: var(--ink); box-shadow: 0 30px 80px -20px rgb(48 44 58 / 50%), 0 0 0 1px var(--line); }
.gppt-page .mda-top { background: radial-gradient(120% 90% at 0% 0%, rgb(97 83 126 / 8%), transparent 60%); }
.gppt-page :is(.mda-h i, .mda-tick, .mda-tlink) { color: var(--accent); }
.gppt-page .mda-panel { background: var(--paper-2); border-color: var(--line); }
.gppt-page .mda-pts li { color: var(--ink-soft); }
.gppt-page .mda-pts b { color: var(--ink); }
.gppt-page .mda-tick { background: var(--accent-soft); }
.gppt-page .mda-foot { border-color: var(--line-soft); }
.gppt-page .mda-tlink { border-color: rgb(97 83 126 / 35%); }
.gppt-page .mda-tlink:hover { border-color: var(--accent); }
.gppt-page .mda-btn { background: var(--accent); color: var(--accent-ink); box-shadow: 0 2px 10px rgb(97 83 126 / 28%); }
.gppt-page .mda-btn:hover { background: var(--accent-hover); box-shadow: 0 8px 22px rgb(97 83 126 / 34%); }
.gppt-page .mda-btn:focus-visible { outline-color: var(--accent); }

@media (max-width: 980px) {
  .gppt-page :is(.query-deep-dive-rail, .query-saved.has-dd-rail .query-deep-dive-rail) { box-shadow: 0 -20px 50px -24px rgb(48 44 58 / 40%); }
}