/*
  LexVerity intake portal: shared stylesheet.

  WHY THIS FILE EXISTS. Both forms shipped with their own inline <style> block
  set in Georgia, on a grey wash, with a palette that existed nowhere else in
  the business. A prospective client who clicked through from lexverity.co.uk
  arrived at what looked like a different company's form, which is the single
  cheapest way to lose a high-value enquiry at the exact moment of intent.

  Everything below is the marketing site's own system, copied from
  site/src/styles/tokens.css so the two surfaces cannot drift:
    - the navy taken from the logo mark (#16294a), not invented
    - General Sans, self-hosted, the same four weights the site and the app ship
    - the same spacing scale, radii, focus ring and reduced-motion rules

  Fraunces is deliberately NOT loaded here. It is the site's display serif and
  earns its place on a marketing hero; on a thirteen-section form it is 100kB
  for one line of text. The form headings use General Sans 700.

  Zero dependencies, one request, no build step. The server ships this file
  straight from public/.
*/

/* ---- Self-hosted type, same files as the marketing site ---------------- */
@font-face { font-family:'General Sans'; src:url('/fonts/general-sans/general-sans-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'General Sans'; src:url('/fonts/general-sans/general-sans-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'General Sans'; src:url('/fonts/general-sans/general-sans-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'General Sans'; src:url('/fonts/general-sans/general-sans-700.woff2') format('woff2'); font-weight:700; font-display:swap; }

:root {
  /* Colour, lifted verbatim from the site tokens. Do not re-pick these by eye. */
  --navy: #16294a;
  --navy-deep: #0e1c33;
  --navy-ink: #0b1526;
  --blue: #6fa0dc;
  --blue-action: #1b5aa0;
  --blue-action-hover: #16497f;

  --ink: #12161f;
  --ink-2: #38414f;
  --ink-3: #667080;

  --paper: #ffffff;
  --canvas: #eef1f6;
  --canvas-2: #e7ebf2;

  --line: rgba(18, 22, 31, 0.12);
  --line-soft: rgba(18, 22, 31, 0.07);
  --line-dark: rgba(238, 241, 246, 0.14);

  --good: #1f6b47;
  --good-soft: #e6f1ec;
  --bad: #a02020;
  --bad-soft: #fbeceb;
  --warn: #7a5b10;
  --warn-soft: #faf4e3;

  --font-body: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --t-body: 1.0425rem;
  --t-sm: 0.9275rem;
  --t-label: 0.78rem;
  --lh-body: 1.62;
  --lh-snug: 1.16;
  --tr-tight: -0.028em;

  --s1: 0.25rem; --s2: 0.5rem;  --s3: 0.75rem; --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 2.75rem; --s8: 3.5rem;

  --radius: 4px;
  --radius-lg: 8px;
  --shadow-panel: 0 18px 44px -22px rgba(11, 21, 38, 0.45);
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --dur: 240ms;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

img, svg { display: block; max-width: 100%; }

/* The one sheet the form lives on. 42rem is the site's reading measure plus a
   field's worth of chrome: wide enough for a two-column row, narrow enough that
   a label and its input stay visually paired. */
.sheet {
  max-width: 42rem;
  margin: 0 auto;
  background: var(--paper);
  min-height: 100vh;
  border-inline: 1px solid var(--line);
}
@media (min-width: 48rem) {
  .sheet { margin-block: var(--s6); min-height: 0; border: 1px solid var(--line);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-panel); overflow: hidden; }
  body { padding-block: 1px; }
}

/* ---- Masthead ---------------------------------------------------------- */
.mast {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s5) var(--s7) var(--s4);
  border-bottom: 1px solid var(--line);
}
.mast a.home { display: flex; align-items: center; min-height: 44px; }
.mast img { height: 30px; width: auto; }
.mast .bar { width: 1px; align-self: stretch; background: var(--line); }
.mast .tag { font-size: var(--t-sm); line-height: 1.4; color: var(--ink-3); }
.mast .tag b { display: block; font-weight: 600; color: var(--navy); }
@media (max-width: 35rem) { .mast { padding: var(--s4) var(--s5) var(--s3); } }

/* ---- Progress ---------------------------------------------------------- */
.dots {
  display: flex; gap: 5px; align-items: center;
  padding: var(--s4) var(--s7);
  border-bottom: 1px solid var(--line-soft);
  background: var(--canvas);
}
.dots i { height: 3px; flex: 1; background: var(--canvas-2); border-radius: 2px;
  transition: background var(--dur) var(--ease); }
.dots i.on { background: var(--blue-action); }
.dots span {
  font-size: var(--t-label); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3);
  margin-inline-start: var(--s3); white-space: nowrap;
}
@media (max-width: 35rem) { .dots { padding: var(--s3) var(--s5); } }

/* ---- Body -------------------------------------------------------------- */
.body { padding: var(--s7); }
@media (max-width: 35rem) { .body { padding: var(--s6) var(--s5); } }

h1, h2 {
  font-weight: 700; color: var(--ink);
  line-height: var(--lh-snug); letter-spacing: var(--tr-tight);
  text-wrap: balance;
}
h1 { font-size: clamp(1.55rem, 1.25rem + 1.3vw, 2rem); margin-bottom: var(--s3); }
h2 { font-size: clamp(1.3rem, 1.12rem + 0.8vw, 1.6rem); margin-bottom: var(--s3); }
h3 { font-size: 1.08rem; font-weight: 600; color: var(--ink); margin-bottom: var(--s2); }

.dek { color: var(--ink-2); margin-bottom: var(--s3); text-wrap: pretty; }
.sub { color: var(--ink-2); font-size: var(--t-sm); margin-bottom: var(--s6); text-wrap: pretty; }

.step { display: none; }
.step.on { display: block; }

/* ---- Fields ------------------------------------------------------------ */
label {
  display: block; font-size: var(--t-label); font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-2); margin-bottom: var(--s2);
}
input[type=text], input[type=email], input[type=tel], input[type=date],
input[type=number], select, textarea {
  width: 100%;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: var(--radius);
  /* 16px minimum. Anything smaller and iOS Safari zooms the viewport on focus,
     which on a thirteen-section form is relentless. */
  font: 400 1rem/1.45 var(--font-body);
  color: var(--ink);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23667080' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  padding-right: 2.2rem;
}
textarea { min-height: 6rem; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: var(--ink-3); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--blue-action);
  box-shadow: 0 0 0 3px rgba(27, 90, 160, 0.16);
}
:focus-visible { outline: 2px solid var(--blue-action); outline-offset: 3px; border-radius: 2px; }

.f { margin-bottom: var(--s5); }
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s5); }
.g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--s5); }
@media (max-width: 35rem) { .g2, .g3 { grid-template-columns: 1fr; } }

.hint { font-size: var(--t-sm); color: var(--ink-3); margin-top: var(--s2);
  text-transform: none; letter-spacing: 0; font-weight: 400; }

/* ---- Tap choices ------------------------------------------------------- */
.choices { display: grid; gap: var(--s2); }
.choice {
  display: flex; gap: var(--s3); align-items: flex-start;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s3) var(--s4);
  cursor: pointer; background: var(--paper);
  font-size: var(--t-body); line-height: 1.45;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.choice:hover { border-color: var(--navy); background: var(--canvas); }
.choice:has(input:checked) {
  border-color: var(--blue-action);
  background: var(--canvas);
  box-shadow: inset 3px 0 0 var(--blue-action);
}
/* :has() is everywhere now, but the script also toggles .sel, so a browser
   without it still shows the selection. Belt and braces, one rule each. */
.choice.sel {
  border-color: var(--blue-action);
  background: var(--canvas);
  box-shadow: inset 3px 0 0 var(--blue-action);
}
.choice input { margin-top: 0.3rem; flex: none; width: 1rem; height: 1rem;
  accent-color: var(--blue-action); }
.choice b { font-weight: 600; color: var(--ink); }
.choice em { display: block; font-style: normal; font-size: var(--t-sm);
  color: var(--ink-3); margin-top: 2px; }

/* ---- Yes / no rows ----------------------------------------------------- */
.right {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s4);
  align-items: center;
  border-bottom: 1px solid var(--line-soft);
  padding: var(--s4) 0;
}
.right:last-of-type { border-bottom: none; }
.right p { margin: 0; font-size: var(--t-body); }
.right p em { display: block; font-style: normal; font-size: var(--t-sm); color: var(--ink-3); }
.yn { display: flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.yn button {
  border: none; background: var(--paper);
  /* 44px tall. These are the most-tapped controls on the form. */
  padding: 0 1rem; min-height: 44px; cursor: pointer;
  font: 600 var(--t-sm)/1 var(--font-body); color: var(--ink-3);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.yn button + button { border-inline-start: 1px solid var(--line); }
.yn button:hover { background: var(--canvas); color: var(--ink); }
.yn button.on { background: var(--navy); color: var(--paper); }

/* ---- Panels ------------------------------------------------------------ */
.panel {
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--navy);
  background: var(--canvas);
  border-radius: var(--radius);
  padding: var(--s4) var(--s5);
  margin-block: var(--s5);
  font-size: var(--t-sm);
}
.panel b { display: block; color: var(--navy); font-weight: 700;
  font-size: var(--t-body); margin-bottom: var(--s2); }
.panel.ok   { border-inline-start-color: var(--good); background: var(--good-soft); }
.panel.ok b { color: var(--good); }
.panel.warn { border-inline-start-color: var(--warn); background: var(--warn-soft); }
.panel.warn b { color: var(--warn); }
.panel ul { margin: var(--s3) 0 0 var(--s5); }
.panel li { margin-bottom: var(--s2); }

/* ---- Buttons ----------------------------------------------------------- */
.nav {
  display: flex; gap: var(--s3); align-items: center;
  margin-top: var(--s7); padding-top: var(--s5);
  border-top: 1px solid var(--line);
}
.nav .sp { margin-inline-start: auto; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 1.4rem;
  border: 1px solid var(--navy); border-radius: var(--radius);
  background: var(--paper); color: var(--navy);
  font: 600 var(--t-sm)/1 var(--font-body);
  cursor: pointer; text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { background: var(--navy); color: var(--paper); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: default; transform: none; }
.btn:disabled:hover { background: var(--paper); color: var(--navy); }

.btn.solid {
  background: var(--blue-action); border-color: var(--blue-action); color: var(--paper);
}
.btn.solid:hover { background: var(--blue-action-hover); border-color: var(--blue-action-hover); }
.btn.solid:disabled:hover { background: var(--blue-action); color: var(--paper); }

.btn.txt {
  border-color: transparent; background: none; color: var(--ink-3);
  padding-inline: var(--s2); font-weight: 500;
}
.btn.txt:hover { background: none; color: var(--ink); text-decoration: underline; }

.btn.sm { min-height: 38px; padding: 0 0.9rem; font-size: var(--t-label); }

/* ---- Errors and status ------------------------------------------------- */
.err {
  display: none;
  margin-top: var(--s4);
  padding: var(--s3) var(--s4);
  border-radius: var(--radius);
  background: var(--bad-soft);
  border-inline-start: 3px solid var(--bad);
  color: var(--bad);
  font-size: var(--t-sm);
  font-weight: 500;
}

.saveline {
  font-size: var(--t-label); color: var(--ink-3);
  padding: var(--s3) var(--s7); border-top: 1px solid var(--line-soft);
}

/* ---- Resume bar -------------------------------------------------------- */
.resume {
  display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center;
  padding: var(--s4) var(--s7);
  background: var(--canvas); border-bottom: 1px solid var(--line-soft);
  font-size: var(--t-sm);
}
.resume input[type=text] {
  flex: 1; min-width: 15rem;
  font-size: var(--t-sm); padding: 0.45rem 0.6rem;
  background: var(--paper); color: var(--ink-3);
}
@media (max-width: 35rem) { .resume { padding: var(--s4) var(--s5); } }

/* ---- Footer ------------------------------------------------------------ */
.foot {
  padding: var(--s5) var(--s7) var(--s6);
  border-top: 1px solid var(--line);
  background: var(--canvas);
  font-size: var(--t-label);
  line-height: 1.65;
  color: var(--ink-3);
}
.foot a { color: var(--ink-2); }
.foot p + p { margin-top: var(--s2); }
@media (max-width: 35rem) { .foot { padding: var(--s5); } }

/* Honeypot. Off-screen rather than display:none, because some bots skip
   hidden inputs and this one is meant to be filled in. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- Small utilities ----------------------------------------------------
   These replace inline style attributes that were hard-coding Georgia and raw
   hex values into the markup. Kept deliberately few: if a page needs a sixth
   one, it probably needs a real class instead. */
.plain {
  font: 400 var(--t-body)/var(--lh-body) var(--font-body);
  color: var(--ink);
  text-transform: none; letter-spacing: 0; margin: 0;
}
.note   { font-size: var(--t-sm); color: var(--ink-3); }
.mb     { margin-bottom: var(--s4); }
.mb-lg  { margin-bottom: var(--s6); }
.mt     { margin-top: var(--s4); }
.mt-lg  { margin-top: var(--s6); font-size: 1.08rem; }
.narrow { max-width: 19rem; }
.ta-m   { min-height: 6.5rem; }
.ta-l   { min-height: 8rem; }

/* The resume link sits in an .acts row and has to take the leftover width. */
#resumelink { flex: 1; min-width: 15rem; font-size: var(--t-sm); color: var(--ink-3); }