/* PHAS2 private theme layer. Brand tokens, artwork and source media stay intact. */
html[data-phas2-theme] {
  --p2-theme-bg: #fffaf0;
  --p2-theme-surface: #f4f2ee;
  --p2-theme-raised: #ffffff;
  --p2-theme-text: #242321;
  --p2-theme-muted: #625c54;
  --p2-theme-border: #a49b8d;
  --p2-theme-accent: #ff6500;
  --p2-theme-brand-ink: #242321;
  --p2-theme-focus: #ff6500;
  color-scheme: light;
}
html[data-phas2-theme="dark"] {
  --p2-theme-bg: #181817;
  --p2-theme-surface: #242321;
  --p2-theme-raised: #302e2a;
  --p2-theme-text: #eee7dc;
  --p2-theme-muted: #c8c1b7;
  --p2-theme-border: #817b72;
  color-scheme: dark;
  background: var(--p2-theme-bg);
  color: var(--p2-theme-text);
}
html[data-phas2-theme] :is(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--p2-theme-focus) !important;
  outline-offset: 3px !important;
}
html[data-phas2-theme="dark"] body { background: var(--p2-theme-bg); color: var(--p2-theme-text); }
html[data-phas2-theme="dark"] ::selection { background: var(--p2-theme-accent); color: var(--p2-theme-brand-ink); }
html[data-phas2-theme="dark"] :is(.site-head, .site-head.shoplive-studio-header) {
  background: rgba(24, 24, 23, .98); color: var(--p2-theme-text); border-color: var(--p2-theme-border);
}
html[data-phas2-theme="dark"] .site-head .site-nav a,
html[data-phas2-theme="dark"] body[data-tone="dark"] .site-head .site-nav a { color: var(--p2-theme-text); background: transparent; }
html[data-phas2-theme="dark"] .site-head .site-nav a:hover { color: var(--p2-theme-accent); }
html[data-phas2-theme="dark"] .site-head .brand .on-light { opacity: 0; }
html[data-phas2-theme="dark"] .site-head .brand .on-dark { opacity: 1; }
html[data-phas2-theme="dark"] .p2-subnav { background: var(--p2-theme-surface); border-color: var(--p2-theme-border); }
html[data-phas2-theme="dark"] .p2-subnav a { color: var(--p2-theme-text); }

/* Main landing: interface surfaces only; do not select the .planes subtree. */
html[data-phas2-theme="dark"][data-phas2-page="studio"] :is(.hero-stage, .gallery-room, .work, .studio, .studio.quiet-studio, .site-foot) {
  background: var(--p2-theme-bg); color: var(--p2-theme-text); border-color: var(--p2-theme-border);
}
html[data-phas2-theme="dark"][data-phas2-page="studio"] :is(.side-copy, .quiet-studio-name, .quiet-studio-role, .quiet-studio-subtitle, .quiet-studio-intro, .quiet-upcoming-item h4, .p2-reels-feature, .studio-art-caption) { color: var(--p2-theme-text); }
html[data-phas2-theme="dark"][data-phas2-page="studio"] :is(.section-kicker, .gallery-room p, .quiet-coming-soon h3, .quiet-upcoming-item p, .project-availability, .contact-art-credit, .p2-reels-feature__description, .site-foot) { color: var(--p2-theme-muted); }
html[data-phas2-theme="dark"][data-phas2-page="studio"] #contact :is(.project-availability, .contact-art-credit) { color: var(--p2-theme-muted); }
html[data-phas2-theme="dark"][data-phas2-page="studio"] :is(.p2-reels-feature, .quiet-upcoming-item, .studio-art-caption) { border-color: var(--p2-theme-border); }
html[data-phas2-theme="dark"][data-phas2-page="studio"] :is(.deeper-link, .p2-reels-feature__cta, .site-foot a, .slot-list a, [data-studio-motion]) { color: var(--p2-theme-text); }
html[data-phas2-theme="dark"][data-phas2-page="studio"] [data-studio-motion] { border-color: var(--p2-theme-border); }
html[data-phas2-theme="dark"][data-phas2-page="studio"] .p2-brands { --p2-logo-grey: var(--p2-theme-muted); background: var(--p2-theme-surface); }
html[data-phas2-theme="dark"][data-phas2-page="studio"] .p2-brands__toggle { background: var(--p2-theme-surface); }
html[data-phas2-theme="dark"][data-phas2-page="studio"] .hero-explore { color: var(--p2-theme-brand-ink); }
html[data-phas2-theme="dark"][data-phas2-page="studio"] .hero-explore:hover { color: var(--p2-theme-brand-ink); }

/* Fuller studio: native service disclosure and existing film/media panels. */
html[data-phas2-theme="dark"][data-phas2-page="explore"] :is(.services, .bts-filmstrip-v1, .contact, footer) { background: var(--p2-theme-bg); color: var(--p2-theme-text); border-color: var(--p2-theme-border); }
html[data-phas2-theme="dark"][data-phas2-page="explore"] .services .service { background: transparent; color: var(--p2-theme-text); }
html[data-phas2-theme="dark"][data-phas2-page="explore"] #services.services-review :is(.services-review-row h3, .services-review-scope > p, .services-review-note-link a, .plus, .shoplive-service-link) { color: var(--p2-theme-text); }
html[data-phas2-theme="dark"][data-phas2-page="explore"] #services.services-review :is(.services-lead > p, .services-review-number, .services-review-scope ul, .services-review-note-link p, .service-body > p, .service-number) { color: var(--p2-theme-muted); }
html[data-phas2-theme="dark"][data-phas2-page="explore"] #services.services-review :is(.services-review-row, .services-review-shoplive) { border-color: var(--p2-theme-border); }
html[data-phas2-theme="dark"][data-phas2-page="explore"] :is(.lab-all, .lab-card a, .contact-email, .text-link) { color: var(--p2-theme-text); }
html[data-phas2-theme="dark"][data-phas2-page="explore"] :is(.lab-head p, .lab-model span, .lab-meta, .service-body .scope-note, footer) { color: var(--p2-theme-muted); }
html[data-phas2-theme="dark"][data-phas2-page="explore"] :is(.contact-email, .contact) { border-color: var(--p2-theme-border); }

/* SHOPLIVE retains its photography, orange bands and official yellow marks. */
html[data-phas2-theme="dark"][data-phas2-page="shoplive"] :is(.showcase, .campaign, .real-business, .slp-section, .process-expanded, .process, .inquiry, .handover) { background: var(--p2-theme-surface); color: var(--p2-theme-text); border-color: var(--p2-theme-border); }
html[data-phas2-theme="dark"][data-phas2-page="shoplive"] :is(.slp-card, input:not([type="hidden"]), textarea, select) { background: var(--p2-theme-raised); color: var(--p2-theme-text); border-color: var(--p2-theme-border); }
html[data-phas2-theme="dark"][data-phas2-page="shoplive"] :is(.section-index, .audiences span, .section-heading > p, .stage-number, .stage-description span, .setup-intro, .crew-row p, .scope-note, .questions details > div, .affiliation, .inquiry .email-note, label span, .field-help, .privacy-note, .footer p, .illustration-note, .devices figcaption, .slp-footnote, .slp-card > p:not(.slp-price):not(.slp-basis), .slp-heading > p, .real-business .section-heading > div:last-child p) { color: var(--p2-theme-muted); }
html[data-phas2-theme="dark"][data-phas2-page="shoplive"] :is(.process-chapters, .handover .section-index) { color: var(--p2-theme-text); }
html[data-phas2-theme="dark"][data-phas2-page="shoplive"] :is(.process-chapters > li, .process-chapter-details, .slp-details, .questions details, .audiences, .audiences li, .crew-row, .small-label) { border-color: var(--p2-theme-border); }
html[data-phas2-theme="dark"][data-phas2-page="shoplive"] .process-chapter-number { color: var(--p2-theme-brand-ink); }
html[data-phas2-theme="dark"][data-phas2-page="shoplive"] .benefits span { color: var(--p2-theme-accent); border-color: var(--p2-theme-accent); }
html[data-phas2-theme="dark"][data-phas2-page="shoplive"] :is(.button, .nav-contact, .process-rail, .support-section, .support-section .section-index) { color: var(--p2-theme-brand-ink); }
html[data-phas2-theme="dark"][data-phas2-page="shoplive"] .support-section .button { background: var(--p2-theme-brand-ink); color: #fffaf0; }
html[data-phas2-theme="dark"][data-phas2-page="shoplive"] .slp-card-featured { background: #111110; color: var(--p2-theme-text); border-color: var(--p2-theme-border); }
html[data-phas2-theme="dark"][data-phas2-page="shoplive"] :is(.whatnot-presence, .whatnot-context, .shoplive-platform-mini) { background: #ffe414; color: var(--p2-theme-brand-ink); }
html[data-phas2-theme="dark"][data-phas2-page="shoplive"] :is(.hero-photo, .platform-hero, .footer-dark) { color: #fffaf0; }
html[data-phas2-theme="dark"][data-phas2-page="shoplive"] :is(.hero-description, .hero-caption, .hero-photo .text-link, .platform-copy .text-link) { color: #fffaf0; }
html[data-phas2-theme="dark"][data-phas2-page="shoplive"] :is(input, textarea)::placeholder { color: var(--p2-theme-muted); opacity: 1; }
html[data-phas2-theme="dark"][data-phas2-page="shoplive"] :is(input, textarea):user-invalid { border-color: #ffae8c; }
html[data-phas2-theme="dark"][data-phas2-page="shoplive"] input:autofill { background: var(--p2-theme-raised); color: var(--p2-theme-text); }
html[data-phas2-theme="dark"][data-phas2-page="shoplive"] input:-webkit-autofill { -webkit-text-fill-color: var(--p2-theme-text); box-shadow: 0 0 0 100px var(--p2-theme-raised) inset; caret-color: var(--p2-theme-text); }

/* PHAS2 Insights only; these rules never load as an active theme on CA pages. */
html[data-phas2-theme="dark"][data-phas2-page="insights"] :is(.site-header, .site-footer, .story-card, .article-return, .article-prose .byline, .article-prose details, .article-prose .table-wrap, .article-prose .table-scroll, .article-prose th, .article-prose td) { border-color: var(--p2-theme-border); }
html[data-phas2-theme="dark"][data-phas2-page="insights"] :is(.masthead-count, .masthead-note, .section-heading p, .card-topic, .card-summary, .card-bottom .story-meta, .site-footer p, .article-navigation span, .article-prose .dek, .article-prose .byline, .article-prose .note) { color: var(--p2-theme-muted); }
html[data-phas2-theme="dark"][data-phas2-page="insights"] :is(.card-number, .footer-name) { color: var(--p2-theme-text); }
html[data-phas2-theme="dark"][data-phas2-page="insights"] :is(.feature-figure, .article-prose figure, .article-prose .callout, .article-prose .cta, .article-prose .author, .article-prose .usecase, .media-unavailable) { background: var(--p2-theme-surface); color: var(--p2-theme-text); }
html[data-phas2-theme="dark"][data-phas2-page="insights"] :is(.featured-story, .article-prose thead, .article-prose pre) { background: #111110; color: var(--p2-theme-text); }
html[data-phas2-theme="dark"][data-phas2-page="insights"] :is(.feature-summary, .feature-copy .story-meta) { color: var(--p2-theme-muted); }
html[data-phas2-theme="dark"][data-phas2-page="insights"] :is(.card-arrow, .article-prose .button, .review-label) { color: var(--p2-theme-brand-ink); }
html[data-phas2-theme="dark"][data-phas2-page="insights"] .brand-link { background: url('/phas2/wordmark-ivory-v2.svg') left center / contain no-repeat; }
html[data-phas2-theme="dark"][data-phas2-page="insights"] .brand-link img { opacity: 0; }

/* Fixed-input Motion Lab: preserve media and reference art pixels. */
html[data-phas2-theme="dark"][data-phas2-page="motion-lab"] :is(pre, .prompt) { background: var(--p2-theme-surface); color: var(--p2-theme-text); border-color: var(--p2-theme-border); }
html[data-phas2-theme="dark"][data-phas2-page="motion-lab"] :is(.site-header, .inputs, .run-bottom, footer) { border-color: var(--p2-theme-border); }
html[data-phas2-theme="dark"][data-phas2-page="motion-lab"] :is(.eyebrow span, .intro > p:last-child, .fixed-label small, .copy-status, .run h2 span, .run-bottom p, .run-details summary, dd, footer) { color: var(--p2-theme-muted); }
html[data-phas2-theme="dark"][data-phas2-page="motion-lab"] .intro .eyebrow { color: var(--p2-theme-accent); }
html[data-phas2-theme="dark"][data-phas2-page="motion-lab"] button { background: var(--p2-theme-raised); color: var(--p2-theme-text); border-color: var(--p2-theme-border); }
html[data-phas2-theme="dark"][data-phas2-page="motion-lab"] .reference { mix-blend-mode: normal; }

/* Directory has its own deliberately dark baseline; Light must be real too. */
html[data-phas2-theme][data-phas2-page="directory"] body { background: var(--p2-theme-bg); color: var(--p2-theme-text); }
html[data-phas2-theme][data-phas2-page="directory"] .row { background: var(--p2-theme-surface); border-color: var(--p2-theme-border); }
html[data-phas2-theme][data-phas2-page="directory"] :is(.row.header, .intro, .note, footer) { color: var(--p2-theme-muted); }
html[data-phas2-theme][data-phas2-page="directory"] .row.header { background: transparent; }
html[data-phas2-theme][data-phas2-page="directory"] :is(header, footer) { border-color: var(--p2-theme-border); }
html[data-phas2-theme][data-phas2-page="directory"] .url { color: var(--p2-theme-text); }

/* Claw Code: retain orange highlights and the original dark code/hero panels. */
html[data-phas2-theme="dark"][data-phas2-page="claw-code"] a { color: inherit; }
html[data-phas2-theme="dark"][data-phas2-page="claw-code"] :is(.label, .came, .lede, .si, .pnote, .foot) { color: var(--p2-theme-muted); }
html[data-phas2-theme="dark"][data-phas2-page="claw-code"] :is(.came b, .see b) { color: var(--p2-theme-text); }
html[data-phas2-theme="dark"][data-phas2-page="claw-code"] :is(.win, .see) { background: var(--p2-theme-surface); color: var(--p2-theme-muted); }
html[data-phas2-theme="dark"][data-phas2-page="claw-code"] :is(.s, .foot) { border-color: var(--p2-theme-border); }
html[data-phas2-theme="dark"][data-phas2-page="claw-code"] :is(.hero, .code, .flow, .sub.w .l) { background: var(--p2-theme-brand-ink); color: #fffaf0; }
html[data-phas2-theme="dark"][data-phas2-page="claw-code"] :is(.pill, .btn, .card, .card .label, .sub .l) { color: var(--p2-theme-brand-ink); }
html[data-phas2-theme="dark"][data-phas2-page="claw-code"] .btn:hover { color: var(--p2-theme-brand-ink); }

/* Theme selection adds no animation. Existing reduced-motion rules remain. */
@media (prefers-reduced-motion: reduce) {
  html[data-phas2-theme] { scroll-behavior: auto; }
}

/* Isolated PHAS2 utility. It does not change page tokens, body spacing or motion. */
.phas2-theme-control,
.phas2-theme-control * { box-sizing: border-box; }
.phas2-theme-control {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 80;
  width: max-content;
  max-width: calc(100vw - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--p2-theme-text, #242321);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
}
.phas2-theme-control__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 108px;
  min-height: 44px;
  max-width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--p2-theme-border, #b6ada1);
  border-radius: 24px;
  background: var(--p2-theme-bg, #fffaf0);
  color: var(--p2-theme-text, #242321);
  list-style: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}
.phas2-theme-control__summary::-webkit-details-marker { display: none; }
.phas2-theme-control__summary::marker { content: ''; }
.phas2-theme-control__choice {
  color: var(--p2-theme-muted, #625c54);
  font-weight: 400;
}
.phas2-theme-control__panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  width: 240px;
  max-width: calc(100vw - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  max-height: calc(100dvh - 84px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px;
  border: 1px solid var(--p2-theme-border, #b6ada1);
  border-radius: 12px;
  background: var(--p2-theme-bg, #fffaf0);
  color: var(--p2-theme-text, #242321);
}
.phas2-theme-control__group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.phas2-theme-control__legend {
  margin: 0 0 6px;
  padding: 0;
  color: var(--p2-theme-text, #242321);
  font-size: 13px;
  font-weight: 600;
}
.phas2-theme-control__option {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  max-width: 100%;
  margin: 0;
  padding: 8px;
  border-radius: 8px;
  color: var(--p2-theme-text, #242321);
  cursor: pointer;
  font-size: 14px;
  line-height: 1.4;
}
.phas2-theme-control .phas2-theme-control__option-text {
  color: inherit;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
}
/* Beat existing page-wide form rules without changing those forms. */
.phas2-theme-control input.phas2-theme-control__radio {
  display: inline-block;
  flex: 0 0 18px;
  width: 18px;
  min-width: 0;
  max-width: 18px;
  height: 18px;
  min-height: 0;
  max-height: 18px;
  margin: 0;
  padding: 0;
  border: initial;
  border-radius: 50%;
  appearance: auto;
  background: transparent;
  box-shadow: none;
  color-scheme: inherit;
  accent-color: var(--p2-theme-accent, #ff6500);
}
.phas2-theme-control__status {
  margin: 10px 0 0;
  color: var(--p2-theme-muted, #625c54);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.phas2-theme-control__status:empty { display: none; }
.phas2-theme-control__summary:focus-visible,
.phas2-theme-control__radio:focus-visible {
  outline: 3px solid var(--p2-theme-accent, #ff6500);
  outline-offset: 3px;
}

/* Existing inline text colours in the Claw Code prose are UI, not artwork. */
html[data-phas2-theme="dark"][data-phas2-page="claw-code"] .came :is(b, a)[style] { color: var(--p2-theme-text) !important; }

/* ID-scoped work wall overrides its legacy light background without art-token changes. */
html[data-phas2-theme="dark"][data-phas2-page="studio"] #work.work-without-tvs { background: var(--p2-theme-bg); }
html[data-phas2-theme="light"] { --p2-theme-focus: #242321; }
html[data-phas2-theme="light"] .phas2-theme-control input.phas2-theme-control__radio { accent-color: #242321; }
html[data-phas2-theme="light"][data-phas2-page="directory"] :is(.eyebrow, .row a.open) { color: #a44000; }

/* Reserve a footer-only scroll landing beneath the fixed preference utility. */
html[data-phas2-theme] body::after { content: ""; display: block; height: 80px; pointer-events: none; }
html[data-phas2-theme] { scroll-padding-bottom: 88px; }

/* The existing small-print article note needs readable contrast in both palettes. */
html[data-phas2-theme][data-phas2-page="insights"] .article-prose p[style="color:#777;font-size:13px"] { color: var(--p2-theme-muted) !important; }

/* The landing has its own bottom hero control row; keep Theme clear of its Reels CTA. */
html[data-phas2-theme][data-phas2-page="studio"] .phas2-theme-control { bottom: calc(108px + env(safe-area-inset-bottom, 0px)); }
html[data-phas2-theme][data-phas2-page="studio"] body::after { height: 176px; }