/* Shared by Labs, Notes, Threads and SOS. Artwork lives in branding/*.svg. */
:root {
  --notes-hue: 221;
  --notes-accent: #2563eb;
  --notes-action: #2456b8;
  --notes-hover: #1d4593;
  --notes-soft: #eff6ff;
  --notes-border: #c7daf6;
  --threads-hue: 168;
  --threads-accent: #317e70;
  --threads-action: #286b60;
  --threads-hover: #20564d;
  --threads-soft: #edf9f5;
  --threads-selected: #d5efe6;
  --threads-border: #b7ded2;
  --threads-pastel: #99dac8;
  --sos-accent: #7051b8;
  --sos-action: #6447ad;
  --sos-soft: #f3eff9;
  --sos-border: #d7cbea;
}
.brand > img,
.brand-mark > img,
.app-icon > img,
.threads-heading > img {
  object-fit: contain;
  flex-shrink: 0;
}
.brand > img {
  display: block;
  margin-right: 10px;
}

/* Shared component layer. App styles belong in the lower-priority app layer. */
html[data-product] {
  --ui-font: Inter, ui-sans-serif, system-ui, sans-serif;
  --ui-text: #272335;
  --ui-muted: #655f70;
  --ui-surface: #fcfdfc;
  --ui-radius: 12px;
  --ui-field-radius: 11px;
  --ui-gap: 8px;
  --ui-padding: 14px;
  --ui-control-height: 48px;
  --ui-heading-size: 22px;
  --ui-accent: #7051b8;
  --ui-action: #6447ad;
  --ui-soft: #f3eff9;
  --ui-border: #d7cbea;
  --ui-page: #f0eef7;
  font: 16px var(--ui-font);
  color: var(--ui-text);
  background: var(--ui-page);
  color-scheme: light;
}
html[data-product='notes'] {
  --ui-accent: var(--notes-accent);
  --ui-action: var(--notes-action);
  --ui-soft: var(--notes-soft);
  --ui-border: var(--notes-border);
  --ui-page: #f1f5fc;
  --ui-width: 1040px;
}
html[data-product='threads'] {
  --ui-accent: var(--threads-accent);
  --ui-action: var(--threads-action);
  --ui-soft: var(--threads-soft);
  --ui-border: var(--threads-border);
  --ui-page: #eff7f4;
  --ui-width: 1400px;
}
html[data-product='sos'] {
  --ui-accent: var(--sos-accent);
  --ui-action: var(--sos-action);
  --ui-soft: var(--sos-soft);
  --ui-border: var(--sos-border);
  --ui-width: 430px;
}
html[data-product] * {
  box-sizing: border-box;
}
html[data-product] body {
  margin: 0;
  padding: 28px;
  background: var(--ui-page);
  font-family: var(--ui-font);
  color: var(--ui-text);
}
html[data-product] :is(.app, main:not(.main)) {
  max-width: var(--ui-width);
  margin: auto;
  padding: 26px;
  background: var(--ui-surface);
  min-height: calc(100dvh - 56px);
  border-radius: 24px;
  box-shadow: 0 20px 55px #392b6312;
}
html[data-product] :is(h1, h2, h3, .tab-heading) {
  font-family: var(--ui-font);
  color: var(--ui-text);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
}
html[data-product] h1 {
  font-size: 28px;
}
html[data-product] :is(h2, .tab-heading) {
  font-size: var(--ui-heading-size);
}
html[data-product] :is(p, .muted, .help) {
  color: var(--ui-muted);
  line-height: 1.55;
}
html[data-product] label {
  font-size: 13px;
  font-weight: 700;
}
html[data-product]
  :is(
    input:not([type='checkbox']):not([type='radio']):not([type='file']),
    select,
    textarea
  ) {
  font: 14px var(--ui-font);
  color: var(--ui-text);
  background: white;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-field-radius);
  padding: 13px;
  min-height: var(--ui-control-height);
  max-width: 100%;
}
html[data-product] :is(input[type='checkbox'], input[type='radio']) {
  accent-color: var(--ui-accent);
}
html[data-product]
  :where(
    button:not(.bigbutton):not([role='switch']):not(.back-icon):not(
        .info-icon
      ):not(.delete-alert):not(.thread-delete):not(.logs-refresh-icon),
    .button,
    .transcript-action
  ) {
  font: 700 14px var(--ui-font);
  color: var(--ui-action);
  background: transparent;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  min-height: var(--ui-control-height);
  padding: var(--ui-padding);
  cursor: pointer;
  box-shadow: none;
  letter-spacing: 0;
}
html[data-product]
  :where(
    button:not(.bigbutton):not([role='switch']):not(.back-icon):not(
        .info-icon
      ):not(.delete-alert):not(.thread-delete):not(.logs-refresh-icon),
    .button,
    .transcript-action
  ):hover {
  background: var(--ui-soft);
  transform: none;
}
html[data-product] button:disabled {
  opacity: 0.55;
  cursor: wait;
}
html[data-product] .bigbutton:disabled {
  opacity: 1;
}
html[data-product]
  :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--ui-accent);
  outline-offset: 3px;
}
html[data-product] :is(.tabs, .workspace-tabs) {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin: 16px 0 20px;
  border: 0;
  border-radius: 14px;
  background: var(--ui-page);
}
html[data-product] :is(.tabs, .workspace-tabs) button {
  min-height: 44px;
  padding: 8px;
  flex: 1;
  border: 0;
  border-radius: 10px;
  color: var(--ui-muted);
  background: transparent;
}
html[data-product]
  :is(.tabs button[aria-selected='true'], .workspace-tabs button.active) {
  background: white;
  color: var(--ui-action);
  box-shadow: 0 2px 6px #392b6312;
}
html[data-product]
  :is(
    .panel,
    .notice,
    .header-guidance,
    .local-processing-notice,
    .guest-preview-card
  ) {
  padding: var(--ui-padding);
  border: 1px solid var(--ui-border);
  border-radius: 13px;
  background: var(--ui-soft);
  font-size: 14px;
}
html[data-product] :is(.brand, .product-wordmark) {
  font-family: var(--ui-font);
  letter-spacing: 0;
}
html[data-product] .brand {
  font-size: 22px;
}
html[data-product] .product-wordmark > span {
  color: var(--ui-accent);
}
html[data-product='threads'] :is(aside, section) {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding: 16px 0;
}
html[data-product='threads'] aside {
  border-right: 1px solid var(--ui-border);
  padding-right: 20px;
}
html[data-product] :is(.error, .danger, .transcript-action-delete) {
  color: #973d34;
}
html[data-product] .notice.error {
  border-color: #dbaab1;
  background: #fff7f8;
}
html[data-product] [hidden] {
  display: none !important;
}
@media (max-width: 599px) {
  html[data-product] body {
    padding: 0;
  }
  html[data-product] :is(.app, main:not(.main)) {
    padding: 18px;
    border-radius: 0;
    box-shadow: none;
    min-height: 100dvh;
  }
}
@media (max-width: 800px) {
  html[data-product='threads'] aside {
    border-right: 0;
    padding-right: 0;
  }
}

/* Token-only theme contract for custom responsive layouts. Set data-theme on
   the root or a product card; keep layout rules in the app stylesheet. */
[data-theme] {
  --ui-font: Inter, ui-sans-serif, system-ui, sans-serif;
  --ui-text: #272335;
  --ui-muted: #655f70;
  --ui-surface: #fff;
  --ui-radius: 18px;
  --ui-control-height: 44px;
  --ui-accent: #7051b8;
  --ui-action: #6447ad;
  --ui-soft: #f3eff9;
  --ui-border: #d7cbea;
  --ui-page: #f8f9fc;
  --ui-gradient: linear-gradient(120deg, #7660ae, #b26695 63%, #bd7655);
  --card-accent: var(--ui-accent);
  --card-action: var(--ui-action);
  --card-soft: var(--ui-soft);
  --card-border: var(--ui-border);
}
[data-theme='stay'] {
  --ui-accent: #b26695;
  --ui-action: #91446f;
  --ui-soft: #f9edf4;
  --ui-border: #ead0df;
  --ui-page: #fcf8fb;
  --ui-gradient: linear-gradient(120deg, #7660ae, #b26695 63%, #bd7655);
}
html[data-theme] {
  font-family: var(--ui-font);
  color: var(--ui-text);
  background: var(--ui-page);
}
html[data-theme] :is(button, a):focus-visible {
  outline: 3px solid var(--ui-accent);
  outline-offset: 3px;
}
html[data-theme] .brand span {
  color: var(--ui-accent);
  font-weight: 400;
}
html[data-theme] .moneyhero {
  background: var(--ui-gradient);
}
html[data-theme] .moneyhero :is(.eyebrow, small) {
  color: #fff;
}
html[data-theme] .progress span {
  background: var(--ui-gradient);
}