/* ════════════════════════════════════════════════════════════
   yutie-external-form-chrome.css · chunk 4.1.2 (2026-05-19)
   ─────────────────────────────────────────────────────────────
   Chrome rules for the public external-form surface: canvas
   positioning + opacity per theme, floating theme pill + calm
   icon pair pinned top-right. Loaded only on app_external_form_head
   at priority 5 (alongside yutie-brand-tokens.css from chunk 4.1.1).

   Tokens come from yutie-brand-tokens.css; this file consumes
   var(--gold), var(--glass), var(--rule), var(--gold-line),
   var(--gold-glow), var(--gold-pale), var(--text2), var(--r-xs),
   var(--blur), var(--ease). All defined in tokens; parity holds.

   Scoping. Toggle and floating-container selectors are prefixed
   with body.appointments-external-form so styles cannot bleed
   onto admin/customer surfaces if this stylesheet is ever loaded
   somewhere else by mistake. The canvas selectors use #bgCanvas
   alone because the id is module-controlled and there is only
   one such element on the page.

   Layout discipline. The only layout property in this file is
   the floating container's position:fixed plus the canvas
   position:fixed (both required for the visual effect, neither
   touches Appointly's form geometry).
═══════════════════════════════════════════════════════════ */

/* ─── Canvas background ─── */

#bgCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
}

[data-theme="light"] #bgCanvas {
  opacity: 0.40;
}

/* Calm mode reduces canvas presence. JS pauses the animation
   loop; this rule reduces visual weight. */
body.calm #bgCanvas {
  opacity: 0.20;
}

/* ─── Floating toggle pair ─── */

.yutie-floating-toggles {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

body.appointments-external-form .yutie-toggles {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Theme pill */
body.appointments-external-form .yutie-theme-pill {
  appearance: none;
  -webkit-appearance: none;
  width: 46px;
  height: 24px;
  border-radius: 12px;
  background: var(--glass);
  border: 1px solid var(--rule);
  position: relative;
  padding: 0;
  margin: 0;
  cursor: pointer;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
  display: inline-block;
  vertical-align: middle;
  font: inherit;
  line-height: 1;
}
body.appointments-external-form .yutie-theme-pill:hover {
  border-color: var(--gold-line);
}
body.appointments-external-form .yutie-theme-pill:focus,
body.appointments-external-form .yutie-theme-pill:focus-visible {
  outline: 2px solid var(--gold-glow);
  outline-offset: 2px;
}
body.appointments-external-form .yutie-theme-pill-dot {
  position: absolute;
  top: 2px;
  left: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 2px 6px var(--gold-glow);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
  pointer-events: none;
}
body.appointments-external-form .yutie-theme-pill[data-state="dark"] .yutie-theme-pill-dot {
  transform: translateX(3px);
}
body.appointments-external-form .yutie-theme-pill[data-state="light"] .yutie-theme-pill-dot {
  transform: translateX(25px);
}
body.appointments-external-form .yutie-theme-pill:hover .yutie-theme-pill-dot {
  box-shadow: 0 0 8px var(--gold-glow), 0 2px 6px var(--gold-glow);
}

/* Calm icon */
body.appointments-external-form .yutie-calm-icon {
  appearance: none;
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  border-radius: var(--r-xs);
  background: var(--glass);
  border: 1px solid var(--rule);
  color: var(--text2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  margin: 0;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
  font: inherit;
  line-height: 1;
}
body.appointments-external-form .yutie-calm-icon:hover {
  color: var(--gold);
  border-color: var(--gold-line);
}
body.appointments-external-form .yutie-calm-icon:focus,
body.appointments-external-form .yutie-calm-icon:focus-visible {
  outline: 2px solid var(--gold-glow);
  outline-offset: 2px;
}
body.appointments-external-form .yutie-calm-icon[data-state="on"] {
  color: var(--gold);
  background: var(--gold-pale);
  border-color: var(--gold-line);
}
body.appointments-external-form .yutie-calm-icon svg {
  display: block;
  width: 18px;
  height: 18px;
}

/* ════════════════════════════════════════════════════════════
   End yutie-external-form-chrome.css
═══════════════════════════════════════════════════════════ */