/* =================================================================
   styles.css — foundations.

   Design tokens, the reset, the page shell (sky + centred column +
   dock spacing), typography and raw form controls.

   Nothing component-specific lives here. Load order matters:
   styles -> components -> animations -> responsive.
   ================================================================= */

:root{
  /* ---- brand palette ---- */
  --ink:#0C1B2A; --navy:#0B3B66; --blue:#1C7FD0; --blue-lt:#DCEEFB;
  --orange:#F26A21; --orange-dk:#C9500F; --orange-lt:#FFE3D0;
  --sun:#FFD34E; --green:#2FA96B; --hot:#E23A1F; --cool:#2BB8DE;

  /* ---- surfaces ---- */
  --paper:#FFFFFF; --mist:#F2F8FD; --line:#D6E6F2; --muted:#5A7488;

  /* ---- elevation ---- */
  --sh-sm:0 1px 2px rgba(11,59,102,.08);
  --sh:0 2px 6px rgba(11,59,102,.08), 0 10px 30px rgba(11,59,102,.10);
  --sh-lg:0 8px 40px rgba(11,59,102,.18);

  /* ---- radii ---- */
  --r:16px;          /* cards and panels */
  --r-md:14px;       /* buttons, tiles */
  --r-sm:13px;       /* option chips, list rows */
  --r-xs:12px;       /* inputs, small boxes */
  --r-pill:99px;

  /* ---- typography ---- */
  --font-body:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-display:"Archivo",sans-serif;
  --font-display-wide:"Archivo",system-ui,sans-serif;  /* hero headline only */
  --font-mono:"IBM Plex Mono",monospace;

  /* ---- motion ---- */
  --ease:cubic-bezier(.2,.9,.3,1);
  --t-fast:.18s;

  /* ---- layout ---- */
  --col:540px;       /* max content width */
  --gutter:14px;
}

/* ---------- reset ---------- */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;overscroll-behavior-y:none;overflow-x:hidden}
body{
  font-family:var(--font-body);
  color:var(--ink);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;
  background:#8FD2F7;min-height:100vh;
}

/* ---------- Florida sky (fixed backdrop) ---------- */
.sky{position:fixed;inset:0;z-index:0;overflow:hidden;
  background:linear-gradient(180deg,#4FB3EF 0%,#8ED5F8 42%,#CFEEFF 74%,#EAF7FF 100%)}
.sky .sun{position:absolute;top:-70px;right:-70px;width:270px;height:270px;border-radius:50%;
  background:radial-gradient(circle,#FFF0B8 0%,#FFD34E 42%,rgba(255,211,78,0) 72%)}
.sky .cloud{position:absolute;background:rgba(255,255,255,.75);border-radius:var(--r-pill);filter:blur(1px)}
.sky .c1{width:150px;height:34px;top:16%;left:-40px}
.sky .c2{width:110px;height:26px;top:31%;right:-30px}

/* ---------- page shell ---------- */
.app{position:relative;z-index:1;max-width:var(--col);margin:0 auto;min-height:100vh;
  display:flex;flex-direction:column;padding:0 var(--gutter)}
main{flex:1;padding-bottom:112px}   /* clears the fixed dock */

/* One screen visible at a time; navigation.js toggles .on */
.screen{display:none}
.screen.on{display:block}

/* ---------- typography ---------- */
.display{font-family:var(--font-display-wide);font-variation-settings:"wdth" 112,"wght" 800;
  letter-spacing:-.025em;line-height:1.03;margin:0}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* ---------- form controls ---------- */
input[type=number],input[type=text],input[type=tel],input[type=email],select,textarea{
  width:100%;padding:14px 14px;font:inherit;font-size:17px;font-weight:600;color:var(--ink);
  background:var(--mist);border:2px solid var(--line);border-radius:var(--r-xs);appearance:none}
select{font-weight:600;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%230B3B66' stroke-width='2.2' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:40px}
textarea{font-weight:400;font-size:16px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);background:#fff;
  box-shadow:0 0 0 4px rgba(28,127,208,.18)}

/* range sliders — the fill percentage is set from JS as --p */
input[type=range]{width:100%;height:44px;background:transparent;appearance:none;margin:4px 0 0}
input[type=range]::-webkit-slider-runnable-track{height:14px;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--orange) 0%,var(--orange) var(--p,50%),#E3EDF5 var(--p,50%),#E3EDF5 100%)}
input[type=range]::-webkit-slider-thumb{appearance:none;width:34px;height:34px;border-radius:50%;
  background:#fff;border:4px solid var(--orange);margin-top:-10px;box-shadow:0 3px 10px rgba(0,0,0,.22);cursor:grab}
input[type=range]::-moz-range-track{height:14px;border-radius:var(--r-pill);background:#E3EDF5}
input[type=range]::-moz-range-progress{height:14px;border-radius:var(--r-pill);background:var(--orange)}
input[type=range]::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:#fff;
  border:4px solid var(--orange);box-shadow:0 3px 10px rgba(0,0,0,.22);cursor:grab}
input[type=range]:focus-visible{outline:3px solid rgba(28,127,208,.5);outline-offset:4px;border-radius:var(--r-pill)}

/* ---------- semantic element normalisation ----------
   The refactor promoted several <div>/<span> wrappers to <fieldset>,
   <legend> and <p> for accessibility. Browsers give those elements
   default margins, borders and padding that the original <div>s did
   not have, so they are zeroed here. Removing this block will make
   the layout drift. */
fieldset{border:0;padding:0;margin:0;min-inline-size:0}
legend{padding:0;display:block;width:100%}
p.steplabel{margin:7px 0 0}
p.jpbub{margin:0}
p.script{margin:14px 0 0}
p.codebar{margin:12px 0 0}

/* ---------- utilities ---------- */
.hide{display:none !important}
.nomargin{margin:0}