/* =====================================================================
   Kingsway Payroll specialist layer. /assets/payroll.css
   Loaded after /assets/family.css on every Kingsway Payroll page.
   Sets the specialist hooks under html[data-brand="payroll"] and styles
   the payroll-only components. Never redefines a family primitive.
   ===================================================================== */
@layer payroll {

/* ---------------------------------------------------------------------
   1. Specialist hooks and the RAG mapping onto family status roles.
   The mapping is declared in every token scope so it follows bands.
   --------------------------------------------------------------------- */
html[data-brand="payroll"] {
  --spec-accent: #E8C46B;
  --spec-print-host: "kingswaypayroll.co.uk";
}
html[data-brand="payroll"],
html[data-brand="payroll"] :is(.k-light, .k-doc, .k-sheet, .kmap, .k-band, .k-header, .k-colophon) {
  --rag-red: var(--status-risk);
  --rag-red-tint: var(--status-risk-tint);
  --rag-amber: var(--status-attention);
  --rag-amber-tint: var(--status-attention-tint);
  --rag-green: var(--status-good);
  --rag-green-tint: var(--status-good-tint);
}

/* ---------------------------------------------------------------------
   2. Route index (homepage #solutions). Pinned classes: .route-card
   .problem .outcome .go. V2.1: an open typographic index on the ground,
   not a grid of cards: an ink rule over the set, a hairline under each
   row, a vertical hairline between the two columns from 960px. Each row:
   the route numeral (Barlow, gold-ink) hanging in its own column, a serif
   title, the problem, the outcome with a small running-head label, and an
   arrow link. Rows share their tracks (subgrid), so titles, problems and
   outcome rules line up across the two columns. The whole row is the
   link; hover underlines the title (no lift, no shadow: the sheet shadow
   is kept for documents).
   --------------------------------------------------------------------- */
.routes-grid, .p-routes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  counter-reset: p-route;
  border-top: 1px solid var(--rule-ink);
}
.route-card {
  counter-increment: p-route;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto auto auto;
  row-gap: 10px;
  align-content: start;
  padding: 30px 0 32px;
  color: var(--text);
  text-decoration: none;
  background: none;
  border-bottom: 1px solid var(--rule);
}
.route-card::before {
  content: counter(p-route, decimal-leading-zero);
  font-family: var(--k-font-numeral);
  font-weight: 600;
  align-self: start;
  font-size: 46px;
  line-height: .8;
  letter-spacing: .01em;
  color: var(--signature);
}
.route-card h3 {
  margin-top: 10px;
  font-family: var(--k-font-display);
  font-weight: 540;
  font-size: clamp(25px, .8vw + 18px, 30px);
  line-height: 1.15;
  letter-spacing: -.01em;
  text-wrap: balance;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
.route-card .problem { font-size: 16px; line-height: 1.6; color: var(--text); max-width: 56ch; }
.route-card .outcome {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  max-width: 60ch;
}
/* "Outcome:" is the one label on each row, set as a running head. */
.route-card .outcome strong {
  margin-right: 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-2);
}
/* The arrow follows a no-break space inside the generated text, so a
   wrapped label keeps it on its last word. */
.route-card .go {
  justify-self: start;
  display: inline;
  margin-top: 4px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--rule-strong);
}
.route-card .go::after { content: "\00a0\2192"; font-weight: 400; }
.route-card:hover h3, .route-card:focus-visible h3 { text-decoration-line: underline; text-decoration-color: var(--rule-strong); }
.route-card:hover .go, .route-card:focus-visible .go { text-decoration-color: currentColor; }
.route-card:focus-visible { outline-offset: 6px; }
/* From 600px the numeral hangs in its own 64px column, as a document's
   section numeral does, and shares the title's first baseline. */
@media (min-width: 600px) {
  .route-card { grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto auto auto; }
  .route-card::before { grid-column: 1; grid-row: 1; align-self: first baseline; }
  .route-card > * { grid-column: 2; }
  .route-card h3 { margin-top: 0; align-self: first baseline; }
}
/* Two columns from 960px; a single column of full-width rows below, so a
   hanging numeral never squeezes a title into three lines. */
@media (min-width: 960px) {
  .routes-grid, .p-routes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(8, auto);
  }
  .route-card { grid-row: span 4; grid-template-rows: subgrid; }
  .route-card:nth-child(odd) { padding-right: clamp(28px, 3.4vw, 56px); border-right: 1px solid var(--rule); }
  .route-card:nth-child(even) { padding-left: clamp(28px, 3.4vw, 56px); }
}
@media (max-width: 599px) {
  .route-card {
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-rows: none;
    column-gap: 12px;
    row-gap: 8px;
    padding: 22px 0 24px;
  }
  .route-card::before { grid-column: 1; grid-row: 1; font-size: 34px; margin-top: 3px; }
  .route-card h3 { grid-column: 2; grid-row: 1; margin-top: 0; font-size: 23px; align-self: center; }
  .route-card > :not(h3) { grid-column: 1 / -1; }
  .route-card .outcome { margin-top: 2px; padding-top: 10px; }
  .route-card .go { margin-top: 2px; }
}

/* ---------------------------------------------------------------------
   3. (Retired 2 October 2026.) The FRIDAY set piece (.also-grid,
   .also-item) and the scoring legend (.p-friday-legend) were for the
   homepage, which no longer lists the six checks (copy deck V2.3 4.3). The
   six stay on /fit and /review as the Friday Map cards (7.4).
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   4. Sectors: a refined two-column list. A name, one line, a hairline.
   Markup: <dl class="p-sectors"><div><dt>Care</dt><dd>...</dd></div>...</dl>
   --------------------------------------------------------------------- */
.p-sectors, .sector-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 40px;
}
@media (min-width: 760px) { .p-sectors, .sector-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.p-sectors > :is(div, li), .sector-list > .sector { padding: 14px 0 16px; border-top: 1px solid var(--rule); }
.p-sectors :is(dt, .p-sector-n), .sector-list .sector > h3 { display: block; font-size: 17px; font-weight: 600; line-height: 1.35; font-family: var(--k-font-sans); color: var(--text); }
.p-sectors :is(dd, .p-sector-d), .sector-list .sector > p { margin: 4px 0 0; font-size: 16px; line-height: 1.6; color: var(--text); }
.p-sectors-note { margin-top: 20px; font-size: 15px; color: var(--text-2); }
@media (max-width: 599px) {
  .p-sectors > :is(div, li), .sector-list > .sector { padding: 10px 0 11px; }
  .p-sectors :is(dt, .p-sector-n), .sector-list .sector > h3 { font-size: 16px; line-height: 1.3; }
  .p-sectors :is(dd, .p-sector-d), .sector-list .sector > p { margin-top: 2px; font-size: 16px; line-height: 1.55; }
}

/* ---------------------------------------------------------------------
   5. Pay-week and cash-gap strip (D9.2).
   Week 1 in five tiles; under it a 0 to N day axis with daily ticks,
   Monday ticks, a wages-out mark each pay day, the client payment marker
   and the hatched funded gap. Vertical timeline below 720px.
   Set --days, --pay (first pay day) and --client on .p-axis; --at on marks.
   --------------------------------------------------------------------- */
.p-week {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1.5px solid var(--k-ink-900);
  background-color: var(--surface-paper);
}
.p-day { padding: 14px 16px 16px; border-right: 1px solid var(--k-stone-300); }
.p-day:last-child { border-right: 0; }
.p-day-k { display: block; font-size: 14px; font-weight: 600; color: var(--text-2); }
.p-day-w { display: block; margin-top: 6px; font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--text); }
.p-day--paid {
  background-color: var(--k-band);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.p-day--paid .p-day-k { color: var(--k-on-band-2); }
.p-day--paid .p-day-w { color: var(--k-on-band); }

.p-axis {
  --days: 49;
  --pay: 4;
  --client: 45;
  position: relative;
  margin-top: 0;
  padding-top: 56px;
}
.p-axis::before {
  /* The zoom wedge from the five tiles down to week 1 on the axis. */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 48px;
  background-color: var(--k-est-tint);
  clip-path: polygon(0 0, 100% 0, calc(5 / var(--days) * 100%) 100%, 0 100%);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.p-axis-track {
  position: relative;
  height: 76px;
  border-bottom: 1px solid var(--k-stone-500);
}
.p-axis-track::before, .p-axis-track::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.p-axis-track::before {
  height: 8px;
  background-image: repeating-linear-gradient(to right, var(--k-stone-500) 0 1px, transparent 1px calc(100% / var(--days)));
}
.p-axis-track::after {
  height: 14px;
  background-image: repeating-linear-gradient(to right, var(--k-ink-900) 0 2px, transparent 2px calc(700% / var(--days)));
}
.p-gap {
  position: absolute;
  bottom: 0;
  height: 30px;
  left: calc(var(--pay) / var(--days) * 100%);
  width: calc((var(--client) - var(--pay)) / var(--days) * 100%);
  background-image: var(--k-hatch);
  border-top: 1px solid var(--k-stone-500);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
/* The label sits above the 46px wages-out lines (16px clear of the 30px
   hatch plus the 6px knockout gap), beside them rather than across them. */
.p-gap-label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 22px);
  transform: translateX(-50%);
  padding: 0 6px;
  background-color: var(--surface-paper);
  font-size: 14px;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
  color: var(--text);
}
.p-out {
  /* Wages out: a 2px ink chevron dropping on to each pay day. */
  position: absolute;
  bottom: 0;
  left: calc(var(--at) / var(--days) * 100%);
  width: 2px;
  height: 46px;
  margin-left: -1px;
  background-color: var(--k-ink-900);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.p-out::after {
  content: "";
  position: absolute;
  left: -4px; bottom: 1px;
  width: 8px; height: 8px;
  border-right: 2px solid var(--k-ink-900);
  border-bottom: 2px solid var(--k-ink-900);
  transform: rotate(45deg);
}
.p-out--ghost { opacity: .4; }
.p-mark {
  position: absolute;
  bottom: 0;
  left: calc(var(--at) / var(--days) * 100%);
  height: 76px;
  border-left: 2px solid var(--k-ink-900);
}
/* No paper knockout: the label crosses no line, and a paper box would cut a
   notch out of the zoom wedge behind it. Ink and slate pass AA on the tint. */
.p-mark-label {
  position: absolute;
  bottom: calc(100% + 6px);
  right: -2px;
  padding: 0 0 0 6px;
  background-color: transparent;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  text-align: right;
  color: var(--text);
}
.p-mark-label small { display: block; font-size: 13px; font-weight: 400; color: var(--text-2); }
.p-axis-scale { position: relative; height: 24px; margin-top: 6px; font-size: 13px; color: var(--text-2); }
.p-axis-scale > span {
  position: absolute;
  left: calc(var(--at) / var(--days) * 100%);
  transform: translateX(-50%);
  white-space: nowrap;
}
.p-axis-scale > span:first-child { transform: none; }
.p-axis-scale > span:last-child { transform: translateX(-100%); }
.p-week-label { position: absolute; left: 0; top: 66px; font-size: 13px; color: var(--text-2); }
.p-next { margin-top: 10px; font-size: 15px; color: var(--text-2); opacity: 1; }
.p-next::before { content: ""; display: inline-block; width: 18px; height: 2px; margin-right: 8px; vertical-align: middle; background: var(--k-ink-900); opacity: .4; }

@media (max-width: 719px) {
  .p-week { grid-template-columns: minmax(0, 1fr); }
  .p-day { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: baseline; padding: 11px 14px; border-right: 0; border-bottom: 1px solid var(--k-stone-300); }
  .p-day:last-child { border-bottom: 0; }
  .p-day-w { margin-top: 0; font-size: 16px; }
  .p-axis { padding-top: 16px; padding-left: 0; }
  .p-axis::before { display: none; }
  .p-axis-track {
    height: calc(var(--days) * 7px);
    width: 100%;
    border-bottom: 0;
    border-left: 1px solid var(--k-stone-500);
    margin-left: 64px;
    width: calc(100% - 64px);
  }
  .p-axis-track::before, .p-axis-track::after { left: 0; right: auto; top: 0; bottom: 0; height: auto; }
  .p-axis-track::before { width: 8px; background-image: repeating-linear-gradient(to bottom, var(--k-stone-500) 0 1px, transparent 1px calc(100% / var(--days))); }
  .p-axis-track::after { width: 14px; background-image: repeating-linear-gradient(to bottom, var(--k-ink-900) 0 2px, transparent 2px calc(700% / var(--days))); }
  .p-gap {
    left: 0; bottom: auto;
    top: calc(var(--pay) / var(--days) * 100%);
    height: calc((var(--client) - var(--pay)) / var(--days) * 100%);
    width: 30px;
    border-top: 0;
    border-right: 1px solid var(--k-stone-500);
  }
  .p-gap-label { left: calc(100% + 24px); bottom: auto; top: 50%; transform: translateY(-50%); white-space: normal; width: max-content; max-width: min(46vw, 220px); text-align: left; padding: 0; }
  .p-out {
    left: 0; bottom: auto;
    top: calc(var(--at) / var(--days) * 100%);
    width: 46px; height: 2px;
    margin: -1px 0 0;
  }
  .p-out::after { left: auto; right: 1px; bottom: -4px; transform: rotate(-45deg); }
  .p-mark {
    left: 0; bottom: auto;
    top: calc(var(--at) / var(--days) * 100%);
    height: 0; width: 64px;
    border-left: 0;
    border-top: 2px solid var(--k-ink-900);
  }
  .p-mark-label { left: calc(100% + 8px); right: auto; bottom: auto; top: -12px; text-align: left; padding: 0; white-space: normal; width: max-content; max-width: 50vw; }
  .p-axis-scale { position: absolute; left: 0; top: 16px; height: calc(var(--days) * 7px); width: 56px; margin: 0; }
  .p-axis-scale > span, .p-axis-scale > span:first-child, .p-axis-scale > span:last-child {
    left: 0; top: calc(var(--at) / var(--days) * 100%); transform: translateY(-50%);
  }
}

/* ---------------------------------------------------------------------
   6. Contractual chain (D9.3): vertical chains side by side.
   Markup per column:
   <div class="p-chain-col"><p class="p-chain-h">...</p><ol class="p-chain-list">
     <li class="k-node">End client</li>
     <li class="p-chain-step"><span>contract</span></li>
     <li class="k-node p-chain-agency">Your agency ...
        <span class="p-recovery"><span class="p-recovery-node">HMRC</span></span></li> ...
   --------------------------------------------------------------------- */
.p-chain {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}
@media (min-width: 900px) { .p-chain { grid-template-columns: repeat(var(--p-chain-cols, 3), minmax(0, 1fr)); gap: 28px; } }
.p-chain-h { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 12px; min-height: 2.8em; }
.p-chain-list { display: grid; padding-right: 96px; }
.p-chain-list > .k-node { position: relative; }
.p-chain-step {
  position: relative;
  min-height: 40px;
  padding: 9px 0 9px calc(50% + 12px);
  font-size: 14px;
  line-height: 1.3;
  color: var(--text-2);
}
.p-chain-step::before {
  content: "";
  position: absolute;
  left: calc(50% - 1px);
  top: 0; bottom: 0;
  width: 2px;
  background-color: var(--k-ink-900);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.p-chain-agency { border-width: 2px; }
/* V2.2: in a chain the agency node is the reader's own position, set solid
   in ink (paper text 16.67:1, the sub line on-band-2 9.11:1). Moved here from
   /review and /supply-chain-review, which each set it the same way. Print
   turns it back to an ink outline on white. */
.p-chain-list > .p-chain-agency {
  color: var(--k-paper);
  background-color: var(--k-ink-900);
  border: 1.5px solid var(--k-ink-900);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.p-chain-list > .p-chain-agency .k-node-sub { color: var(--k-on-band-2); }
@media print {
  .p-chain-list > .p-chain-agency { color: #141A1F; background-color: #FFFFFF; border: 1.5pt solid #141A1F; }
  .p-chain-list > .p-chain-agency .k-node-sub { color: #3D454C; }
}
.p-recovery {
  position: absolute;
  left: 100%;
  top: 50%;
  width: 96px;
  height: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.p-recovery::before {
  /* Liability recovery: 2px neg-700, dashed 6 3, chevron into the agency. */
  content: "";
  position: absolute;
  left: 0; right: 52px;
  top: -1px;
  height: 2px;
  background-image: repeating-linear-gradient(to right, var(--k-neg-700) 0 6px, transparent 6px 9px);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.p-recovery::after {
  content: "";
  position: absolute;
  left: 1px; top: -5px;
  width: 8px; height: 8px;
  border-left: 2px solid var(--k-neg-700);
  border-bottom: 2px solid var(--k-neg-700);
  transform: rotate(45deg);
}
.p-recovery-node {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: 52px;
  padding: 6px 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--k-ink-900);
  background-color: var(--surface-paper);
  border: 1.5px solid var(--k-ink-900);
  transform: translateY(0);
}
.p-recovery-flag {
  position: absolute;
  left: 4px; top: 8px;
  display: flex;
  gap: 4px;
  align-items: flex-start;
  width: 90px;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--k-neg-700);
}
.p-recovery-flag::before {
  content: "!";
  display: inline-grid;
  place-items: center;
  flex: 0 0 15px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--k-neg-700);
  color: var(--k-paper);
  font-size: 11px;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.p-recovery--unknown::after {
  content: "?";
  left: -11px; top: -11px;
  width: 22px; height: 22px;
  border: 1.5px dotted var(--k-slate-600);
  border-radius: 50%;
  transform: none;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--k-ink-900);
  background-color: var(--surface-paper);
}
.p-chain-note { margin-top: 12px; }
.p-chain-caption { margin-top: 16px; }

/* ---------------------------------------------------------------------
   7. Friday Test shared primitives. Consumed by /fit (re-skin) and by
   the static result anatomy on /review. Legacy fit class names are
   styled directly so the fit page can drop its inline rules.
   --------------------------------------------------------------------- */
/* 7.1 Verdict line (V2.1, restrained as on /fit): a 4px status rule, no
   tint, and the word in the display face in its status colour, set in
   sentence case by CSS only (the text stays STAY, FIX or MOVE). */
.verdict-bar, .p-verdict {
  --p-v: var(--rag-amber);
  --p-v-tint: var(--rag-amber-tint);
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 10px 18px;
  padding: 14px 20px;
  margin: 0 0 20px;
  background-color: transparent;
  border: 0;
  border-left: 4px solid var(--p-v);
  color: var(--k-ink-900);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.verdict-bar.stay, .p-verdict[data-verdict="stay"] { --p-v: var(--rag-green); --p-v-tint: var(--rag-green-tint); }
.verdict-bar.move, .p-verdict[data-verdict="move"] { --p-v: var(--rag-red); --p-v-tint: var(--rag-red-tint); }
.verdict-label { font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--k-slate-700); }
.verdict-word {
  font-family: var(--k-font-display);
  font-weight: 600;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: lowercase;
  color: var(--p-v);
}
.verdict-word::first-letter { text-transform: uppercase; }
.verdict-note { font-size: 16px; line-height: 1.45; color: var(--k-ink-900); padding-left: 18px; border-left: 1px solid rgba(20, 26, 31, .2); }
@media (max-width: 599px) {
  .verdict-bar, .p-verdict { grid-template-columns: auto minmax(0, 1fr); }
  .verdict-note { grid-column: 1 / -1; padding: 10px 0 0; border-left: 0; border-top: 1px solid rgba(20, 26, 31, .2); }
}

/* 7.2 Headline figure (V2.1, as /fit): one large figure on an ink rule,
   no box. */
.headline, .p-headline {
  padding: 22px 0 0;
  margin-bottom: 20px;
  background-color: transparent;
  border: 0;
  border-top: 1px solid var(--rule-ink);
}
.headline .n, .p-headline .n {
  font-family: var(--k-font-display);
  font-weight: 560;
  font-size: clamp(34px, 4vw + 12px, 56px);
  line-height: 1.02;
  letter-spacing: -.015em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--k-ink-900);
}
.headline .n.is-words, .p-headline .n.is-words { font-family: var(--k-font-sans); font-weight: 600; font-size: 28px; line-height: 1.2; }
.headline .lab, .p-headline .lab { margin-top: 10px; font-size: 16px; color: var(--text-2); max-width: 66ch; }
.headline .tag, .p-headline .tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 1px 7px;
  margin-left: 10px;
  vertical-align: middle;
  font-family: var(--k-font-sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: var(--k-ink-900);
  background: transparent;
  border: 1px solid var(--k-ink-900);
  border-radius: var(--k-radius);
  position: static;
}

/* 7.3 Priority and provider rows: ruled rows with glyph-plus-word status. */
.priority-list, .provider-list, .p-rows { display: grid; gap: 0; border-top: 1px solid var(--k-ink-900); }
.priority-card, .provider-action, .p-row {
  padding: 14px 0 16px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--k-stone-300);
  color: var(--text);
}
/* Restrained status: the word in ink, the glyph in the status colour. */
.priority-card .priority-state, .p-row-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}
.priority-card .priority-state::before, .p-row-status::before { content: "\25D0"; content: "\25D0" / ""; font-size: 12px; color: var(--rag-amber); }
.priority-card[data-status="red"] .priority-state::before, .p-row[data-status="red"] .p-row-status::before { content: "\25CF"; content: "\25CF" / ""; color: var(--rag-red); }
.priority-card[data-status="green"] .priority-state::before, .p-row[data-status="green"] .p-row-status::before { content: "\25CB"; content: "\25CB" / ""; color: var(--rag-green); }
.priority-card h3, .provider-action h3, .p-row h3 { font-size: 17px; line-height: 1.35; margin: 0 0 4px; color: var(--text); }
.priority-card p, .provider-action p, .p-row p { font-size: 15px; line-height: 1.5; color: var(--text-2); margin: 0; }
.provider-action .action-n { display: inline-block; min-width: 1.4em; font-family: var(--k-font-numeral); font-weight: 700; color: var(--k-ink-900); }
.provider-intro { font-size: 14px; color: var(--text-2); padding: 10px 0 4px; }

/* 7.4 Map cards: 4px status top rule plus the status word. */
.friday-map, .p-map {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0 24px;
}
@media (max-width: 899px) { .friday-map, .p-map { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .friday-map, .p-map { grid-template-columns: minmax(0, 1fr); } }
/* V2.1 (as /fit): no box. An ink rule, the letter, then the glyph in the
   status colour and the word in ink. */
.map-card {
  --p-s: var(--k-stone-500);
  padding: 16px 0 4px;
  min-height: 0;
  background-color: transparent;
  border: 0;
  border-top: 1px solid var(--rule-ink);
  color: var(--text);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.map-card.red, .map-card[data-status="red"] { --p-s: var(--rag-red); }
.map-card.amber, .map-card[data-status="amber"] { --p-s: var(--rag-amber); }
.map-card.green, .map-card[data-status="green"] { --p-s: var(--rag-green); }
.map-card .map-key { font-family: var(--k-font-display); font-weight: 400; font-size: 44px; line-height: .85; color: var(--k-ink-900); }
.map-card .map-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 4px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}
.map-card.red .map-status::before, .map-card[data-status="red"] .map-status::before { content: "\25CF"; content: "\25CF" / ""; font-size: 12px; color: var(--rag-red); }
.map-card.amber .map-status::before, .map-card[data-status="amber"] .map-status::before { content: "\25D0"; content: "\25D0" / ""; font-size: 12px; color: var(--rag-amber); }
.map-card.green .map-status::before, .map-card[data-status="green"] .map-status::before { content: "\25CB"; content: "\25CB" / ""; font-size: 12px; color: var(--rag-green); }
.map-card h3 { font-size: 17px; line-height: 1.3; margin: 0 0 4px; color: var(--text); }
.map-card p { font-size: 15px; line-height: 1.5; color: var(--text-2); }

/* 7.5 Dated warning panel (the live scenario warning). */
.jslwarn, .p-warning {
  padding: 14px 18px;
  margin: 18px 0 4px;
  background-color: var(--k-neg-tint);
  border: 0;
  border-left: 4px solid var(--k-neg-700);
  color: var(--k-ink-900);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.jslwarn p, .p-warning p { font-size: 16px; line-height: 1.5; color: var(--k-ink-900); margin: 0; max-width: 70ch; }
.jslwarn p + p, .p-warning p + p { margin-top: 6px; }
.jslwarn b, .p-warning b { color: var(--k-ink-900); font-weight: 600; }
.p-warning-date { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 600; color: var(--k-neg-700); }

/* 7.6 Mix ledger: ruled rows, tabular figures, a total line. */
.mix, .p-mix {
  padding: 4px 20px 16px;
  background-color: var(--surface-paper);
  border: 1px solid var(--k-stone-300);
  font-variant-numeric: lining-nums tabular-nums;
}
.mixrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: 14px;
  align-items: center;
  padding: 10px 0;
  margin: 0;
  border-bottom: 1px solid var(--k-stone-300);
}
.mixrow .nm { font-size: 16px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text); margin: 0; }
.mixrow .nm em { display: block; margin-top: 2px; font-style: normal; font-weight: 400; font-size: 14px; color: var(--text-3); }
.mixrow input {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  text-align: right;
  font-size: 16px;
  color: var(--k-ink-900);
  background-color: var(--surface-field);
  border: 1px solid var(--field-border);
  border-radius: var(--k-radius);
}
.mixtot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 0;
  padding-top: 12px;
  border-top: 1.5px solid var(--k-ink-900);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-2);
}
.mixrow + .mixtot, .mixrow:last-of-type { border-bottom: 0; }
.mixtot b { font-family: var(--k-font-display); font-weight: 560; font-size: 28px; line-height: 1; color: var(--text); }
.mixtot.ok b { color: var(--k-pos-700); }
.mixtot.bad b { color: var(--k-neg-700); }
@media (max-width: 400px) { .mixrow { grid-template-columns: minmax(0, 1fr) 84px; gap: 10px; } }

/* 7.7 Chips: 44px targets, sentence case, ink fill plus a tick when chosen. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips .chip { position: relative; display: inline-flex; margin: 0; font-size: 16px; letter-spacing: 0; text-transform: none; }
/* The hidden input covers its chip, so a keyboard focus scrolls the whole
   chip and its focus ring into view, not a single pixel. */
.chips .chip input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chips .chip span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 15px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: 0;
  color: var(--k-ink-900);
  background-color: var(--surface-field);
  border: 1px solid var(--k-stone-500);
  border-radius: var(--k-radius);
  cursor: pointer;
  user-select: none;
}
.chips .chip:hover span { border-color: var(--k-ink-900); }
.chips .chip input:checked + span {
  color: var(--k-paper);
  background-color: var(--k-ink-900);
  border-color: var(--k-ink-900);
  font-weight: 600;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.chips .chip input:checked + span::before { content: "\2713"; content: "\2713" / ""; font-weight: 600; }
.chips .chip input:focus-visible + span { outline: 2px solid var(--k-ink-900); outline-offset: 2px; }
.chips.sm .chip span { min-height: 44px; padding: 8px 13px; font-size: 16px; }

/* 7.8 Sticky result bar (400px and below). The call is primary by style
   only; DOM order is unchanged. Pad the result by --p-sticky-h. */
.sticky-result { display: none; }
@media (max-width: 400px) {
  .sticky-result, .p-sticky {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 30;
    display: flex;
    gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background-color: var(--k-band);
    border-top: 1px solid var(--k-band-rule);
  }
  .sticky-result .btn, .p-sticky .btn {
    flex: 1 1 0;
    min-height: 48px;
    padding: 8px 10px;
    font-size: 15px;
    color: var(--k-on-band);
    background-color: transparent;
    border: 1.5px solid var(--k-on-band-2);
  }
  .sticky-result .btn.book-cta, .sticky-result .btn.handoff-cta,
  .p-sticky .btn.book-cta, .p-sticky .btn.handoff-cta {
    color: var(--k-ink-900);
    background-color: var(--k-gold-400);
    border-color: var(--k-gold-400);
  }
  .p-has-sticky { padding-bottom: var(--p-sticky-h, 76px); }
}

/* 7.9 Findings rows (result and example). */
.finding, .p-finding {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 16px 0 18px;
  margin: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--k-stone-300);
}
.finding .amt, .p-finding .amt {
  font-family: var(--k-font-display);
  font-weight: 560;
  letter-spacing: -.01em;
  font-size: 28px;
  line-height: 1.05;
  white-space: nowrap;
  color: var(--k-ink-900);
  font-variant-numeric: lining-nums tabular-nums;
}
.finding .amt small, .p-finding .amt small {
  display: block;
  margin-top: 4px;
  font-family: var(--k-font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  color: var(--text-2);
}
/* V2.1 (as /fit): a status finding carries a 2px rule; a finding led by a
   figure is a line in a table, not a status, so it has none. */
.finding.f-neg { box-shadow: inset 2px 0 0 var(--k-neg-700); padding-left: 18px; }
.finding.f-mid { box-shadow: inset 2px 0 0 var(--k-amber-700); padding-left: 18px; }
.finding.f-pos { box-shadow: inset 2px 0 0 var(--k-pos-700); padding-left: 18px; }
.finding:has(> .amt:not(.amt--words)) { padding-left: 0; box-shadow: none; }
/* A finding whose "amount" is a word (a status or a sector) reads as a
   sentence-case label in ink weight, not as a display figure (as /fit). */
.finding .amt.amt--words { font-family: var(--k-font-sans); font-size: 17px; font-weight: 600; line-height: 1.35; white-space: normal; text-transform: lowercase; }
.finding .amt.amt--words::first-letter { text-transform: uppercase; }
.finding .amt.amt--words small { text-transform: none; }
.finding.f-neg .amt--words { color: var(--status-risk); }
.finding.f-mid .amt--words { color: var(--status-attention); }
.finding.f-pos .amt--words { color: var(--status-good); }
.finding h3, .p-finding h3 { font-size: 17px; line-height: 1.35; margin-bottom: 4px; }
.finding p, .p-finding p { font-size: 15px; line-height: 1.5; color: var(--text-2); }
@media (max-width: 599px) { .finding, .p-finding { grid-template-columns: minmax(0, 1fr); gap: 6px; } }

/* ---------------------------------------------------------------------
   8. Meeting brief and checklist (/first-meeting).
   The brief form carries class="k-form k-print-keep" so it prints.
   Each box: <section class="p-box"> with .p-box-n, .p-box-h, .p-box-bring,
   .p-box-holder, an answer (.chips or input), and a Ready tick (.p-ready-tick).
   --------------------------------------------------------------------- */
.p-brief { display: grid; gap: 0; border-top: 2px solid var(--k-ink-900); counter-reset: p-box; }
.p-brief-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; padding: 14px 0; border-bottom: 1px solid var(--k-ink-900); }
.p-ready {
  font-family: var(--k-font-display);
  font-weight: 560;
  font-size: 24px;
  line-height: 1.1;
  color: var(--k-ink-900);
  font-variant-numeric: lining-nums tabular-nums;
}
.p-box {
  counter-increment: p-box;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-areas:
    "n head"
    "n answer"
    "n tick";
  column-gap: 14px;
  row-gap: 10px;
  padding: 18px 0 20px;
  border-bottom: 1px solid var(--k-stone-300);
}
.p-box::before {
  content: counter(p-box);
  grid-area: n;
  font-family: var(--k-font-numeral);
  font-weight: 700;
  font-size: 30px;
  line-height: .95;
  color: var(--k-ink-900);
}
.p-box-text { grid-area: head; }
.p-box-h { font-size: 18px; font-weight: 600; line-height: 1.35; }
.p-box-bring { margin-top: 4px; font-size: 16px; line-height: 1.5; color: var(--text-2); max-width: 62ch; }
.p-box-holder { margin-top: 6px; font-size: 14px; color: var(--text-3); }
.p-box-answer { grid-area: answer; min-width: 0; }
.p-box-answer :is(input[type="text"], textarea) { max-width: 40rem; }
.p-ready-tick { grid-area: tick; display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; font-weight: 600; }
.p-ready-tick input { width: 22px; height: 22px; accent-color: var(--k-ink-900); }
@media (min-width: 900px) {
  .p-box {
    grid-template-columns: 48px minmax(0, 1.1fr) minmax(0, 1fr) 7.5rem;
    grid-template-areas: "n head answer tick";
    column-gap: 24px;
    align-items: start;
  }
  .p-ready-tick { justify-content: flex-end; }
}
.p-print-lines, .p-heldby { display: none; }

/* Checklist table variant: .k-table.p-checklist with a Ready column. */
.p-checklist td.p-tick, .p-checklist th.p-tick { width: 6rem; text-align: center; }
.p-checklist .p-tick input { width: 22px; height: 22px; accent-color: var(--k-ink-900); }

/* ---------------------------------------------------------------------
   9. Print: running head and the one-sheet brief.
   --------------------------------------------------------------------- */
@page {
  @top-left {
    content: "Kingsway Payroll Services";
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-weight: 600;
    font-size: 9pt;
    color: #3D454C;
  }
}
@page :first {
  @top-left { content: none; }
}
@media print {
  .p-day--paid { background-color: #141A1F !important; }
  .route-card { break-inside: avoid; }
  .route-card:nth-child(odd) { border-right: 0; }
  /* The printed address of each route sits in the text column. */
  .route-card::after { grid-column: -2 / -1; font-size: 8pt; color: #3D454C; }
  .friday-map, .p-map { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .map-card, .priority-card, .provider-action, .finding, .p-box { break-inside: avoid; }
  .sticky-result, .p-sticky { display: none !important; }

  /* The meeting brief as one A4 sheet. */
  .p-brief { font-size: 9pt; }
  .p-box { grid-template-columns: 8mm minmax(0, 1.2fr) minmax(0, 1fr) 14mm; grid-template-areas: "n head answer tick"; column-gap: 4mm; padding: 2.2mm 0; }
  .p-box::before { font-size: 14pt; }
  .p-box-h { font-size: 10pt; }
  .p-box-bring { font-size: 8.5pt; line-height: 1.35; }
  .p-box-holder { font-size: 8pt; }
  .p-print-lines { display: block; height: 11mm; background-image: repeating-linear-gradient(to bottom, transparent 0 5mm, #8C8375 5mm 5.3mm); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .p-heldby { display: block; font-size: 8pt; border-bottom: .5pt solid #141A1F; padding-top: 3mm; }
  .p-box-answer .chips .chip span { min-height: 0; padding: 1mm 2mm; font-size: 8pt; }
  .p-box-answer .chips .chip input:not(:checked) + span { border-color: #D8D1C2; color: #5C646B; }
  .p-ready-tick { min-height: 0; font-size: 8pt; }
  .p-brief :is(input[type="text"], textarea) { min-height: 0; padding: 1mm 2mm; font-size: 8.5pt; border-color: #8C8375; }
}

/* ---------------------------------------------------------------------
   10. Common questions beside their heading (owner's refinement 3,
   2 October 2026). With the Sources blocks gone, a page's endnotes hold one
   list. From 960px its heading sits on the left of a 12-column grid and the
   questions run across the rest, so no column is left empty; below 960px
   they stack, and on phones the list folds under its summary.
   Markup: div.p-questions > h2.k-fold-h + details.k-fold. The questions
   start at grid line 5 (the heading takes four columns, as the homepage's
   #paid and /review's section heads do); a page on a different split sets
   --p-questions-split (/first-meeting: 6, its 5/7 split). Moved from the
   homepage, /review and /first-meeting with their layout unchanged.
   --------------------------------------------------------------------- */
@media (min-width: 960px) {
  .p-questions { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--k-gutter); align-items: start; }
  .p-questions > .k-fold-h { grid-column: 1 / var(--p-questions-split, 5); }
  .p-questions > .k-fold { grid-column: var(--p-questions-split, 5) / -1; }
}

} /* end @layer payroll */