/* Site chrome themes (home, account, admin, embed). Poll displays use .screen-theme-* only. */

html[data-hyst-theme="light"] {
  --site-bg: #f8fafc;
  --site-text: #0f172a;
  --site-heading: #020617;
  --site-body: #334155;
  --site-text-muted: #475569;
  --site-text-soft: #334155;
  --site-label: #1e293b;
  --site-border: #cbd5e1;
  --site-card-bg: #ffffff;
  --site-card-border: #cbd5e1;
  --site-input-bg: #ffffff;
  --site-input-border: #94a3b8;
  --site-input-text: #0f172a;
  --site-link: #1d4ed8;
  --site-link-hover: #1e40af;
  --site-btn-bg: #1e293b;
  --site-btn-text: #ffffff;
  --site-btn-secondary-border: #475569;
  --site-btn-secondary-text: #1e293b;
  --site-btn-ghost-border: #94a3b8;
  --site-btn-ghost-text: #1e293b;
  --site-icon-btn-bg: #ffffff;
  --site-icon-btn-border: #94a3b8;
  --site-icon-btn-text: #1e293b;
  --site-chip-bg: #dbeafe;
  --site-chip-border: #60a5fa;
  --site-chip-text: #1e3a8a;
  --site-prose: #334155;
  --site-prose-strong: #0f172a;
  --site-table-border: #cbd5e1;
  --site-table-head: #475569;
  --site-note-bg: #f1f5f9;
  --site-note-border: #cbd5e1;
  --site-checkmark: #15803d;
  --site-fab-bg: #ffffff;
  --site-fab-border: rgba(15, 23, 42, 0.16);
  --site-fab-text: #1e293b;
  --site-fab-shadow: 0 4px 20px rgba(15, 23, 42, 0.14);
  --site-pop-bg: #ffffff;
  --site-pop-border: #cbd5e1;
  --site-pop-hover: #f1f5f9;
  --site-pop-active: #e2e8f0;
  --site-carousel-bg: #f1f5f9;
  --site-carousel-dash: #64748b;
  --site-frame-border: #94a3b8;
}

html[data-hyst-theme="dark"] {
  --site-bg: #0b0f14;
  --site-text: #e8eaed;
  --site-heading: #f8fafc;
  --site-body: #b7c6d4;
  --site-text-muted: #9eb0c0;
  --site-text-soft: #b7c6d4;
  --site-label: #c7d5e1;
  --site-border: #1d2a36;
  --site-card-bg: #1a222c;
  --site-card-border: #2a3540;
  --site-input-bg: #0f1419;
  --site-input-border: #3a4a5a;
  --site-input-text: #ffffff;
  --site-link: #91a9b7;
  --site-link-hover: #ffffff;
  --site-btn-bg: #91a9b7;
  --site-btn-text: #0b1a24;
  --site-btn-secondary-border: #91a9b7;
  --site-btn-secondary-text: #91a9b7;
  --site-btn-ghost-border: #34465a;
  --site-btn-ghost-text: #cfe0ee;
  --site-icon-btn-bg: #1a222c;
  --site-icon-btn-border: #34465a;
  --site-icon-btn-text: #cfe0ee;
  --site-chip-bg: #16364a;
  --site-chip-border: #2f5a73;
  --site-chip-text: #cfe0ee;
  --site-prose: #b7c6d4;
  --site-prose-strong: #e2eaf2;
  --site-table-border: #243240;
  --site-table-head: #8aa0b3;
  --site-note-bg: #14202b;
  --site-note-border: #2a3a48;
  --site-checkmark: #5fd08a;
  --site-fab-bg: #1a222c;
  --site-fab-border: rgba(255, 255, 255, 0.08);
  --site-fab-text: #cfe0ee;
  --site-fab-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
  --site-pop-bg: #1a222c;
  --site-pop-border: #34465a;
  --site-pop-hover: #243240;
  --site-pop-active: #2f4558;
  --site-carousel-bg: #121820;
  --site-carousel-dash: #34465a;
  --site-frame-border: #222222;
}

html[data-hyst-theme="pastel"],
html:not([data-hyst-theme]) {
  --site-bg: #f3e8ff;
  --site-text: #1e1b4b;
  --site-heading: #1e1b4b;
  --site-body: #312e81;
  --site-text-muted: #4338ca;
  --site-text-soft: #3730a3;
  --site-label: #312e81;
  --site-border: #c4b5fd;
  --site-card-bg: #faf5ff;
  --site-card-border: #c4b5fd;
  --site-input-bg: #ffffff;
  --site-input-border: #a78bfa;
  --site-input-text: #1e1b4b;
  --site-link: #5b21b6;
  --site-link-hover: #4c1d95;
  --site-btn-bg: #6d28d9;
  --site-btn-text: #ffffff;
  --site-btn-secondary-border: #7c3aed;
  --site-btn-secondary-text: #4c1d95;
  --site-btn-ghost-border: #a78bfa;
  --site-btn-ghost-text: #4c1d95;
  --site-icon-btn-bg: #faf5ff;
  --site-icon-btn-border: #a78bfa;
  --site-icon-btn-text: #5b21b6;
  --site-chip-bg: #ede9fe;
  --site-chip-border: #8b5cf6;
  --site-chip-text: #4c1d95;
  --site-prose: #312e81;
  --site-prose-strong: #1e1b4b;
  --site-table-border: #c4b5fd;
  --site-table-head: #5b21b6;
  --site-note-bg: #ede9fe;
  --site-note-border: #a78bfa;
  --site-checkmark: #15803d;
  --site-fab-bg: #faf5ff;
  --site-fab-border: rgba(76, 29, 149, 0.22);
  --site-fab-text: #5b21b6;
  --site-fab-shadow: 0 4px 20px rgba(91, 33, 182, 0.22);
  --site-pop-bg: #faf5ff;
  --site-pop-border: #c4b5fd;
  --site-pop-hover: #f3e8ff;
  --site-pop-active: #ede9fe;
  --site-carousel-bg: #ede9fe;
  --site-carousel-dash: #8b5cf6;
  --site-frame-border: #a78bfa;
}

/* Apply variables to site chrome (not .display-body poll screens). */
html[data-hyst-theme] .home-body,
html[data-hyst-theme] .account-root,
html[data-hyst-theme] .admin-root {
  background: var(--site-bg);
  color: var(--site-text);
}

html[data-hyst-theme] .home-header,
html[data-hyst-theme] .account-bar,
html[data-hyst-theme] .admin-header {
  border-bottom-color: var(--site-border);
}

html[data-hyst-theme] .account-bar {
  background: var(--site-bg);
}

html[data-hyst-theme] .home-tagline,
html[data-hyst-theme] .public-empty-state p,
html[data-hyst-theme] .home-screens-hint,
html[data-hyst-theme] .embed-controls h2,
html[data-hyst-theme] .embed-preview h2 {
  color: var(--site-text-muted);
}

html[data-hyst-theme] .card {
  background: var(--site-card-bg);
  border-color: var(--site-card-border);
  color: var(--site-text);
}

html[data-hyst-theme] .input,
html[data-hyst-theme] textarea.code,
html[data-hyst-theme] .code-box {
  background: var(--site-input-bg);
  border-color: var(--site-input-border);
  color: var(--site-input-text);
}

html[data-hyst-theme] .link,
html[data-hyst-theme] .account-nav a {
  color: var(--site-link);
}

html[data-hyst-theme] .link:hover,
html[data-hyst-theme] .account-nav a:hover {
  color: var(--site-link-hover);
}

html[data-hyst-theme] .btn {
  background: var(--site-btn-bg);
  color: var(--site-btn-text);
}

/* Primary CTA keeps its brand blue in every theme (the generic .btn rule
   above would otherwise repaint its background — light grey on dark theme —
   and drop the white-text contrast). */
html[data-hyst-theme] .btn-primary {
  background: #2b72c6;
  border: 1px solid #245fa6;
  color: #ffffff;
}
html[data-hyst-theme] .btn-primary:hover {
  background: #245fa6;
}

html[data-hyst-theme] .btn-secondary {
  background: transparent;
  border: 1px solid var(--site-btn-secondary-border);
  color: var(--site-btn-secondary-text);
}

html[data-hyst-theme] .btn-ghost {
  background: transparent;
  border-color: var(--site-btn-ghost-border);
  color: var(--site-btn-ghost-text);
}

html[data-hyst-theme] .btn-pill {
  background: var(--site-chip-bg);
  border-color: var(--site-chip-border);
  color: var(--site-chip-text);
}

/* Button-styled LINKS (<a class="btn ...">) must always use button text
   colours. Container link rules like `.account-nav a` or `.link` have higher
   specificity than `.btn`, which would otherwise paint link-coloured (often
   same-hue) text onto a solid button — e.g. purple text on a purple button.
   These a.btn* rules sit after the link + button rules so they win by both
   specificity and source order, in every theme. Order matters: the base
   a.btn first, then variants so the variant colour wins for secondary/ghost. */
html[data-hyst-theme] a.btn,
html[data-hyst-theme] a.btn:hover {
  color: var(--site-btn-text);
}
html[data-hyst-theme] a.btn-secondary,
html[data-hyst-theme] a.btn-secondary:hover {
  color: var(--site-btn-secondary-text);
}
html[data-hyst-theme] a.btn-ghost,
html[data-hyst-theme] a.btn-ghost:hover {
  color: var(--site-btn-ghost-text);
}
html[data-hyst-theme] a.btn-pill,
html[data-hyst-theme] a.btn-pill:hover {
  color: var(--site-chip-text);
}

html[data-hyst-theme] .icon-btn,
html[data-hyst-theme] .ratio-btn {
  background: var(--site-icon-btn-bg);
  border-color: var(--site-icon-btn-border);
  color: var(--site-icon-btn-text);
}

html[data-hyst-theme] .ratio-btn.active {
  background: var(--site-btn-bg);
  border-color: var(--site-btn-bg);
  color: var(--site-btn-text);
}

html[data-hyst-theme] .prose,
html[data-hyst-theme] .prose .about-uses {
  color: var(--site-prose);
}

html[data-hyst-theme] .prose strong,
html[data-hyst-theme] .prose .about-uses strong {
  color: var(--site-prose-strong);
}

html[data-hyst-theme] .account-main .card.narrow p,
html[data-hyst-theme] .account-main .card.narrow .small.muted {
  color: var(--site-text-soft);
}

html[data-hyst-theme] .small a {
  color: var(--site-link);
}

html[data-hyst-theme] .small a:hover {
  color: var(--site-link-hover);
}

html[data-hyst-theme] .account-who,
html[data-hyst-theme] .account-foot {
  color: var(--site-text-muted);
}

html[data-hyst-theme] .account-foot {
  border-top-color: var(--site-border);
}

html[data-hyst-theme] .muted,
html[data-hyst-theme] .small {
  opacity: 1;
  color: var(--site-text-muted);
}

html[data-hyst-theme] .table th,
html[data-hyst-theme] .table td {
  border-bottom-color: var(--site-table-border);
}

html[data-hyst-theme] .table th {
  color: var(--site-table-head);
}

html[data-hyst-theme] .poll-list li {
  border-bottom-color: var(--site-table-border);
}

html[data-hyst-theme] .home-frame,
html[data-hyst-theme] .embed-frame {
  border-color: var(--site-frame-border);
}

html[data-hyst-theme] .about-carousel-placeholder {
  background: repeating-linear-gradient(
    -45deg,
    var(--site-carousel-bg),
    var(--site-carousel-bg) 10px,
    var(--site-pop-hover) 10px,
    var(--site-pop-hover) 20px
  );
  border-color: var(--site-carousel-dash);
}

html[data-hyst-theme] .about-carousel-viewport {
  background: var(--site-carousel-bg);
}

html[data-hyst-theme] .showcase-admin-item {
  background: var(--site-bg);
  border-color: var(--site-card-border);
}

/* Headings and body copy still hardcoded dark in app.css — override for light/pastel. */
html[data-hyst-theme] .home-body h1,
html[data-hyst-theme] .home-body h2,
html[data-hyst-theme] .home-body h3,
html[data-hyst-theme] .account-root h1,
html[data-hyst-theme] .account-root h2,
html[data-hyst-theme] .account-root h3,
html[data-hyst-theme] .admin-root h1,
html[data-hyst-theme] .admin-root h2,
html[data-hyst-theme] .admin-root h3,
html[data-hyst-theme] .home-info-col h2,
html[data-hyst-theme] .home-plans h3,
html[data-hyst-theme] .form-section-title,
html[data-hyst-theme] .subscription-plans-panel h3,
html[data-hyst-theme] .page-title-body h1,
html[data-hyst-theme] .card h2,
html[data-hyst-theme] .card h3 {
  color: var(--site-heading);
}

html[data-hyst-theme] .home-info-col p,
html[data-hyst-theme] .home-features li,
html[data-hyst-theme] .home-plan-row,
html[data-hyst-theme] .page-subtitle,
html[data-hyst-theme] .page-subtitle p,
html[data-hyst-theme] .settings-readonly-list dd,
html[data-hyst-theme] .poll-control .label,
html[data-hyst-theme] .table td {
  color: var(--site-body);
}

html[data-hyst-theme] .home-features li strong,
html[data-hyst-theme] .home-plan-row strong,
html[data-hyst-theme] .page-subtitle strong,
html[data-hyst-theme] .schedule-mode-card-body strong {
  color: var(--site-heading);
}

html[data-hyst-theme] .home-info {
  border-top-color: var(--site-border);
}

html[data-hyst-theme] .home-plan-row,
html[data-hyst-theme] .form-section,
html[data-hyst-theme] .poll-list li {
  border-bottom-color: var(--site-border);
}

html[data-hyst-theme] .label,
html[data-hyst-theme] .checkbox,
html[data-hyst-theme] .settings-readonly-list dt {
  opacity: 1;
  color: var(--site-label);
}

html[data-hyst-theme] .expiry-note {
  background: var(--site-note-bg);
  border-color: var(--site-note-border);
  color: var(--site-body);
}

html[data-hyst-theme] .home-features li::before {
  color: var(--site-checkmark);
}

html[data-hyst-theme] .poll-list-title a {
  color: var(--site-link);
}

html[data-hyst-theme] .poll-list-title a:hover {
  color: var(--site-link-hover);
}

html[data-hyst-theme] .home-card {
  color: var(--site-text);
}

html[data-hyst-theme] .page-back,
html[data-hyst-theme] .page-back a {
  color: var(--site-link);
}

html[data-hyst-theme] .about-carousel-placeholder code {
  color: var(--site-body);
}

html[data-hyst-theme] .field-tip {
  background: var(--site-pop-hover);
  color: var(--site-text-muted);
  opacity: 1;
}

html[data-hyst-theme] .chip {
  background: var(--site-pop-hover);
  border-color: var(--site-border);
  color: var(--site-body);
}

html[data-hyst-theme] .notice,
html[data-hyst-theme] .notice p {
  color: var(--site-body);
}

html[data-hyst-theme="light"] .flash-success {
  background: #dcfce7;
  border-color: #86efac;
  color: #14532d;
}

html[data-hyst-theme="light"] .flash-error {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #7f1d1d;
}

html[data-hyst-theme="light"] .flash-info {
  background: #dbeafe;
  border-color: #93c5fd;
  color: #1e3a8a;
}

html[data-hyst-theme="pastel"] .flash-success,
html:not([data-hyst-theme]) .flash-success {
  background: #ecfdf5;
  border-color: #6ee7b7;
  color: #065f46;
}

html[data-hyst-theme="pastel"] .flash-error,
html:not([data-hyst-theme]) .flash-error {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #991b1b;
}

html[data-hyst-theme="pastel"] .flash-info,
html:not([data-hyst-theme]) .flash-info {
  background: #ede9fe;
  border-color: #c4b5fd;
  color: #4c1d95;
}

/* ===========================================================================
   Marketing homepage surfaces (hero + how-it-works + gallery).
   The hero sits on a darkened photo and the step cards are dark panels in
   EVERY theme, so their text must stay light regardless of --site-heading.
   Gallery captions sit on the themed page background, so they follow the theme.
   These override the generic html[data-hyst-theme] .home-body h2/h3 rules above.
   =========================================================================== */
html[data-hyst-theme] .home-hero .home-hero-content h2 {
  color: #f7fbff;
}
html[data-hyst-theme] .home-hero .home-hero-content .eyebrow {
  color: #9fd0ff;
}
html[data-hyst-theme] .home-hero .home-hero-lead {
  color: #d5e2ee;
}
html[data-hyst-theme] .home-hero .home-hero-actions .btn-secondary {
  border-color: rgba(226, 234, 242, 0.6);
  color: #f2f7fb;
  background: rgba(11, 15, 20, 0.28);
}

html[data-hyst-theme] .home-steps .home-step h3 {
  color: #e8f0f7;
}
html[data-hyst-theme] .home-steps .home-step p {
  color: #adbecd;
}

html[data-hyst-theme] .home-gallery .home-gallery-card figcaption {
  color: var(--site-body);
}
html[data-hyst-theme] .home-gallery .home-gallery-frame {
  border-color: var(--site-frame-border);
}

html[data-hyst-theme] .home-steps-head p,
html[data-hyst-theme] .home-gallery-head p {
  color: var(--site-text-muted);
}

.login-theme-bar {
  position: fixed;
  top: max(0.85rem, env(safe-area-inset-top, 0px));
  right: max(0.85rem, env(safe-area-inset-right, 0px));
  z-index: 9000;
}

.site-header-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-left: auto;
}

.home-header .site-header-toolbar {
  flex-shrink: 0;
  justify-content: flex-end;
}

.account-bar .site-header-toolbar {
  flex: 1 1 auto;
  justify-content: flex-end;
  min-width: 0;
}

.home-header-tools,
.admin-header-tools {
  flex-shrink: 0;
  margin-left: auto;
}

html[data-hyst-theme] .home-header-branded {
  align-items: center;
}

html[data-hyst-theme] .home-header-tools,
html[data-hyst-theme] .admin-header-tools {
  flex-shrink: 0;
}

html[data-hyst-theme] .admin-header .row.gap.wrap {
  align-items: center;
}

/* Theme control — header icon; not mixed with page links. */
.theme-menu--icon-only .theme-menu-trigger {
  width: 2.35rem;
  height: 2.35rem;
  min-width: 2.35rem;
  min-height: 2.35rem;
  padding: 0;
  box-shadow: none;
}

.theme-menu--icon-only .theme-menu-label,
.theme-menu--icon-only .theme-menu-fab-label {
  display: none !important;
}

.theme-menu {
  position: relative;
}

.theme-menu--inline {
  display: inline-flex;
  align-items: center;
}

.theme-menu-trigger {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border-radius: 999px;
  border: 1px solid var(--site-fab-border, rgba(15, 23, 42, 0.16));
  background: var(--site-fab-bg, #fff);
  color: var(--site-fab-text, #1e293b);
  box-shadow: var(--site-fab-shadow, 0 4px 20px rgba(15, 23, 42, 0.14));
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.theme-menu--inline:not(.theme-menu--icon-only) .theme-menu-trigger {
  width: auto;
  height: auto;
  min-height: 2.1rem;
  padding: 0.35rem 0.7rem;
  box-shadow: none;
  font-size: 0.875rem;
  font-weight: 600;
}

.theme-menu-label,
.theme-menu-fab-label {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
}

.theme-menu--inline .theme-menu-fab-label {
  display: none;
}

.theme-menu--inline:not(.theme-menu--icon-only) .theme-menu-label {
  display: inline;
}

.theme-menu-trigger::-webkit-details-marker {
  display: none;
}

.theme-menu-trigger:hover {
  transform: translateY(-1px);
}

.theme-menu-trigger:focus-visible {
  outline: 2px solid var(--site-link, #2563eb);
  outline-offset: 2px;
}

.theme-menu-icon {
  display: none;
}

.theme-menu[data-current-theme="light"] .theme-menu-icon-light,
.theme-menu[data-current-theme="dark"] .theme-menu-icon-dark,
.theme-menu[data-current-theme="pastel"] .theme-menu-icon-pastel,
.theme-menu:not([data-current-theme]) .theme-menu-icon-light {
  display: block;
}

.theme-menu-pop {
  position: absolute;
  right: 0;
  min-width: 7.75rem;
  padding: 0.35rem;
  border-radius: 10px;
  border: 1px solid var(--site-pop-border, #cbd5e1);
  background: var(--site-pop-bg, #fff);
  box-shadow: var(--site-fab-shadow, 0 4px 20px rgba(15, 23, 42, 0.14));
  z-index: 9100;
}

.theme-menu--inline .theme-menu-pop {
  top: calc(100% + 0.4rem);
  bottom: auto;
}

.theme-menu-item {
  display: block;
  width: 100%;
  padding: 0.45rem 0.65rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--site-text, #0f172a);
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
}

.theme-menu-item:hover {
  background: var(--site-pop-hover, #f1f5f9);
}

.theme-menu-item.is-active {
  background: var(--site-pop-active, #e2e8f0);
  font-weight: 600;
}

@media (max-width: 720px) {
  .site-header-toolbar {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
    gap: 0.5rem 0.75rem;
  }

  .home-header .site-header-toolbar {
    justify-content: flex-start;
  }

  .account-bar .site-header-toolbar {
    justify-content: flex-start;
  }

  .home-header-branded {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .home-header-tools {
    margin-left: 0;
  }
}