/* ---------------------------------------------------------------------------
   Design tokens — the parent Webflow site's palette, verbatim, so every tool
   reads as native to the page that frames it.

   Defined on :root rather than per-tool. Svelte scopes component CSS, but
   custom properties inherit through the DOM, so a scoped rule in any tool can
   use var(--teal) and get the same value. Lifted here 2026-08-28 when the
   remaining three tools adopted the system HFSGS established.

   The embed is <iframe width="100%" height="680px">, so a phone renders these
   at ~360-430px. Design for that width; see docs/embed-clipping.json.
--------------------------------------------------------------------------- */
:root {
	--teal: #018e9f;
	--teal-deep: #014d58;
	/* --teal at 11px is 3.87:1 on paper and 3.64:1 on wash — both under the
	   4.5:1 WCAG AA floor for body-size text. This is the same hue darkened
	   until it clears: 5.02:1 on paper, 4.72:1 on wash. Use it for the small
	   uppercase labels; --teal stays the fill/border accent. */
	--teal-text: #017a88;
	--ink: #131313;
	--text-2: #5d6c7b;
	--wash: #f1f8f9;
	--line: #dbe6e8;
	--paper: #fdfefe;

	--space-xs: 4px;
	--space-sm: 8px;
	--space-md: 16px;
	--space-lg: 24px;
	--space-xl: 40px;

	/* One easing for the whole system: exponential ease-out. Motion confirms
	   a state change; it never performs. */
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Bulma's base sheet sets `html { min-width: 300px }` (sass/base/generic.sass
   line 37). It is injected at RUNTIME by bundle.js — 312KB of CSS in a <style>
   tag that lands after this file — so an `html` rule here would lose the tie on
   source order. `:root` is specificity (0,1,0) and beats `html` (0,0,1) wherever
   it sits, which is why this is not written as `html { min-width: 0 }`.

   Without it a 280px-wide frame (Galaxy Fold cover screen) renders a 300px
   document and scrolls sideways. Bulma's `overflow-x: hidden` is left alone —
   for an iframe embed, refusing to scroll sideways is the behaviour we want. */
:root {
	min-width: 0;
}

/* ---------------------------------------------------------------------------
   Reset. Until 2026-08-28 this arrived via Bulma, which App.svelte imported
   purely for its base layer — 312KB of CSS injected at runtime by bundle.js to
   get a reset the four tools were quietly depending on. Removing Bulma without
   this made every tool 120-160px taller (hfsgs 629 -> 774 at 390px) as the UA
   default margins on h1/p/fieldset/legend came back and broke the embed fit.

   This is Bulma's minireset, inlined: same rules, none of the framework. Keep
   it if Bulma ever returns — the components assume zeroed margins.
--------------------------------------------------------------------------- */
html, body, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset, legend,
textarea, pre, iframe, hr, h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
}

h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	font-weight: normal;
}

ul {
	list-style: none;
}

button, input, select, textarea {
	margin: 0;
}

html {
	box-sizing: border-box;
}

*, *::before, *::after {
	box-sizing: inherit;
}

img, video {
	height: auto;
	max-width: 100%;
}

iframe {
	border: 0;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

td, th {
	padding: 0;
	text-align: left;
}

/* Not in minireset: the UA gives fieldset a groove border and legend a padding,
   and every tool uses fieldset/legend for its question groups. */
fieldset {
	border: 0;
	min-width: 0;
}

legend {
	padding: 0;
}

/* NOT height: 100%. open-iframe-resizer measures
   document.documentElement.getBoundingClientRect().height and reports it to the
   parent. With `height: 100%` the html element is exactly the viewport — i.e.
   the iframe's CURRENT height — so the child would report back the height it
   already has and the frame could never grow. The auto-height handshake fails
   silently and looks like the library not working.

   Leaving height unset makes html content-sized, which is what must be
   measured. Nothing here depended on the 100% (it is Svelte template
   boilerplate); each tool's root sets its own box. Guarded by
   tests/iframe-resize-guard.test.js. */
html, body {
	position: relative;
	width: 100%;
}

/* The child must NEVER be a scroll target. Under auto-height the frame is
   sized to its content, so the child document has nothing to scroll — but
   iOS Safari still lets a touch that STARTS inside an iframe be claimed by
   the child document, and a claimed gesture with nowhere to go just dies.
   On a real iPhone that read as "scrolling in the modal keeps getting
   stuck; tapping blank space unfreezes it" (the tap resets iOS's gesture
   target). overflow:hidden removes the child from scroll-target candidacy;
   touch-action: pan-y hands vertical pans to the parent scroller outright.
   Not reproducible in desktop WebKit (mouse drags route differently), so
   the proof is the phone. Guarded by tests/iframe-resize-guard.test.js. */
/* Scoped to the auto-height handshake: html[data-autoheight] is set only
   once a parent has told us it is driving the frame's height, i.e. exactly
   the case where the child has nothing to scroll. A direct visit to the app
   (no parent, tall tool) keeps a scrolling document. */
html[data-autoheight] {
	overflow: hidden;
	touch-action: pan-y;
}

body {
	color: #333;
	margin: 0;
	padding: 8px;
	box-sizing: border-box;
	font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

a {
	color: rgb(0,100,200);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a:visited {
	color: rgb(0,80,160);
}

label {
	display: block;
}

input, button, select, textarea {
	font-family: inherit;
	font-size: inherit;
	padding: 0.4em;
	margin: 0 0 0.5em 0;
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: 2px;
}

input:disabled {
	color: #ccc;
}

input[type="range"] {
	height: 0;
}

button {
	color: #333;
	background-color: #f4f4f4;
	outline: none;
}

button:disabled {
	color: #999;
}

button:not(:disabled):active {
	background-color: #ddd;
}

button:focus {
	border-color: #666;
}