/* =============================================================
   MY Human Design — /en/calculator/

   🔴 Deliberately almost empty.

   The page's layout lives in inline styles that page-logic.js
   computes and dc-render.js applies, exactly as the approved
   prototype does. Adding rules here would fight that: a global
   box-sizing or a type reset the prototype never had would move
   every measurement the design was approved at.

   So this file carries only two things:
     1. the fonts, self-hosted
     2. the prototype's own <style> block, verbatim

   If something looks wrong, the fix is almost never here.
   ============================================================= */

/* --- Fonts ---------------------------------------------------
   Four faces, WOFF2, Latin-subset. The design system ships these
   as 19 TTF files totalling 3.0MB; this page uses Yeseva One and
   Raleway 400/500/600 only, and nothing on it uses Noto, so the
   design system's Google Fonts @import is not carried over.
   99KB instead of 3.0MB.
   ------------------------------------------------------------- */
@font-face { font-family: 'Yeseva One'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/YesevaOne-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Raleway-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/Raleway-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/Raleway-SemiBold.woff2') format('woff2'); }

/* --- The prototype's style block, verbatim -------------------- */
@keyframes mhdPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes mhdFade  { from { opacity: 0; } to { opacity: 1; } }

html, body { margin: 0; background: #FFFCF5; font-family: 'Raleway', sans-serif; color: #694D2F; }

/* The markup in index.html is a template, and it is in the document from the
   moment the HTML parses - a second or so before page-logic has computed the
   layout and dc-render has applied it. Filmed at 6 Mbps, that second showed
   the scaffolding: {{ t.early.sub }} and {{ m.curLabel }} in plain sight,
   both layouts stacked, panels that should be shut hanging open, and a page
   12372px tall that then snapped to 5019. Michal read it as the fonts
   resetting; it was the whole page.

   So the body is held back until the first render, then faded in.

   The failsafe matters more than the hiding. If a script 404s or throws, the
   page must still appear, so the reveal is ALSO a plain CSS animation that
   runs on its own after 3s and needs no JavaScript at all. */
body { opacity: 0; }
body.dc-ready { opacity: 1; transition: opacity 160ms cubic-bezier(0.22, 0.61, 0.36, 1); }
/* A long backstop only. The precise failsafe is the load event, in the head
   of index.html: it fires after the deferred scripts have run or failed, so
   it reveals the page the moment anything goes wrong rather than on a timer.
   Measured, the real page is ready at 154ms unthrottled and 3.7s at 1.5Mbps,
   so a 3s timer would have exposed the scaffolding on a slow phone - exactly
   what this change exists to prevent. */
body { animation: mhdReveal 1ms linear 10s forwards; }
@keyframes mhdReveal { to { opacity: 1; } }

/* Patch 06: the chapters are changed by swiping sideways, and a right-swipe
   is also the browser’s "go back" gesture - measured, it left the site for
   about:blank. This keeps horizontal overscroll inside the page.
   Caveat: iOS Safari reserves its screen-edge swipe and ignores this, so the
   arrows and the progress bar stay the reliable way back. */
html { overscroll-behavior-x: contain; }
a { color: #694D2F; text-decoration-color: #C6BCA3; }
a:hover { text-decoration-color: #CB8874; }

/* --- Added for production, not in the prototype ---------------
   A visible focus ring. The prototype was a design reference and
   never needed one; a page people tab through does.
   ------------------------------------------------------------- */
:focus-visible { outline: 2px solid #694D2F; outline-offset: 2px; }

/* Respect a reduced-motion preference.

   The only looping animation on the page is the pulsing Ajna mark
   that invites the first scroll on mobile, and the prototype applies
   it as an inline style, so there is no class to hang this on — the
   selector has to match the inline declaration itself. */
@media (prefers-reduced-motion: reduce) {
  [style*="mhdPulse"] { animation: none !important; }
}

/* --- The studio frame takes the height the design gives it ----
   embed.js sets the iframe to a flat 1013px inline, and on phones
   injects a 100dvh !important rule. Both are sensible defaults for
   an ordinary page, where the widget is the page. Here it sits in
   the pinned hero, a stage that is exactly one screen tall, and the
   design's window for it is 634px (desktop) / 696px (mobile) - so
   the default clipped it by 379px / 148px.

   The studio lays itself out to whatever height it is given: forced
   to 1013, 860, 760, 696, 634 and 560 it reported content exactly
   equal to its viewport every time, with zero overflow. Nothing is
   scaled and nothing is cut. HD_ADMIN_PLATFORM does the same thing
   in theme_editor.html ("height: 90vh"), which is where this came
   from.

   🔴 Why it is written this way:
     !important  - embed.js sets the height INLINE, and only an
                   important declaration outranks an inline style.
     div[...]    - embed.js's own mobile rule is already !important,
                   so specificity breaks the tie: div[data-embed]
                   iframe (0,1,2) outranks [data-embed="id"] iframe
                   (0,1,1).
   Both parts are load-bearing. Dropping either brings 1013px back.

   🔴 This also overrides the height embed.js applies when the widget
   asks for one (hd-widget-height). That is deliberate here and must
   be reconsidered if the studio ever needs to grow on its own. */
div[data-embed] { height: 100% !important; }
div[data-embed] iframe { height: 100% !important; }

/* --- Who inside the pinned hero may take a pointer --------------
   d.chrome / m.chrome are inset:0, so each spans the whole canvas
   while holding only a few controls. Left hit-testable they covered
   the studio iframe and swallowed every click, so the wrapper is set
   to pointer-events:none in page-logic.js and the controls take it
   back here.

   🔴 One rule, not a list. The first attempt granted it to each
   control by hand and missed the colour editor popover, which is a
   separate child of chrome that only exists once a colour row is
   open - so the gradient silently stopped responding and the clicks
   fell through to the iframe underneath. Anything chrome holds is a
   control; the empty space between them is the only thing that
   should be transparent. A child set to auto is still hit-testable
   under a parent set to none, which is what makes this work.

   🔴 Direct children only. The sheets and popovers arrive as direct
   children because dc-render splices sc-if contents into the parent
   in place of the tag. */
[data-chrome] > * { pointer-events: auto; }