/* Shared screen palette. Printable letters keep their own paper and ink. */
:root {
  color-scheme: light;
  --surface: #fff;
  --surface-raised: #ece9df;
  --accent-ink: #121714;
  --action: #121714;
  --action-ink: #fff;
  --focus: #678125;
  --danger: #a52b2b;
  --danger-bg: #fff0ef;
  --warn: #795016;
  --warn-bg: #fff5df;
  --success: #286547;
  --success-bg: #e8f5ec;
}
:root[data-appearance=dark] {
  color-scheme: dark;
  --paper: #151a17;
  --surface: #202721;
  --surface-raised: #2a332b;
  --ink: #f0f1e8;
  --ink-soft: #dce2d7;
  --night: #111613;
  --muted: #b1baaf;
  --line: #3c463d;
  --white: var(--surface);
  --accent-soft: #303e21;
  --blue: #c6df9f;
  --blue2: #e1efc9;
  --action: var(--accent);
  --action-ink: var(--accent-ink);
  --focus: var(--accent);
  --shadow: 0 12px 36px #0003;
  --danger: #ffb6ad;
  --danger-bg: #442927;
  --warn: #f0cb89;
  --warn-bg: #3c3322;
  --success: #a4ddba;
  --success-bg: #253c2f;
}
:root[data-appearance=dark][data-theme=mint] { --accent-soft: #253f33; --blue: #a7e9cc; }
:root[data-appearance=dark][data-theme=apricot] { --accent-soft: #443528; --blue: #ffc18e; }
body { background: var(--paper); color: var(--ink); }
::selection { background: var(--accent); color: var(--accent-ink); }
:is(a, button, input, textarea, select, summary, [tabindex]):focus-visible,
.report-page :is(button, a, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus); outline-offset: 4px;
}
:is(input, textarea, select) { background: var(--surface); color: var(--ink); border-color: var(--line); }
:is(input, textarea, select):focus { border-color: var(--focus); box-shadow: none; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
label { color: var(--ink-soft); }
mark, .brand-glyph, .brand-sign, .new-chat, .solution-lock { background: var(--accent); color: var(--accent-ink); }
.new-chat:hover { color: var(--accent-ink); }
.primary-button, .btn, .wizard-next, .privacy-cookie-banner button {
  background: var(--action); color: var(--action-ink); border-color: var(--action);
}
.primary-button:hover, .wizard-next:hover:not(:disabled) { background: var(--action); border-color: var(--action); filter: brightness(.92); }
.btn-accent { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--line); }
.ghost-button, .secondary-button { background: var(--surface); color: var(--ink); border-color: var(--line); }
.ghost-button:hover, .secondary-button:hover { background: var(--surface-raised); border-color: var(--line); }
.send-button, .send-button:hover { background: var(--action); color: var(--action-ink); }

/* One compact entry point on both desktop and phone. */
[data-theme-picker] { flex: 0 0 auto; }
.appearance-picker { position: relative; }
.appearance-picker > summary {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 44px; min-height: 44px; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--ink); cursor: pointer;
  list-style: none; font-size: 13px; font-weight: 600;
}
.appearance-picker > summary::-webkit-details-marker { display: none; }
.appearance-picker[open] > summary { background: var(--accent-soft); border-color: var(--focus); }
.appearance-panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 80;
  width: 248px; max-width: calc(100vw - 32px); padding: 18px;
  display: grid; gap: 16px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--surface); color: var(--ink); box-shadow: 0 16px 44px #0003;
  text-align: left; line-height: 1.5; white-space: normal;
}
.appearance-panel > strong { font-size: 16px; }
.appearance-panel label { display: grid; gap: 6px; font-size: 12px; font-weight: 500; margin: 0; }
.appearance-panel select { width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 16px; }
.appearance-panel small { font-size: 12px; color: var(--muted); }
.site-header { position: relative; z-index: 20; }
.topbar { flex-shrink: 0; z-index: 20; }
.topbar > div:has(#page-title) { min-width: 0; }
.top-actions { flex-shrink: 0; }

/* Working application: surfaces and semantic statuses. */
.card, .risk, .step, .issue, .dialog, .composer, .faq-list details,
.prompt-card, .attachment-choices, .report-list-item, .reports-empty,
.report-bundle, .rate-choice { background: var(--surface); color: var(--ink); border-color: var(--line); }
.message.assistant .message-bubble, .question-option, .code-copy { background: var(--surface); color: var(--ink); border-color: var(--line); }
.markdown-block { background: var(--paper); border-color: var(--line); }
.markdown-block-head { border-color: var(--line); }
.composer textarea::placeholder, .composer-note { color: var(--muted); }
.composer-wrap { border-top-color: var(--line); }
.composer:focus-within { border-color: var(--focus); box-shadow: var(--shadow); }
.solution-deliverables { color: var(--ink-soft); }
.clarification-item textarea { background: var(--surface); }
.prompt-card:hover { background: var(--accent-soft); border-color: var(--focus); }
.prompt-icon { color: var(--blue); }
.prompt-arrow { color: var(--muted); }
.side-nav a.active::before { background: var(--accent); }
.test-badge, .job-progress, .source-note, .privacy-cookie-banner,
.calc-tabs, .report-tabs, .preview-frame, .document-preview-stage { background: var(--surface-raised); color: var(--ink); border-color: var(--line); }
.attachment-choice, .file-drop, .rate-preview { background: var(--paper); color: var(--ink); border-color: var(--line); }
.file-drop:hover, .file-drop.dragover { background: var(--accent-soft); border-color: var(--focus); }
.solution-card, .offer-card { background: var(--accent-soft); border-color: var(--line); }
.message.user .message-bubble { border-color: var(--line); }
.status { color: var(--blue); }
.status.error, .dialog-error { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }
.status.success { background: var(--success-bg); color: var(--success); }
.masked-note, .demo-box, .penalty-confirm small { color: var(--warn); }
.document-checklist { background: var(--warn-bg); color: var(--warn); border-color: var(--line); }
.document-checklist > .muted { color: var(--warn); }
.privacy-consent, .privacy-consent small { color: var(--muted); }
.privacy-cookie-banner a, .privacy-consent a { color: var(--blue); }
.calc-tabs button.active, .rate-provenance.preview { background: var(--surface); color: var(--ink); }
.rate-choice:has(input:checked) { border-color: var(--focus); }
.rate-provenance { border-color: var(--line); }
.report-tab { color: var(--muted); }
.toast { background: var(--ink); color: var(--paper); }
.spinner { border-color: var(--line); border-top-color: var(--blue); }
.skeleton { background: linear-gradient(90deg,var(--surface-raised),var(--surface),var(--surface-raised)); background-size: 200% 100%; }
.report-body code { background: var(--surface-raised); }

/* Clarifications use the same palette instead of the old blue cards. */
.clarification-scene { background: var(--paper); }
.clarification-wizard, .wizard-choice, .wizard-back { background: var(--surface); color: var(--ink); border-color: var(--line); }
.wizard-close, .wizard-caption, .wizard-step-label, .wizard-skip, .wizard-note,
.wizard-custom small, .wizard-resume p { color: var(--muted); }
.wizard-counter, .wizard-custom, .wizard-skipped, .wizard-resume { background: var(--surface-raised); color: var(--ink); border-color: var(--line); }
.wizard-custom label { color: var(--ink); }
.wizard-custom textarea { background: var(--surface); color: var(--ink); border-color: var(--line); }
.wizard-custom textarea::placeholder { color: var(--muted); }
.wizard-custom textarea:focus { border-color: var(--focus); box-shadow: none; }
.wizard-segment { background: var(--line); }
.wizard-segment.is-complete, .wizard-segment.is-current { background: var(--blue); }
.wizard-choice > input[type=radio] { background: var(--surface); border-color: var(--muted); }
.wizard-choice > input[type=radio]:checked { border-color: var(--blue); background: radial-gradient(circle,var(--blue) 0 4px,var(--surface) 4.6px); }
.wizard-choice:has(input:checked), .wizard-choice.is-selected,
.wizard-choice:has(input:checked):hover { background: var(--accent-soft); color: var(--ink); border-color: var(--focus); box-shadow: none; }
.wizard-choice:hover, .wizard-back:hover:not(:disabled) { background: var(--surface-raised); border-color: var(--muted); }
.wizard-footer { border-color: var(--line); }
.wizard-choice:has(input:focus-visible), .wizard-close:focus-visible,
.wizard-back:focus-visible, .wizard-next:focus-visible, .wizard-skip:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }

/* Marketing pages retain their dark showcase and white sample document. */
.scenario, .price-card, .case-timeline, .article-callout { background: var(--surface); border-color: var(--line); }
.news-strip, .case-feature { background: var(--surface-raised); }
.price-card.featured { background: var(--night); color: #fff; border-color: var(--night); }
.board-document { color: #121714; }
.board-document { --ink-soft:#2e3530; --muted:#5c645d; }
.hero h1 mark, .hero-board mark, .board-document mark, .step-num { color: var(--accent-ink); }
.board-document mark { background: var(--accent); }
.calc-choice { background: var(--surface); border-color: var(--line); }
.calc-error { color: var(--danger); }
.btn:hover { background: var(--action); color: var(--action-ink); filter: brightness(.92); }
.btn-outline:hover { background: var(--surface-raised); color: var(--ink); }
.btn-accent:hover { background: var(--accent); color: var(--accent-ink); }
.danger-button { background: var(--danger-bg); color: var(--danger); }
.calc-card input, .calc-card select { color: #121714; background: #fff; color-scheme: light; }
.final-cta { color: var(--accent-ink); }
.final-cta .btn { background: #121714; color: #fff; border-color: #121714; }
.offer-update-banner { background: var(--accent); }

/* Legal pages are part of the site; exported/printable documents stay white. */
.legal-page { background: var(--paper); color: var(--ink); }
.legal-document { background: var(--surface); border-color: var(--line); }
.legal-document a { color: var(--blue); }
.legal-document th { background: var(--surface-raised); }
.legal-document th, .legal-document td { border-color: var(--line); }
.legal-draft { background: var(--warn-bg); color: var(--warn); border-color: var(--line); }
.legal-version { color: var(--muted); }
.legal-document .appearance-picker { width: fit-content; margin-left: auto; }
.document-paper { --navy: #20242b; --ink: #20242b; --muted: #59616b; }
.document-paper .report-body code { background: none; }

@media(max-width:600px) {
  .appearance-picker > summary { padding: 9px; }
  .appearance-picker > summary > span { display: none; }
  .site-header { flex-wrap: wrap; gap: 10px; height: auto; min-height: 74px; padding-block: 12px; }
  .site-header .brand-logo { font-size: 19px; gap: 7px; }
  .site-header .brand-glyph { width: 30px; height: 36px; font-size: 27px; }
  .header-actions { gap: 8px; }
  .header-actions .btn-sm { padding: 10px; font-size: 12px; min-height: 44px; }
  .site-header .appearance-picker { position: static; }
  .site-header .appearance-panel { top: 100%; right: 0; }
  .topbar #page-subtitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 50vw; }
}
@media print {
  :root[data-appearance] { color-scheme: light; --paper:#fff; --ink:#20242b; --muted:#59616b; --surface:#fff; --line:#ddd; }
  [data-theme-picker] { display: none !important; }
  .document-preview-stage { background:#fff; }
}