/* ==========================================================================
   MedStaffed — public forms, shared shell
   --------------------------------------------------------------------------
   ONE stylesheet for all six forms. Until 2026-09-04 each form carried its own
   inline <style> block: six private copies of a design system, which is exactly
   how the forms drifted away from the site. Anything shared lives here now.
   A form's own bespoke widgets stay in its own <style> block, because they are
   genuinely local -- quote.html's coverage slider is not a reusable component.

   It sits INSIDE this folder on purpose. Linking to ../Website/assets/site.css
   would make every form depend on a deployment layout nobody has decided, and
   whether this folder survives deployment at all is still open. Self-contained
   is the only arrangement that cannot break on upload.

   THE VALUES BELOW ARE THE SITE'S, AND THREE OF THEM ARE FIXES.
   Measured on 2026-09-04, live, on the pages where people actually type:
     - the submit button was #FFF on --teal .............. 2.45:1  (needs 4.5)
     - --teal-d was #079B72 .............................. 3.54:1  (needs 4.5)
     - --muted was #64748B on the grey ground ............ 4.40:1  (needs 4.5)
   The site had already found and fixed all three; the forms never got the fix.
   Do not "restore" the old hex values -- they are failures, not brand.
   ========================================================================== */

:root{color-scheme:light}   /* Android Chrome auto-dark would invert every ratio above */

:root{
  --navy:#1D1D35;
  --navy-soft:#2A2A48;
  --teal:#09BC8A;
  --teal-d:#067C5B;     /* was #079B72 — see header */
  --focus:#079C73;
  --mint:#E6F6F3;
  /* PAPEL, no gris de interfaz. Era #F4F6F9, el gris del sitio anterior. El sitio entero paso al
     papel calido el 2026-09-07 y esto es lo que hace que un formulario se lea como parte de el.
     Y no es solo tono: los campos son BLANCOS. Sobre la tarjeta blanca de antes, un campo y su
     fondo eran la misma superficie y lo unico que decia "escribe aqui" era un borde de 1px.
     Sobre papel el campo ES una superficie distinta. El formulario se lee mejor, no solo distinto. */
  --bg:#F7F5F1;
  --ink:#14141F;        /* titulares; --text sigue siendo el cuerpo */
  --border:#E2E8F0;
  --text:#1E293B;
  --muted:#5F6E84;      /* was #64748B — see header */
  --white:#FFFFFF;
  --on-navy:#C7C9D6;
  /* EL BORDE DE UN CONTROL, con nombre. Estaba escrito a mano como #748399 en la regla de los
     campos, con un comentario de nueve lineas explicando por que ese numero y no otro — y en el
     mismo repositorio, los widgets propios de quote.html usaban --border (#E2E8F0), que sobre
     blanco mide 1.23:1 donde WCAG 1.4.11 pide 3. Un numero medido que vive dentro de una sola
     regla no lo hereda nadie. Medido: 3.85 sobre la tarjeta, 3.56 sobre el gris anterior,
     3.54 sobre el papel, 3.46 sobre mint. --border sigue existiendo y sigue siendo correcto para
     lo que es: una linea que SEPARA, no una que delimita algo donde se hace clic. */
  --edge:#748399;
  --danger:#B91C1C;
  --danger-bg:#FEF2F2;
  --danger-br:#FECACA;

  --display:'Poppins',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --body:'Open Sans',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  /* The site's scale. The forms were running body copy at 12.5-14.5px, which is
     the same fine-print problem the site fixed on 2026-09-04: headings large,
     the writing under them set like terms and conditions. */
  --fs-xs:12.5px; --fs-sm:15px; --fs-base:16px; --fs-md:17px; --fs-lg:20px;
  /* 16px NO ES ESTETICA, ES UN COMPORTAMIENTO DEL NAVEGADOR. Safari en iOS hace zoom automatico
     sobre cualquier campo cuyo texto mida menos de 16px en cuanto recibe el foco, y al hacerlo
     desplaza la pagina entera: el usuario toca "Nombre", el movil salta, y tiene que volver a
     colocarse en cada campo del formulario. Estaba a --fs-sm (15px) en los seis formularios.
     Un pixel de diferencia y el formulario deja de pelearse con el telefono. */
  --fs-input:16px;
  --r:10px; --r-lg:16px;
  --shadow:0 10px 30px rgba(15,23,42,.06);
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:var(--body);font-size:var(--fs-base);line-height:1.6;
  -webkit-font-smoothing:antialiased}
h1,h2,h3,.brand{font-family:var(--display);letter-spacing:-.01em}
/* LOS <button> Y LOS CONTROLES NO HEREDAN font-family. Medido 2026-09-07: la tarjeta de nivel de
   experiencia de quote.html — donde el cliente elige lo que va a pagar — se renderizaba en ARIAL,
   porque `.lvl` es un <button> y ninguna regla le daba tipo. Lo mismo el paso de cantidad y el
   boton de anadir posicion. Se ve mal y no se ve por que: el tamano y el color median correcto. */
button,input,select,textarea{font-family:var(--body)}
b,strong{font-weight:600}   /* Open Sans 700 is never downloaded; 700 would synthesise */

/* Skip link — the forms had none. A keyboard user landing here had to tab the
   whole header before reaching the first field. */
.skip{position:absolute;left:-9999px;top:0;background:var(--white);color:var(--navy);
  font-family:var(--display);font-weight:600;font-size:var(--fs-sm);
  padding:12px 16px;border-radius:0 0 var(--r) 0;z-index:10}
.skip:focus{left:0}

:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
.hero :focus-visible{outline-color:#fff}

/* ── the header band ───────────────────────────────────────────────────────
   Kept as a navy band, because a form IS a transaction and the dark band says so
   -- but LEFT-ALIGNED in a container, with the teal rule the site opens its
   editorial pages with. Centred text in a narrow column was the forms' own
   dialect; this is the site's. */
.hero{background:var(--navy);color:#fff;text-align:left}
/* 44px, not 20: the card below sits in a 16px-padded .wrap and carries 28px of its own
   padding, so its CONTENT starts 44px in. Matching that here puts the headline, the lede and
   the first field label on one left edge all the way down the page. At 20px they were 17px
   apart -- close enough to look like a mistake rather than a decision, which is exactly the
   kind of thing only a screenshot shows. Holds at every width, because both sides are fixed. */
.hero-in{max-width:640px;margin:0 auto;padding:30px 44px 64px}
@media (max-width:520px){ .hero-in{padding-left:20px;padding-right:20px} }
.brand{display:inline-block;font-weight:700;font-size:var(--fs-lg);color:#fff;
  text-decoration:none}
.brand span{color:var(--teal)}
/* La barra teal se queda, pero mas corta y mas fina: en el sitio anterior era el dispositivo de
   cabecera de pagina (`.page-head .rule`, ahora huerfano); aqui es puntuacion, no estructura. */
.hero .rule{width:40px;height:2px;background:var(--teal);margin:30px 0 22px}
/* La misma escala que `.solo h1` en el sitio: display, 700, -.03em, interlineado casi cerrado.
   El titular de un formulario estaba a 2.1rem con line-height 1.15, que es un h2 del sitio viejo. */
.hero h1{font-family:var(--display);font-weight:700;font-size:clamp(1.7rem,4.4vw,2.7rem);
  line-height:1.04;letter-spacing:-.03em;margin:0;color:#fff;max-width:17ch}
.hero h1 em{font-style:normal;color:var(--teal)}
.hero p{margin:18px 0 0;max-width:48ch;color:#D6D9E6;font-size:var(--fs-md);line-height:1.6}
/* The reassurance strip. --on-navy, not the old #AEB1C4, which was the palest
   thing on any form and sat on the darkest ground. */
.pts{display:flex;gap:20px;flex-wrap:wrap;margin-top:22px;
  color:var(--on-navy);font-size:var(--fs-xs);
  font-family:var(--display);font-weight:600;letter-spacing:.04em}
.pts span{display:inline-flex;align-items:center;gap:8px}
.pts i{color:var(--teal);font-style:normal}

/* ── LA TARJETA FLOTANTE SE FUE ────────────────────────────────────────────
   Era una tarjeta blanca con sombra, esquinas de 16px y un solape de -52px sobre el hero: el
   idioma del sitio anterior, y el unico recuadro que quedaba en todo el proyecto despues de que
   la capa editorial retirara los de la portada, los de tarifas y el aviso de for-candidates.
   Ahora el formulario ocurre sobre el papel y las secciones se separan con un filete, igual que
   `.row`, `.kn` y `.ff` en el sitio. **LA ALINEACION SE MANTIENE Y NO ES CASUAL:** el hero mete su
   contenido 44px dentro de una caja de 640, y esta hace lo mismo, asi que titular, entradilla y la
   primera etiqueta caen sobre un unico borde izquierdo de arriba abajo. Antes eso se conseguia
   sumando 16px de `.wrap` mas 28px de `.card`; ahora es un solo 44. */
.wrap{max-width:640px;margin:0 auto 72px;padding:0 44px}
@media (max-width:520px){ .wrap{padding:0 20px} }
.card{background:none;border:0;border-radius:0;box-shadow:none;padding:44px 0 0}
.card+.card{margin-top:0;padding-top:36px;border-top:1px solid #CBD5E1}

.sec-title{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.15;
  font-size:clamp(1.15rem,2.6vw,1.45rem);color:var(--ink);margin:0 0 6px}
.sec-desc{font-size:var(--fs-sm);color:var(--muted);margin:0 0 26px;max-width:52ch}

/* ── fields ───────────────────────────────────────────────────────────────── */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:520px){ .grid{grid-template-columns:1fr} }
.field{margin-bottom:18px}
label.fl{display:block;font-family:var(--display);font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--navy);margin:0 0 7px}
.req{color:var(--teal-d)}
.opt{color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0}

/* TEXT-LIKE CONTROLS ONLY. This rule used to read `input,textarea,select`, and `width:100%` then
   applied to radios and checkboxes as well -- on apply.html that stretched every quiz radio across
   its row and shoved the option text to the far right, which looked broken and was. apply.html's
   own rule had been written as `input[type=text],input[type=email],...` precisely to avoid this;
   replacing it with a bare `input` selector threw that scoping away.
   Only a screenshot found it: the border colour, the font size and the label case all measured
   correct, because they were. */
input:not([type=radio]):not([type=checkbox]):not([type=file]):not([type=submit]):not([type=button]):not([type=range]),
textarea,select{width:100%;font-family:var(--body);font-size:var(--fs-input);
  padding:12px 14px;border:1px solid var(--edge);border-radius:var(--r);
  background:var(--white);color:var(--text);outline:none;
  transition:border-color .12s,box-shadow .12s}
/* --field-edge, and the value was WRONG until 2026-09-05.
   A field's edge is what says "type here": on these forms the input is white on a white card,
   so the border is the ONLY thing identifying the control, and WCAG 2.2 (1.4.11) wants 3:1 of it.
   This comment previously claimed #748399 satisfied that. It does not -- **measured 1.48:1 on the
   card**, barely better than the #E2E8F0 it replaced (1.28) and nowhere near the bar. It was
   chosen by COMPARING it to the old value and never measured, which is the exact failure the
   forms contrast sweep was queued to find; the first thing that sweep found was this.
   --edge (#748399) measured on every ground a field can sit on: card 3.85, paper 3.54, mint 3.46.
   Targeting well clear of 3.0 rather than landing on it, the same discipline the site's tokens
   use. The focused border is --teal-d, 5.20 on white, plus the mint ring. */
input:not([type=radio]):not([type=checkbox]):not([type=file]):not([type=submit]):not([type=button]):focus,
textarea:focus,select:focus{border-color:var(--teal-d);
  box-shadow:0 0 0 3px var(--mint)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
textarea{min-height:140px;resize:vertical;line-height:1.6}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--navy) 50%),
  linear-gradient(135deg,var(--navy) 50%,transparent 50%);
  background-position:calc(100% - 19px) 52%,calc(100% - 13px) 52%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:40px}

/* The spam honeypot. Must stay present, must stay unreachable — including to a
   screen reader and to keyboard focus, which `left:-9999px` alone does not do. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── the submit button ─────────────────────────────────────────────────────
   NAVY on teal, not white on teal. White on this teal measures 2.45:1 and this
   is the single most important control on the page. Navy on teal is 6.70:1.
   Same as the site's .btn-primary, which fixed this months ago. */
.btn{display:block;width:100%;font-family:var(--display);font-weight:600;
  font-size:var(--fs-sm);color:var(--navy);background:var(--teal);
  border:none;border-radius:var(--r);padding:16px;cursor:pointer;letter-spacing:.01em;
  min-height:52px;margin-top:var(--sp-btn,18px);
  transition:background .15s,transform .15s}
.btn:hover{background:#07A87A;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}

/* ── states ───────────────────────────────────────────────────────────────── */
.status{margin-top:14px;font-size:var(--fs-sm);padding:13px 15px;
  border-radius:var(--r);display:none}
.status.err{display:block;background:var(--danger-bg);color:var(--danger);
  border:1px solid var(--danger-br)}
/* Sin tarjeta debajo, el panel de exito necesita su propio suelo o queda flotando en el papel. */
.done{display:none;text-align:center;padding:44px 24px;background:var(--white);
  border:1px solid var(--border);border-radius:var(--r-lg);margin-top:44px}
.done .ic{width:64px;height:64px;border-radius:50%;background:var(--mint);
  color:var(--teal-d);display:flex;align-items:center;justify-content:center;
  font-size:32px;margin:0 auto 18px}
.done h2{font-family:var(--display);font-weight:700;letter-spacing:-.02em;color:var(--ink);
  margin:0 0 8px;font-size:clamp(1.15rem,2.6vw,1.45rem)}
.done p{color:var(--muted);font-size:var(--fs-sm);max-width:52ch;margin:0 auto}

.foot{text-align:center;color:var(--muted);font-size:var(--fs-xs);padding:0 16px 48px}
.foot a{color:var(--teal-d)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .btn:hover,.btn:active{transform:none!important}
}