/* Workspace page: the appearance popover in the top bar (the theme picker itself is <hanna-theme-picker>). */
.topbar-right { position: relative; }
.appearance-button {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line, #d9dfdb);
  background: transparent; color: inherit; font-size: 16px; line-height: 1; cursor: pointer;
}
.appearance-button:hover, .appearance-button[aria-expanded="true"] { border-color: var(--green, #2f6f5e); }
.appearance-pop {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 50; width: min(560px, calc(100vw - 32px));
  max-height: min(70vh, 640px); overflow: auto; padding: 16px; border-radius: 14px;
  border: 1px solid var(--line, #d9dfdb); box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
  background: var(--ht-panel, #fff);
}
.appearance-pop[hidden] { display: none; }

/* After the generated colour map: the brand mark stays the theme's accent colour. */
html[data-hanna-look="hanna"] .brand-symbol { background: var(--ht-accent); color: var(--ht-accent-ink); }
html[data-hanna-look="hanna"] .brand-symbol span { color: var(--ht-accent-ink); }
html[data-hanna-look="hanna"] .brand-dot { color: var(--ht-accent); }

/* The Hanna Workspace seal in place of the old h mark (all looks). */
.brand hanna-seal { margin-right: 2px; }
.hero-seal { display: grid; place-items: center; margin-right: 24px; }
.orbit-center.orbit-seal, html[data-hanna-look] .orbit-center.orbit-seal { background: transparent; box-shadow: none; transform: none; width: 110px; height: 110px; top: 55px; }
@media (max-width: 760px) { .hero-seal { display: none; } }