.chromatic-picker { width:min(290px,calc(100vw - 64px)); display:grid; gap:10px; color:var(--ink); }
.chromatic-picker label { display:grid; grid-template-columns:1fr 110px; align-items:center; gap:8px; font-size:.85rem; }
.chromatic-picker input { width:100%; min-width:0; }
.chromatic-picker input[type=color] { height:40px; padding:3px; cursor:pointer; }
.chromatic-picker p { font-size:.78rem; line-height:1.5; color:var(--ink-soft); }
.chromatic-preview { display:flex; height:40px; border-radius:10px; overflow:hidden; }
.chromatic-preview span { flex:1; }
html[data-theme=chromatic] body { background:var(--beige-light)!important; }
html[data-theme=chromatic] .navbar.unified-navbar { background:var(--green-dark)!important; }
html[data-theme=chromatic] .pj-source { color:var(--green); border-color:var(--border); }
html[data-theme=chromatic] .feed-post-actions-bar { background:var(--beige-light); }
html[data-theme=chromatic] .pj-demo .navbar .logo-dot,
html[data-theme=chromatic] .pj-demo .navbar .avatar-circle { background:var(--orange-bg)!important; color:var(--ink)!important; }
html[data-theme=chromatic] .pj-demo .pj-post-title { color:var(--ink); }
html[data-theme=chromatic] .pj-demo .pj-share,
html[data-theme=chromatic] .pj-demo .feed-post-image { background:var(--beige); }
html[data-theme=chromatic] .pj-demo .feed-post { border-color:var(--border-soft); }
html[data-theme=chromatic] .pj-demo .conversation-ticker { background:var(--green-dark); border-color:var(--green); }
html[data-theme=chromatic] .pj-demo .conversation-ticker .ticker-label,
html[data-theme=chromatic] .pj-demo .conversation-ticker b { color:white; }
html[data-theme=chromatic] .pj-demo .pj-source:hover { background:var(--green-bg); }
html[data-theme=chromatic] .pj-demo .pj-source:focus-visible { outline-color:var(--green); }

/* Keep the palette within the viewport on narrow and short screens. */
#theme-popup, #theme-popup-public {
  position: fixed !important;
  top: clamp(58px, 9vh, 96px) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
  width: min(330px, calc(100vw - 24px));
  min-width: 0 !important;
  max-height: calc(100dvh - 112px);
  overflow-y: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
  z-index: 10010 !important;
}
#theme-popup .chromatic-picker, #theme-popup-public .chromatic-picker {
  width: 100%;
  min-width: 0;
}
@media (max-width: 480px) {
  #theme-popup, #theme-popup-public {
    top: 12px !important;
    max-height: calc(100dvh - 24px);
  }
  .chromatic-picker label { grid-template-columns: minmax(0, 1fr) minmax(74px, 110px); }
}