/* One appearance choice for every website surface. Brand artwork and real captures retain their pixels. */
html[data-qn-theme="light"] {
  color-scheme: light;
  --paper: #f4f3ef; --surface: #fffefa; --ink: #242a32; --muted: #596472;
  --line: #cbd0d5; --soft: #e7ebef; --orange-dark: #a04421; --orange-soft: #f5e6dc;
  --red: #a82e29; --green: #28734b; --green-soft: #e7f1ea;
  --theme-art: url('/assets/img/brand-light.webp'); --theme-illustration: url('/assets/img/brand-light.webp'); --brand-art: url('/assets/img/brand-dark.webp');
  --theme-control: #ffffffb8; --theme-hover: #fffffff0; --theme-active: #e0e5eb;
  --theme-primary: #df9b70; --theme-primary-ink: #2b1b14; --theme-primary-art: url('/assets/img/brand-accent.webp');
  --theme-error: #fbe9e6; --theme-warn: #f5ead7; --theme-warn-ink: #74511a;
  --theme-shadow: 0 12px 32px #16213014;
}
html[data-qn-theme="dark"] {
  color-scheme: dark;
  --paper: #151c26; --surface: #202a37; --ink: #f1f3f6; --muted: #bbc5d2;
  --line: #465363; --soft: #2c3848; --orange-dark: #eab794; --orange-soft: #3b2c25;
  --red: #ffaaa2; --green: #99d5b0; --green-soft: #203d31;
  --theme-art: url('/assets/img/brand-surface-dark.webp'); --theme-illustration: url('/assets/img/brand-dark.webp'); --brand-art: url('/assets/img/brand-dark.webp');
  --theme-control: #374456a8; --theme-hover: #46556bd9; --theme-active: #52647c;
  --theme-primary: #df9b70; --theme-primary-ink: #2b1b14; --theme-primary-art: url('/assets/img/brand-accent.webp');
  --theme-error: #422c30; --theme-warn: #3b3426; --theme-warn-ink: #e7c78f;
  --theme-shadow: 0 12px 32px #060a1240;
}

html[data-qn-theme] body {
  color: var(--ink); background: var(--paper) var(--theme-art) center top / cover;
  background-attachment: scroll;
}
html[data-qn-theme] body :is(.nav,footer,.hero,.page-mast,.feature-band,.assignment-modes,.site-next,.closing,.faq-section,.compatibility-formats,.product-tour) {
  color: var(--ink); background: var(--paper); border-color: var(--line);
}
html[data-qn-theme] body :is(.hero,.page-mast) { background: var(--paper) var(--theme-art) bottom right / cover; }
html[data-qn-theme] body #how.product-tour { background: var(--paper); }
html[data-qn-theme] body :is(.card,.plan,.plan.featured,.plan:hover,.plan.featured:hover,.home-plan,.help-content,.account-setup,.install-status,.step-visual,.product-evidence) {
  color: var(--ink); background: var(--surface); border-color: var(--line); box-shadow: var(--theme-shadow);
}
html[data-qn-theme] body .plan.featured { border-color: var(--orange-dark); }
html[data-qn-theme] body :is(.brand,.nav-links>a,.nav-toggle,.field label,.help-article strong,.legal strong,.home-allowance strong,.feature-list strong,.mode-foot strong,.pricing-faq .faq summary,.tour-step[aria-selected=true]) { color: var(--ink); }
html[data-qn-theme] body :is(.nav .brand-mark,footer .brand-mark) { color-scheme: inherit; }
html[data-qn-theme] body .brand-mark { width: 1.38em; height: 1.38em; border-radius: 0; }
html[data-qn-theme] body :is(.product-shot figcaption,.product-evidence figcaption,.site-next p) { color: var(--muted); }
html[data-qn-theme] body :is(.hero .lead,.hero-note,.hero-kicker,.hero-formats,.section-head>p,.steps p,.feature-copy>p,.feature-list li,.feature-copy .example-note,.home-allowance,.faq p,.closing p,.pricing-page .section-head>p,.plan-sub,.price>span,.plan li,.plan.featured .plan-sub,.plan.featured .price>span,.plan.featured li,.pricing-note,.plan-inclusions,.packs-section p,.pack-list span,.pricing-faq .faq p,.auth-intro p,.auth-page .auth-foot,.auth-page .sub,.install-overview>p,.install-status p,.install-onboarding p,.install-overview .small,.account-setup p,.legal p,.legal li,.legal .updated,.page-mast .lead,.mode-heading>p,.mode-options p,.mode-foot p,.site-footer nav a,.site-footer .copyright,.compatibility-table thead th,.compatibility-table tbody td,.compatibility-note,.table-scroll-hint,.help-topics a,.help-article p,.help-article li,.help-empty p,.tour-detail,.tour-step,.tour-number,.tour-footnote,.tour-mobile-description) { color: var(--muted); }
html[data-qn-theme] body :is(.eyebrow,.hero h1 span,.step-num,.plans-link,.link,.hero .eyebrow,.mode-number,.mode-heading .eyebrow,.help-article .eyebrow,.help-empty .eyebrow,.help-article a,.help-support p a:not(.btn),.help-search-field button,.help-topics a>span,.install-status #install-availability,.install-overview .link,.setup-secondary,.explore-links strong span,.limitation-list article>span,.pricing-page .section-head>.eyebrow) { color: var(--orange-dark); }
html[data-qn-theme] body :is(.nav-links>a:hover,.nav-links>a[aria-current=page],.site-footer nav a:hover,.faq summary:hover) { color: var(--ink); }
html[data-qn-theme] body :is(.nav-links,.hero-formats,.home-allowance,.feature-list li,.plan ul,.plan.featured ul,.packs-section,.plan-inclusions,.pack-list li,.pricing-faq .faq details,.install-onboarding li,.compatibility-table,.compatibility-table th,.compatibility-table td,.mode-options article,.mode-foot,.explore-links a,.tour-step) { border-color: var(--line); }
html[data-qn-theme] body :is(.input,.field select,.tbl select,.help-search-field,.choice) { background: var(--theme-control); color: var(--ink); border-color: var(--line); }
html[data-qn-theme] body :is(input,textarea)::placeholder { color: var(--muted); }
html[data-qn-theme] body :is(.help-topics a:hover,.dashboard-nav a:hover:not([aria-disabled=true]),.choice:hover:not(:disabled),.tbl tbody tr:hover) { background: var(--theme-hover); }
html[data-qn-theme] body .tbl th { background: var(--soft); color: var(--muted); border-color: var(--line); }
html[data-qn-theme] body .tbl td { border-color: var(--line); }
html[data-qn-theme] body :is(.help-topics a[aria-current],.dashboard-nav a:first-child,.dashboard-nav a.active,.choice.current,.help-article .help-note,.tag,.plan-badge) { background: var(--soft); color: var(--ink); border-color: var(--line); }
html[data-qn-theme] body :is(.tag.admin,.tag.paid) { color: var(--orange-dark); background: var(--orange-soft); }
html[data-qn-theme] body :is(.billing-toggle,.stats,.stat,.spark) { color: var(--ink); background: var(--surface); border-color: var(--line); }
html[data-qn-theme] body .billing-toggle button { color: var(--muted); --billing-hover: var(--theme-hover); }
html[data-qn-theme] body .billing-toggle button.on { background: var(--theme-primary); color: var(--theme-primary-ink); border-color: transparent; }
html[data-qn-theme] body .notice.error { background: var(--theme-error); color: var(--red); border-color: var(--red); }
html[data-qn-theme] body .notice.ok { background: var(--green-soft); color: var(--green); border-color: var(--green); }
html[data-qn-theme] body :is(.notice.warn,.purchase-availability) { background: var(--theme-warn); color: var(--theme-warn-ink); border-color: var(--line); }
html[data-qn-theme] body :is(.bar,.spark i.empty) { background: var(--soft); }
html[data-qn-theme] body :is(.bar i,.spark i) { background: var(--orange-dark); }
html[data-qn-theme] body .bar.full i { background: var(--red); }

/* Keep button text stable through hover, focus, active and disabled states. */
html[data-qn-theme] body .btn-secondary {
  --secondary-rest: var(--theme-control); --secondary-hover: var(--theme-hover); --secondary-active: var(--theme-active);
  --secondary-ink: var(--ink); --secondary-border: var(--line); --secondary-border-hover: var(--muted);
}
html[data-qn-theme] body .btn-ghost { --ghost-ink: var(--ink); --ghost-hover: var(--theme-hover); --ghost-active: var(--theme-active); }
html[data-qn-theme] body :is(.btn-primary,.plan.featured .btn-primary) { color: var(--theme-primary-ink); background: var(--theme-primary) var(--theme-primary-art) center / cover; border-color: var(--theme-primary); }
html[data-qn-theme] body :is(.btn-primary:hover:not(:disabled),.plan.featured .btn-primary:hover:not(:disabled)) { color: var(--theme-primary-ink); border-color: var(--orange-dark); filter: none; }
html[data-qn-theme] body :is(.btn-primary:active:not(:disabled),.plan.featured .btn-primary:active:not(:disabled)) { color: var(--theme-primary-ink); filter: none; }
html[data-qn-theme] body :is(.plan button:disabled,.plan.featured button:disabled) { color: var(--muted); background: var(--soft); border-color: var(--line); opacity: 1; }
html[data-qn-theme] body .btn-danger { color: var(--red); background: var(--theme-error); border-color: var(--line); }
html[data-qn-theme] body .btn-danger:hover:not(:disabled) { color: var(--red); border-color: var(--red); background: var(--theme-error); }
html[data-qn-theme] body .nav-toggle { background: var(--theme-control); border-color: var(--line); }
html[data-qn-theme] body .nav-toggle:hover:not(:disabled) { background: var(--theme-hover); border-color: var(--muted); }
html[data-qn-theme] body input[type=file]::file-selector-button { background: var(--theme-control); color: var(--ink); border-color: var(--line); }
html[data-qn-theme] body input[type=file]:hover::file-selector-button { background: var(--theme-hover); color: var(--ink); border-color: var(--muted); }

html[data-qn-theme] body :is(.tour-showcase,.tour-dialog,.tour-dialog-bar,.tour-dialog-hint,.install-product figcaption) { color: var(--ink); background-color: var(--surface); border-color: var(--line); }
html[data-qn-theme] body .tour-showcase { background-image: var(--theme-illustration); }
html[data-qn-theme] body .tour-caption { color: var(--ink); }
html[data-qn-theme] body .tour-player-header { color: var(--ink); }
html[data-qn-theme] body .tour-writing-options { background: var(--theme-control); }
html[data-qn-theme] body .tour-writing-options button { color: var(--muted); }
html[data-qn-theme] body .tour-writing-options button[aria-pressed=true] { color: var(--ink); background: var(--theme-hover); }
html[data-qn-theme] body .tour-enlarge { color: var(--ink); background: var(--theme-control); border-color: var(--line); }
html[data-qn-theme] body .tour-enlarge:hover:not(:disabled) { background: var(--theme-hover); border-color: var(--muted); }
html[data-qn-theme] body .tour-enlarge:active:not(:disabled) { background: var(--theme-active); }
html[data-qn-theme] body .tour-step:hover:not(:disabled) { background: var(--theme-hover); border-color: var(--muted); }
html[data-qn-theme] body .tour-step[aria-selected=true] .tour-detail { color: var(--ink); }
html[data-qn-theme] body .tour-step[aria-selected=true] .tour-number { color: var(--orange-dark); }
html[data-qn-theme] body .tour-step[aria-selected=true]::before { background: var(--orange-dark); }

/* Small reading containers remain clean; artwork belongs on the larger page surfaces. */
html[data-qn-theme="light"] body :is(.home-pricing,.pricing,pre,.install-aside) { background-image: none; }

.site-theme { position: relative; flex: none; }
.site-theme-trigger { display: grid; place-items: center; width: 39px; height: 39px; padding: 0; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--theme-control); cursor: pointer; }
.site-theme-trigger:hover { background: var(--theme-hover); border-color: var(--muted); }
.site-theme-trigger[aria-expanded=true] { background: var(--theme-active); }
.site-theme-icon { display: block; width: 15px; height: 15px; border: 1.5px solid currentColor; border-radius: 50%; overflow: hidden; }
.site-theme-icon::before { content: ''; display: block; width: 50%; height: 100%; background: currentColor; }
.site-theme-menu { position: absolute; right: 0; top: calc(100% + 9px); z-index: 100; width: 158px; padding: 5px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--theme-shadow); }
.site-theme-menu button { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 39px; padding: 8px 11px; border: 0; border-radius: 5px; color: var(--ink); background: transparent; font-size: 13px; text-align: left; }
.site-theme-menu button:hover { background: var(--theme-hover); }
.site-theme-menu button[aria-checked=true]::after { content: '✓'; color: var(--orange-dark); }
.site-theme-status { position: absolute; right: 0; top: calc(100% + 9px); width: 245px; z-index: 101; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--red); background: var(--surface); box-shadow: var(--theme-shadow); font-size: 12px; line-height: 1.5; }
@media(max-width:540px) {
  .nav > .wrap { column-gap: 10px; }
  .nav-actions { gap: 8px; }
  .nav .nav-cta { display: none; }
  .site-theme-trigger, .nav-toggle { min-width: 44px; min-height: 44px; }
  .site-theme-menu button, .help-search-field button { min-height: 44px; min-width: 44px; }
}

html[data-qn-theme] body :focus { outline: none; }