/* Ember studio (forgeos-ember-studio.js) and the look it sets on every face.
   theme.js stamps data-ember-* on <html> before first paint, so the rules
   keyed on those attributes hold from the first frame. Everything moving is
   still under prefers-reduced-motion and under Motion: Still. */

/* ── The face's looks (shapes come from the studio; finishes are here) ──── */
.fg-face[data-look="outline"] .fg-body { fill: var(--m19-surface, #fff); stroke: var(--ember-flame-b, #ff6a1f); stroke-width: 3.2; }
.fg-face[data-look="outline"] .fg-tuft { fill: none; stroke: var(--ember-flame-b, #ff6a1f); stroke-width: 2; }
.fg-face[data-look="outline"] .fg-glow, .fg-face[data-look="outline"] .fg-shine { opacity: 0; }
.fg-face[data-look="neon"] .fg-body { fill: #170d1c; stroke: var(--ember-flame-b, #ff6a1f); stroke-width: 2.6; filter: drop-shadow(0 0 3px var(--ember-flame-b, #ff6a1f)); }
.fg-face[data-look="neon"] .fg-tuft { fill: var(--ember-flame-a, #ffe9a8); }
.fg-face[data-look="neon"] .fg-eyes ellipse { fill: var(--ember-flame-a, #ffe9a8); }
.fg-face[data-look="neon"] .fg-mouth, .fg-face[data-look="neon"] .fg-brows { stroke: var(--ember-flame-a, #ffe9a8); }
.fg-face[data-look="neon"] .fg-shine { opacity: 0; }
.fg-face[data-look="pixel"] { shape-rendering: crispEdges; }
.fg-face[data-look="pixel"] .fg-shine { rx: 4px; ry: 2px; }
.fg-face[data-look="orb"] .fg-shine { transform: translate(-1px, -2px); }
.fg-face[data-look="drop"] .fg-tuft { opacity: 0; }

/* ── Size beside replies ─────────────────────────────────────────────────── */
:root[data-ember-size="sm"] .cw-msg-who .fg-face { width: 22px; height: 22px; }
:root[data-ember-size="lg"] .cw-msg-who .fg-face { width: 38px; height: 38px; }
:root[data-ember-size="lg"] .cw-msg-who { top: -6px; }

/* ── Expression ──────────────────────────────────────────────────────────── */
:root[data-ember-expr="subtle"] .fg-face .fg-cheek, :root[data-ember-expr="subtle"] .fg-face .fg-spark { opacity: 0 !important; }
:root[data-ember-expr="subtle"] .fg-face .fg-eyes ellipse { transform: none; }
:root[data-ember-expr="lively"] .fg-face .fg-cheek { opacity: .6; }
:root[data-ember-expr="lively"] .fg-face .fg-mouth { stroke-width: 3; }
:root[data-ember-expr="lively"] .fg-face .fg-brows { opacity: .55; }

/* ── Motion ──────────────────────────────────────────────────────────────── */
:root[data-ember-motion="still"] .fg-face, :root[data-ember-motion="still"] .fg-face * { animation: none !important; transition: none !important; }
:root[data-ember-motion="calm"] .fg-face { animation-duration: 8s !important; }
:root[data-ember-motion="calm"] .fg-face .fg-eyes ellipse { animation-duration: 9s !important; }
@media (prefers-reduced-motion: no-preference) {
  :root[data-ember-expr="lively"][data-ember-motion="full"] .fg-face[data-state="idle"]:not(.cw-msg-who *) { animation: es-hop 2.8s ease-in-out infinite; }
}
@keyframes es-hop { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-4px) rotate(-3deg); } 60% { transform: translateY(-1px) rotate(2deg); } }

/* Ember's colour as the app accent (forgeos-ember-studio.js; owner, 2026-10-17:
   "Ember should be what the product is built off of"). theme.js stamps
   data-ember-accent and the --ea-* shades before first paint; the studio
   computes each shade from the flame to the same contrast the brand ramp
   meets (600 carries white text, 700 is text on a page), and a test
   recomputes every pair. The fallbacks are the default ember flame's shades,
   so a page with the attribute and nothing stored is still the ember accent.
   600 is shared by both themes because white text sits on it in both. */
:root[data-ember-accent="on"] {
  --m19-brand-700: var(--ea-700, #923608);
  --m19-brand-600: var(--ea-600, #ba450a);
  --m19-brand-500: var(--ea-500, #c6490a);
  --m19-brand-400: var(--ea-400, #f25d11);
  --m19-brand-200: var(--ea-200, #f5d3c2);
  --m19-brand-100: var(--ea-100, #fae9e0);
  --m19-brand-050: var(--ea-050, #fdf5f1);
}
@media (prefers-color-scheme: dark) {
  :root[data-ember-accent="on"]:not([data-m19-theme="light"]) {
    --m19-brand-700: var(--ea-700d, #fabb9b);
    --m19-brand-500: var(--ea-500d, #f57d40);
    --m19-brand-400: var(--ea-400d, #f79d6f);
    --m19-brand-200: var(--ea-200d, #763f23);
    --m19-brand-100: var(--ea-100d, #502d1b);
    --m19-brand-050: var(--ea-050d, #341e14);
  }
}
:root[data-ember-accent="on"][data-m19-theme="dark"] {
  --m19-brand-700: var(--ea-700d, #fabb9b);
  --m19-brand-500: var(--ea-500d, #f57d40);
  --m19-brand-400: var(--ea-400d, #f79d6f);
  --m19-brand-200: var(--ea-200d, #763f23);
  --m19-brand-100: var(--ea-100d, #502d1b);
  --m19-brand-050: var(--ea-050d, #341e14);
}

/* ── Every face is a door to the studio ──────────────────────────────────── */
.es-tappable { cursor: pointer; border-radius: 50%; }
.es-tappable:focus-visible { outline: 3px solid var(--m19-brand-500, #6366f1); outline-offset: 3px; }
@media (hover: hover) {
  .es-tappable { transition: transform .15s ease, filter .15s ease; }
  .es-tappable:hover { transform: scale(1.08); filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--ember-flame-b, #ff6a1f) 45%, transparent)); }
}

/* ── The studio ──────────────────────────────────────────────────────────── */
.es-scrim {
  position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; padding: 16px;
  background: color-mix(in srgb, #0b0710 52%, transparent);
}
.es-scrim[hidden] { display: none; }
.es-sheet {
  --es-ink: var(--m19-ink, #101828); --es-ink-2: var(--m19-ink-2, #344054); --es-ink-3: var(--m19-ink-3, #667085);
  --es-line: var(--m19-line, #e4e7ec); --es-surface: var(--m19-surface, #fff); --es-surface-2: var(--m19-surface-2, #f4f5f9);
  display: flex; flex-direction: column; width: min(640px, 100%); height: min(820px, calc(100dvh - 32px));
  background: var(--es-surface); color: var(--es-ink); border-radius: 24px; overflow: hidden; overflow: clip;
  border: 1px solid var(--es-line);
  box-shadow: 0 30px 80px -20px rgba(16, 10, 30, .5), 0 0 0 1px rgba(255, 255, 255, .04) inset;
  font: inherit; font-size: .9375rem; line-height: 1.45;
  animation: es-in .24s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes es-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

.es-head {
  position: relative; display: grid; grid-template-columns: 168px 1fr; align-items: center; gap: 4px 18px; overflow: hidden;
  padding: 20px 56px 18px 18px; color: #fff8f2;
  background:
    radial-gradient(70% 90% at 18% 55%, color-mix(in srgb, var(--ember-flame-b, #ff6a1f) 55%, transparent), transparent 70%),
    radial-gradient(60% 80% at 90% 0%, color-mix(in srgb, var(--ember-flame-a, #ffe9a8) 28%, transparent), transparent 70%),
    linear-gradient(160deg, #22141a, #120c14 70%);
}
:root[data-ember-style="clay"] .es-head, :root[data-ember-style="ink"] .es-head {
  background: radial-gradient(70% 90% at 18% 55%, color-mix(in srgb, var(--ember-flame-b, #ff6a1f) 40%, #fbf6ef), #fbf6ef 75%); color: #1d1410;
}
.es-stage { display: grid; place-items: center; width: 168px; height: 168px; }
.es-preview { will-change: transform; }
.es-preview .fg-face { width: 132px; height: 132px; filter: none; }
.es-words { min-width: 0; }
.es-title { margin: 0; font-size: 1.5rem; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
.es-caption { margin: 4px 0 12px; opacity: .86; font-size: .875rem; }
.es-try { display: flex; flex-wrap: wrap; gap: 6px; }
.es-pill {
  min-height: 34px; padding: 0 12px; border-radius: 999px; font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer;
  color: inherit; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22);
}
:root[data-ember-style="clay"] .es-pill, :root[data-ember-style="ink"] .es-pill { background: rgba(0, 0, 0, .05); border-color: rgba(0, 0, 0, .18); }
.es-pill[aria-pressed="true"] { background: #fff; color: #1a1014; border-color: #fff; }
.es-x {
  position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .12); color: inherit; font: inherit; font-size: 1.5rem; line-height: 1;
}
.es-x:hover { background: rgba(255, 255, 255, .22); }

.es-tabs { display: flex; gap: 4px; padding: 10px 14px 0; border-bottom: 1px solid var(--es-line); background: var(--es-surface); }
.es-tab {
  position: relative; min-height: 44px; padding: 0 14px; border: 0; background: transparent; cursor: pointer;
  color: var(--es-ink-3); font: inherit; font-weight: 600;
}
.es-tab[aria-selected="true"] { color: var(--es-ink); }
.es-tab[aria-selected="true"]::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, var(--ember-flame-b, #ff6a1f), var(--m19-brand-600, #4f46e5));
}
.es-head, .es-tabs, .es-foot { flex: none; }
.es-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 18px 8px; }
.es-panel:focus-visible { outline: none; }
.es-section { margin: 0; padding: 14px 0 8px; }
.es-section + .es-section { border-top: 1px solid var(--es-line); }
.es-h { margin: 0 0 2px; font-size: 1rem; font-weight: 700; }
.es-note { margin: 0 0 10px; color: var(--es-ink-3); font-size: .8438rem; }
.es-group { margin: 10px 0 6px; color: var(--es-ink-2); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.es-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; border-top: 1px solid var(--es-line); }
.es-two .es-section + .es-section { border-top: 0; }

.es-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.es-choice {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px 6px 8px;
  border: 1.5px solid var(--es-line); border-radius: 14px; background: var(--es-surface); cursor: pointer;
  color: var(--es-ink-2); font-weight: 600; font-size: .875rem; transition: border-color .12s ease, background .12s ease;
}
.es-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.es-choice:hover { border-color: color-mix(in srgb, var(--m19-brand-500, #6366f1) 45%, var(--es-line)); }
.es-choice:has(input:checked) {
  border-color: var(--m19-brand-600, #4f46e5); color: var(--es-ink);
  background: color-mix(in srgb, var(--m19-brand-050, #eef2ff) 70%, var(--es-surface));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--m19-brand-500, #6366f1) 18%, transparent);
}
.es-choice:has(input:focus-visible) { outline: 3px solid var(--m19-brand-500, #6366f1); outline-offset: 2px; }
.es-choices--size .es-choice, .es-choices--expr .es-choice, .es-choices--motion .es-choice { padding: 6px 14px; }

.es-choices--flame { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.es-choices--flame .es-choice { flex-direction: column; justify-content: center; gap: 5px; min-height: 76px; padding: 8px 4px 6px; font-size: .78rem; }
.es-choices--flame .es-swatch { width: 34px; height: 34px; }
.es-swatch {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 38% 32%, var(--sw-a, #ffe9a8), var(--sw-b, #ff6a1f) 72%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12) inset, 0 2px 6px -2px var(--sw-b, #ff6a1f);
}
.es-mini { display: inline-grid; place-items: center; width: 40px; height: 40px; }
.es-mini .fg-face { width: 40px; height: 40px; animation: none !important; }
.es-choices--face { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.es-choices--face .es-choice { flex-direction: column; justify-content: center; gap: 4px; padding: 8px 4px 6px; font-size: .78rem; }

.es-choices--style { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); }
.es-choices--style .es-choice { align-items: center; padding: 8px 12px 8px 8px; }
.es-choices--style .es-choice-name { display: grid; }
.es-choice-hint { display: block; color: var(--es-ink-3); font-size: .75rem; font-weight: 500; }
.es-style { width: 40px; height: 40px; border-radius: 12px; flex: none; background: #1a1018; position: relative; overflow: hidden; }
.es-style::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; }
.es-style--flame::after { inset: 6px 9px 5px; border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%; background: radial-gradient(circle at 50% 70%, var(--ember-flame-a, #ffe9a8), var(--ember-flame-b, #ff6a1f) 65%); box-shadow: 0 0 10px var(--ember-flame-b, #ff6a1f); }
.es-style--glass::after { background: radial-gradient(circle at 34% 30%, #fff 0 8%, transparent 9%), radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--ember-flame-b, #ff6a1f) 70%, transparent), color-mix(in srgb, var(--ember-flame-a, #ffe9a8) 25%, transparent) 70%); border: 1.5px solid rgba(255, 255, 255, .55); }
.es-style--crystal::after { inset: 5px 9px; border-radius: 0; clip-path: polygon(50% 0, 100% 45%, 50% 100%, 0 45%); background: linear-gradient(135deg, var(--ember-flame-a, #ffe9a8), var(--ember-flame-b, #ff6a1f) 55%, #fff 56%, var(--ember-flame-b, #ff6a1f) 80%); }
.es-style--ink { background: #f7f1e6; }
.es-style--ink::after { inset: 6px 9px 5px; border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%; background: var(--ember-flame-b, #ff6a1f); border: 3px solid #17110f; }
.es-style--clay { background: #efe7dc; }
.es-style--clay::after { background: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--ember-flame-a, #ffe9a8) 70%, #fff), var(--ember-flame-b, #ff6a1f) 85%); box-shadow: 0 3px 4px rgba(60, 30, 10, .25); }
.es-style--neon { background: #07040b; }
.es-style--neon::after { inset: 7px 10px 6px; border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%; border: 2.5px solid var(--ember-flame-b, #ff6a1f); box-shadow: 0 0 8px var(--ember-flame-b, #ff6a1f), inset 0 0 6px var(--ember-flame-b, #ff6a1f); }
.es-style--pixel::after { inset: 8px; border-radius: 0; background: conic-gradient(from 0deg, var(--ember-flame-b, #ff6a1f) 0 25%, var(--ember-flame-a, #ffe9a8) 0 50%, var(--ember-flame-b, #ff6a1f) 0 75%, var(--ember-flame-a, #ffe9a8) 0); background-size: 12px 12px; image-rendering: pixelated; }

.es-switch { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-weight: 600; }
.es-switch input {
  appearance: none; -webkit-appearance: none; position: relative; width: 46px; height: 28px; margin: 0; flex: none; border-radius: 999px; cursor: pointer;
  background: var(--m19-line-strong, #98a2b3); transition: background .15s ease;
}
.es-switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .15s ease; }
.es-switch input:checked { background: var(--m19-brand-600, #4f46e5); }
.es-switch input:checked::after { transform: translateX(18px); }
.es-switch input:focus-visible { outline: 3px solid var(--m19-brand-500, #6366f1); outline-offset: 2px; }

.es-field { display: grid; gap: 6px; margin: 6px 0 10px; font-weight: 600; }
.es-field input, .es-field select {
  min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1.5px solid var(--es-line); background: var(--es-surface);
  color: var(--es-ink); font: inherit; font-weight: 500; max-width: 100%;
}
.es-field input:focus-visible, .es-field select:focus-visible { outline: 3px solid var(--m19-brand-500, #6366f1); outline-offset: 1px; }
.es-field input:disabled { opacity: .6; }

.es-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 12px 18px 16px; border-top: 1px solid var(--es-line); background: var(--es-surface-2); }
.es-status { margin: 0; flex: 1 1 100%; min-height: 1.2em; color: var(--es-ink-3); font-size: .8125rem; }
.es-status:empty { display: none; }
.es-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; }
.es-actions > :first-child { margin-right: auto; }
.es-btn {
  min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--es-line); background: var(--es-surface);
  color: var(--es-ink); font: inherit; font-weight: 600; cursor: pointer;
}
.es-btn:hover { border-color: var(--m19-line-strong, #98a2b3); }
.es-btn--quiet { border-color: transparent; background: transparent; color: var(--es-ink-2); padding: 0 12px; }
.es-btn--link { color: var(--m19-brand-700, #4338ca); padding-left: 4px; }
.es-btn--quiet:hover { background: var(--es-surface); }
.es-btn--primary { border-color: transparent; background: var(--m19-brand-600, #4f46e5); color: #fff; padding: 0 22px; }
.es-btn--primary:hover { background: var(--m19-brand-700, #4338ca); }
:root[data-m19-theme="dark"] .es-btn--primary:hover { background: var(--m19-brand-600, #4f46e5); filter: brightness(1.1); }
.es-btn:focus-visible, .es-tab:focus-visible, .es-x:focus-visible, .es-pill:focus-visible { outline: 3px solid var(--m19-brand-500, #6366f1); outline-offset: 2px; }
.es-head :focus-visible { outline-color: #fff; }

@media (max-width: 600px) {
  .es-scrim { padding: 0; place-items: end stretch; }
  .es-sheet { width: 100%; height: auto; max-height: 94dvh; border-radius: 24px 24px 0 0; animation-name: es-up; }
  .es-head { grid-template-columns: 112px 1fr; padding: 14px 52px 14px 10px; gap: 2px 10px; }
  .es-stage { width: 112px; height: 112px; }
  .es-preview .fg-face { width: 96px; height: 96px; }
  .es-title { font-size: 1.25rem; }
  .es-caption { margin-bottom: 8px; }
  .es-two { grid-template-columns: 1fr; }
  .es-two .es-section + .es-section { border-top: 1px solid var(--es-line); }
  .es-choices--style { grid-template-columns: 1fr 1fr; }
  .es-choices--flame, .es-choices--face { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .es-choices--flame .es-choice { flex-direction: row; justify-content: flex-start; gap: 8px; min-height: 48px; padding: 6px 8px; font-size: .8125rem; }
  .es-choices--flame .es-swatch { width: 26px; height: 26px; }
  .es-section { padding: 10px 0 6px; }
  .es-foot { gap: 4px 8px; padding-top: 8px; }
  .es-x { top: 8px; right: 8px; width: 40px; height: 40px; }
  .es-actions > :first-child { flex: 1 1 100%; justify-content: flex-start; text-align: left; }
  .es-btn--primary { flex: 1 1 auto; }
  .es-foot { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
}
@keyframes es-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .es-sheet { animation: none; } .es-tappable { transition: none; } }
html.es-open, html.es-open body { overflow: hidden; }