/* ══════════════════════════════════════════════════════════════════════════
   Electronic NEW-STARTER PACK — page styles (HRGuard PG #1984 phase 1).

   Mobile-first: this is completed on a phone, standing in a pub, by someone
   who has never seen it before. Large touch targets, one question per row,
   generous spacing, and a form that stays legible at 320px.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --ink: #16191d;
  --ink-soft: #55606c;
  --line: #d3d9e0;
  --bg: #f4f6f8;
  --card: #ffffff;
  --accent: #1f5f4b;
  --accent-soft: #eaf3ef;
  --on-accent: #ffffff;   /* text on the accent colour */
  --trim: transparent;    /* thin trim line under the header and card headings */
  --warn: #8a2b18;
  --radius: 10px;
  --pad: 16px;
}

* { box-sizing: border-box; }

/* ── Per-business branding (set from the pack: <html data-brand="doc|lpl">) ──
   Duke of Cornwall: navy #112C3B primary, Cornish Stone #CEC8B6 accent (projects/doc-stationery/CONTEXT.md).
   LPL: its logo pink #C4467E (same file). Any other business keeps the original green until it has a palette. */
html[data-brand="doc"] { --accent: #112C3B; --accent-soft: #eeece4; --trim: #CEC8B6; }
html[data-brand="lpl"] { --accent: #C4467E; --accent-soft: #fbeef4; }

/* Never let one over-wide child make the page slide sideways on a phone. */
html, body { max-width: 100%; overflow-x: hidden; }
fieldset { min-width: 0; }
main, .card, label, fieldset, .step { min-width: 0; }
.card, .note, .muted, label, legend, p, li, dd { overflow-wrap: anywhere; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.topbar {
  background: var(--accent);
  color: var(--on-accent);
  border-bottom: 4px solid var(--trim);
  padding: 14px var(--pad);
  padding-top: max(14px, env(safe-area-inset-top));
  display: flex;
  align-items: center;
  gap: 14px;
}
.brand-logo { display: block; height: 56px; width: auto; flex: none; }
.brand-text { min-width: 0; }
.brand { font-size: 19px; font-weight: 700; letter-spacing: .2px; }
.brand-sub { font-size: 13px; opacity: .85; margin-top: 2px; }

main { max-width: 720px; margin: 0 auto; padding: var(--pad); }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--pad);
  margin-bottom: 14px;
}
.card h1 { font-size: 21px; margin: 0 0 10px; }
.card h3 { font-size: 17px; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--trim, var(--accent-soft)); }
html:not([data-brand="doc"]) .card h3 { border-bottom-color: var(--accent-soft); }

h2.part {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ink-soft);
  margin: 26px 0 10px;
}

.state { text-align: center; padding: 34px var(--pad); }
.state h1 { margin-bottom: 12px; }

.intro .terms dl {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px 12px;
  margin: 14px 0 0;
  padding: 12px;
  background: var(--accent-soft);
  border-radius: 8px;
}
.intro .terms dt { font-size: 13px; color: var(--ink-soft); }
.intro .terms dd { margin: 0 0 8px; font-weight: 600; }
.intro .terms dd:last-child { margin-bottom: 0; }

@media (min-width: 520px) {
  .intro .terms dl { grid-template-columns: auto 1fr; align-items: baseline; }
  .intro .terms dt { text-align: right; }
  .intro .terms dd { margin-bottom: 4px; }
}

/* ── Fields ─────────────────────────────────────────────────────────────── */
label {
  display: block;
  margin-bottom: 15px;
  font-weight: 600;
  font-size: 15px;
}
label small { display: block; font-weight: 400; color: var(--ink-soft); font-size: 13px; margin-top: 4px; }

input[type="text"], input:not([type]), input[type="tel"], input[type="email"],
input[type="date"], input[type="password"], input[type="number"], select, textarea {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin-top: 6px;
  padding: 12px;
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  /* 16px minimum stops iOS zooming the viewport on focus. */
  font-size: 16px;
}
textarea { resize: vertical; }
input[type="date"] { -webkit-appearance: none; appearance: none; min-height: 48px; }
input[type="password"] { letter-spacing: .4em; }

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

/* Only flag a bad answer once they've engaged with it — never on first paint. */
input:user-invalid,
textarea:user-invalid,
select:user-invalid { border-color: var(--warn); }

fieldset {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  margin: 0 0 15px;
}
legend { font-weight: 600; font-size: 15px; padding: 0 6px; }

label.inline {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 400;
  /* Comfortable thumb target on a phone. */
  min-height: 44px;
  padding: 6px 0;
  margin-bottom: 0;
}
label.inline input { width: 22px; height: 22px; margin: 0; flex: none; margin-top: 1px; }
label.inline.strong { font-weight: 600; }
/* HMRC employee statements are long paragraphs — give them air and a border
   so each reads as one selectable block. */
label.inline.stmt {
  align-items: flex-start;
  border: 1px solid var(--line, #d8d8d8);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 8px;
  line-height: 1.45;
}

.req { color: var(--warn); }
.muted { color: var(--ink-soft); font-size: 14px; }
.small { font-size: 13px; }
.nowrap { white-space: nowrap; }

ul.rtw { padding-left: 20px; margin: 10px 0 16px; }
ul.rtw li { margin-bottom: 9px; }

.prefilled {
  background: var(--accent-soft);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
}
.prefilled p { margin: 0; font-size: 15px; }

.sensitive .why {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.note {
  background: #fdf6ec;
  border-left: 3px solid #b8842a;
  padding: 10px 12px;
  font-size: 14px;
  margin: 4px 0 0;
}

/* ── Signature ──────────────────────────────────────────────────────────── */
.sig-modes { display: flex; gap: 8px; margin: 14px 0 10px; }
.mode {
  flex: 1;
  padding: 11px;
  font: inherit;
  font-weight: 600;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}
.mode.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.sig-wrap {
  border: 2px dashed var(--line);
  border-radius: 8px;
  background: #fff;
  height: 170px;
  touch-action: none;
}
.sig-wrap.active { border-color: var(--accent); }
.sig-wrap canvas { display: block; width: 100%; height: 100%; }

.sig-actions { display: flex; gap: 8px; margin-top: 8px; }
.sig-actions button {
  flex: 1; padding: 10px; font: inherit;
  background: #fff; border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
}

.font-choices { display: flex; gap: 8px; margin: 10px 0; }
.font-choice {
  flex: 1; padding: 10px; font: inherit;
  background: #fff; border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
}
.font-choice.active { border-color: var(--accent); background: var(--accent-soft); }
#typedCanvas { display: block; width: 100%; height: 110px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }

/* ── Submit ─────────────────────────────────────────────────────────────── */
.submit {
  display: block;
  width: 100%;
  margin: 18px 0 10px;
  padding: 16px;
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  color: var(--on-accent);
  background: var(--accent);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}
.submit:disabled { opacity: .6; cursor: default; }

.error {
  background: #fdecea;
  border-left: 3px solid var(--warn);
  color: var(--warn);
  padding: 11px 12px;
  border-radius: 6px;
  font-size: 15px;
  margin: 12px 0 0;
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

/* Joined contract panel (PG #2867): the link reuses .submit, which needs [hidden] to win. */
#contractLink[hidden] { display: none; }
#contractLink { text-align: center; text-decoration: none; }

/* ══ Pre-day-one pack (05/11/2026): steps, progress, uploads, policies ═════ */
[hidden] { display: none !important; }

.progress-card { padding-bottom: 12px; }
.progress-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-bottom: 8px; }
.progress { height: 10px; background: var(--accent-soft); border-radius: 999px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .25s ease; }
.progress-card p { margin: 8px 0 0; }

.nav { display: flex; gap: 10px; margin: 6px 0 30px; }
.nav .submit { flex: 1; width: auto; margin: 0; }
.btn-alt {
  min-height: 48px;
  padding: 0 18px;
  background: #fff;
  color: var(--accent);
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.btn-alt:disabled { opacity: .6; cursor: default; }
.link-btn { background: none; border: 0; padding: 4px 8px; color: var(--warn); font: inherit; text-decoration: underline; cursor: pointer; }

.upload {
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  padding: 14px;
  margin: 12px 0;
  background: #fbfcfd;
}
.upload b { display: block; margin-bottom: 4px; }
.file-list { list-style: none; margin: 10px 0 0; padding: 0; }
.file-list li { padding: 6px 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 8px; word-break: break-word; }

.policy-list { list-style: none; margin: 0; padding: 0; }
.policy-list li { padding: 10px 0; border-top: 1px solid var(--line); }
.policy-list li:first-child { border-top: 0; }
.policy-list a { color: var(--accent); font-weight: 600; }

.done-progress { margin-bottom: 8px; color: var(--accent); }

/* Reserve the space of the status and error lines so the page does not jump when they appear. */
#saveStatus { min-height: 1.5em; }
html { scrollbar-gutter: stable; }
html[data-brand="doc"] .brand-sub { color: #CEC8B6; opacity: 1; }

/* ══ Free movement between steps (11/11/2026) ═════════════════════════════
   Every step is a button with a tick (complete) or "Still needed". Nothing blocks moving on; Send lists what is missing. */
/* Tabs across the top: one per section, scrolling sideways on a phone, each with a tick or "Needed". */
.step-list { margin: 12px -4px 0; padding: 0 4px 6px; display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.step-pill {
  flex: 0 0 auto; min-width: 104px; max-width: 130px; min-height: 64px; padding: 6px 8px; scroll-snap-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: #fff; color: var(--accent); border: 2px solid var(--line); border-bottom-width: 4px; border-radius: var(--radius) var(--radius) 4px 4px;
  font: inherit; font-size: 12px; line-height: 1.2; cursor: pointer; text-align: center;
}
.step-pill .pill-num { font-weight: 700; font-size: 15px; }
.step-pill .pill-title { display: block; font-size: 12px; }
.step-pill .pill-mark { font-size: 11px; font-weight: 700; color: var(--warn); }
.step-pill.done .pill-mark { color: #1f6b3a; font-size: 15px; }
.step-pill.done { border-bottom-color: #4c9a68; }
.step-pill.needed { border-bottom-color: #d98f7e; }
.step-pill.current { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.step-pill.current .pill-mark, .step-pill.current.done .pill-mark { color: var(--on-accent); }
.step-pill:focus-visible, .missing a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* Wider than a phone (13/11/2026): every tab shares the card's width equally, one column per tab however many there are, so the row can
   never be wider than its card. min-width:0 lets a tab shrink below its label; labels wrap onto a second line instead of spilling out. */
@media (min-width: 700px) {
  .step-list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; overflow-x: visible; scroll-snap-type: none; }
  .step-pill { min-width: 0; max-width: none; padding: 6px 4px; }
  .step-pill .pill-title { max-width: 100%; overflow-wrap: break-word; }
}
.intro-list { margin: 8px 0 12px; padding-left: 22px; }
.intro-list li { margin: 4px 0; }

.field-msg { display: block; margin-top: 4px; color: var(--warn); font-size: 14px; font-weight: 400; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--warn); }

.missing h4 { margin: 14px 0 4px; font-size: 15px; color: var(--ink); }
.missing ul { margin: 0; padding-left: 20px; }
.missing li { margin: 6px 0; }
.missing a { color: var(--warn); font-weight: 600; text-decoration: underline; }
.missing .why-bad { display: block; color: var(--ink-soft); font-size: 14px; }
.ok-box { background: #e9f5ee; border-left: 3px solid #1f6b3a; color: #17482a; padding: 11px 12px; border-radius: 6px; margin: 12px 0 0; }

.plain-list { margin: 8px 0; padding-left: 22px; }
.plain-list li { margin: 8px 0; }
#formError ul { margin: 8px 0 0; padding-left: 20px; }

/* Other businesses (stationery skill, 10/11/2026): the Bugle Inn's moor green and brass; Chy Lowen's teal. No logo file yet for either. */
html[data-brand="bgl"] { --accent: #3F4D39; --accent-soft: #eef0eb; --trim: #AB8B55; }
html[data-brand="clh"] { --accent: #235670; --accent-soft: #e8f0f4; --trim: #D4A843; }
.signoff { margin-top: 18px; font-weight: 600; color: var(--accent); }