/* ============================================================================
   Personnel Ledger: the free personnel file checklist (one page only).
   Loaded AFTER landing.css and built from its tokens and components: the form
   is the signup card's surface, the hero is .lp-hero.hero--split with one
   static example image, the explainer is .fam-split + .lp-values--ruled.

   THE SHEET (.pf-sheet) is paper, drawn the way the app's printed personnel
   file is (UI.printKit in web/app/js/ui.js, the cross-app print standard):
   logo, organization, the product line in small caps, a 2px rule, the title,
   a scope line and a "Generated" line; Georgia; hairline tables; no fills, so
   the only color on paper is the logo. The --pf-* tokens below copy that
   kit's PRINT_COLORS; change the two together. The screen preview uses the
   same rules as the printout, so what is on screen is what prints.

   LIGHT ONLY (hospice sites, Greg 2026-10-05). No motion: hover and focus
   change color and border only.
   ============================================================================ */

:root {
  --pf-ink: #111827;
  --pf-ink-strong: #374151;
  --pf-ink-soft: #4B5563;
  --pf-ink-muted: #6B7280;
  --pf-rule: #D1D5DB;
  --pf-rule-soft: #E5E7EB;
  --pf-paper: #FFFFFF;
  --pf-serif: Georgia, 'Times New Roman', serif;
}

.pf-vh {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---- the hero: the intro beside ONE finished example ------------------------
   Greg 2026-10-05 (free tool layout): one real example of the output at the
   top, then the tool below starts empty and shows only what the visitor
   chooses. The image is this page's own output (hospice, RN and hospice aide,
   California), captured by ops/capture-checklist-example.mjs. */
.pf-hero .lp-hero-cta .btn svg { flex: 0 0 auto; }
.pf-hero-shot { margin: 0; }
.pf-hero-shot img {
  display: block; width: 100%; height: auto; background: var(--pf-paper); border-radius: 4px;
  box-shadow: 0 1px 2px rgba(46, 32, 40, .08), 0 24px 48px -22px rgba(46, 32, 40, .42);
}
.pf-hero-shot figcaption { margin-top: 1rem; text-align: center; font-size: .9rem; color: var(--pl-text-soft); text-wrap: balance; }

/* ---- the tool ------------------------------------------------------------------ */
.pf-tool { padding: 4.2rem 0 5rem; }
.pf-tool-head { margin-bottom: 2.2rem; }
.pf-tool-head .section-title { margin-bottom: .45rem; }
.pf-grid { display: grid; grid-template-columns: minmax(19rem, 22rem) minmax(0, 1fr); column-gap: 2.6rem; align-items: start; }

/* the form */
.pf-tool .signup-card { max-width: none; margin: 0; padding: 1.6rem 1.6rem 1.4rem; }
.pf-fs { border: 0; margin: 0; padding: 0; min-width: 0; }
.pf-fs + .pf-fs { border-top: 1px solid var(--pl-border); margin-top: 1.35rem; padding-top: .3rem; }
.pf-legend { padding: 0 .6rem 0 0; margin: 0 0 .6rem; font-family: var(--pl-display); font-weight: 700; font-size: 1.08rem; color: var(--pl-text); }
.pf-legend .opt { font-family: var(--pl-font); font-weight: 500; font-size: .88rem; color: var(--pl-text-soft); }
.pf-tool .signup-card .hint { margin-top: .45rem; text-wrap: pretty; }

/* setting: two segments */
.pf-seg { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; padding: .3rem; margin: 0;
  background: var(--pl-surface-muted); border: 1px solid var(--pl-border); border-radius: var(--pl-radius); }
.pf-tool .pf-seg label { position: relative; margin: 0; font-size: .95rem; }
.pf-seg input, .pf-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.pf-seg span { display: flex; align-items: center; justify-content: center; min-height: 2.6rem; padding: 0 .5rem;
  border-radius: var(--pl-radius-sm); font-weight: 600; color: var(--pl-text-soft); cursor: pointer; text-align: center; line-height: 1.2; }
.pf-seg input:checked + span { background: var(--pl-surface); color: var(--pl-primary-dark); box-shadow: var(--pl-shadow); }
.pf-seg input:focus-visible + span, .pf-chip input:focus-visible + span { outline: 3px solid var(--pl-primary-ring); outline-offset: 2px; }

/* roles: one chip per role */
.pf-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.pf-tool .pf-chip { position: relative; margin: 0; font-size: .92rem; }
.pf-chip span {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 2.45rem; padding: .35rem .8rem;
  background: var(--pl-surface); border: 1.5px solid var(--pl-border-strong); border-radius: var(--pl-radius-sm);
  font-weight: 600; color: var(--pl-text); line-height: 1.2; cursor: pointer;
  transition: border-color .12s, background-color .12s, color .12s;
}
.pf-chip span:hover { border-color: var(--pl-primary); }
.pf-chip .pf-tick { display: none; flex: 0 0 auto; }
.pf-chip input:checked + span { border-color: var(--pl-primary); background: var(--pl-primary-soft); color: var(--pl-primary-dark); }
.pf-chip input:checked + span .pf-tick { display: block; }

.pf-tool .signup-card select:disabled { opacity: .6; cursor: not-allowed; }
.pf-tool .signup-card label.pf-check { display: flex; align-items: flex-start; gap: .6rem; margin: .2rem 0 0; font-weight: 500; font-size: .93rem; line-height: 1.45; cursor: pointer; }
.pf-check input { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin: .12rem 0 0; accent-color: var(--pl-primary); cursor: pointer; }

/* the privacy note that closes the form */
.pf-private { display: flex; gap: .6rem; align-items: flex-start; margin: 1.4rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--pl-border); }
.pf-private svg { flex: 0 0 auto; margin-top: .2rem; color: var(--pl-primary); }
.pf-private p { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--pl-text-soft); }
.pf-private strong { color: var(--pl-text); }
.pf-linkbtn { font: inherit; font-size: .88rem; font-weight: 600; color: var(--pl-primary-dark); background: none; border: 0; padding: .2rem 0;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pf-status { margin: .6rem 0 0; font-size: .86rem; color: var(--pl-text-soft); }
.pf-status:empty { display: none; }

/* the preview */
.pf-out { min-width: 0; }
.pf-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem 1rem; margin: 0 auto 1rem; max-width: 860px; }
.pf-bar-note { margin: 0; font-size: .88rem; color: var(--pl-text-soft); }
.pf-count { display: block; font-weight: 700; color: var(--pl-text); }
.pf-bar .btn svg { flex: 0 0 auto; }
.pf-empty {
  max-width: 860px; margin: 0 auto; padding: 2.4rem 1.6rem; text-align: center;
  font-size: 1rem; color: var(--pl-text-soft); line-height: 1.6;
  background: var(--pl-surface); border: 1.5px dashed var(--pl-border-strong); border-radius: var(--pl-radius);
}
.pf-empty strong { display: block; margin-bottom: .2rem; font-family: var(--pl-display); font-size: 1.15rem; color: var(--pl-text); }
.pf-empty[hidden] { display: none; }
.pf-sheets { display: grid; gap: 1.6rem; max-width: 860px; margin: 0 auto; }
.pf-sheets:empty { display: none; }

/* ============================================================================
   THE SHEET: paper. Same rules on screen and on the printed page.
   ============================================================================ */
.pf-sheet {
  font-family: var(--pf-serif); color: var(--pf-ink); font-size: 11pt; line-height: 1.42;
  background: var(--pf-paper); border: 1px solid var(--pl-border); border-radius: 4px;
  box-shadow: 0 1px 2px rgba(46, 32, 40, .06), 0 18px 40px -24px rgba(46, 32, 40, .35);
  padding: 2.3rem 2.5rem 1.9rem;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.pf-sheet p { margin: 0; }

/* the print kit's header */
.pf-sheet .prk-head { display: flex; align-items: center; gap: 10pt; border-bottom: 2px solid var(--pf-ink); padding-bottom: 8pt; margin-bottom: 10pt; }
.pf-sheet .prk-logo { display: block; height: 30pt; width: auto; flex: 0 0 auto; }
.pf-sheet .prk-brandcol { min-width: 0; }
.pf-sheet .prk-org { font-size: 13pt; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.pf-sheet .prk-product { margin-top: 1pt; font-size: 8.5pt; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--pf-ink-soft); }
.pf-sheet .pf-title { font-family: var(--pf-serif); font-size: 19pt; font-weight: 700; line-height: 1.15; letter-spacing: 0; margin: 0 0 2pt; color: var(--pf-ink); }
.pf-sheet .pf-sub { font-size: 11.5pt; color: var(--pf-ink-strong); margin-bottom: 2pt; }
.pf-sheet .pf-gen { font-size: 9.5pt; color: var(--pf-ink-muted); }

/* blanks for the person this copy is for */
.pf-fields { display: grid; grid-template-columns: 1.5fr 1fr 1.5fr 1fr; gap: 6pt 14pt; margin: 12pt 0 10pt; }
.pf-field { display: flex; align-items: flex-end; gap: 5pt; min-width: 0; font-size: 9pt; color: var(--pf-ink-strong); }
.pf-field-k { flex: 0 0 auto; font-weight: 700; white-space: nowrap; }
.pf-field-v { flex: 1 1 auto; min-width: 2.5em; height: 13pt; border-bottom: 1px solid var(--pf-ink-muted); }

/* what the labels mean, only for labels on this sheet */
.pf-key { display: grid; grid-template-columns: 1fr 1fr; gap: 3pt 14pt; margin-bottom: 8pt; font-size: 8.5pt; line-height: 1.4; color: var(--pf-ink-soft); }
.pf-key-i { display: block; }
.pf-key .pf-tag { margin: 0 3pt 0 0; }

/* a state's personnel-record rules with no single item, or "nothing added" */
.pf-notes { margin: 6pt 0 4pt; padding: 6pt 0 6pt 9pt; border-left: 2px solid var(--pf-ink); font-size: 9pt; color: var(--pf-ink-strong); }
.pf-notes .pf-notes-h { margin-bottom: 2pt; font-size: 8.5pt; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--pf-ink); }
.pf-notes p + p { margin-top: 3pt; }

/* the checklist */
.pf-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 9.5pt; margin: 6pt 0 0; }
.pf-table col.c-check { width: 30pt; }
.pf-table col.c-date { width: 64pt; }
.pf-table col.c-notes { width: 116pt; }
.pf-table th { text-align: left; font-weight: 700; }
.pf-cols th {
  padding: 3pt 8pt 3pt 0; border-bottom: 1.5px solid var(--pf-ink-strong);
  font-size: 8pt; text-transform: uppercase; letter-spacing: .04em; color: var(--pf-ink-strong);
}
.pf-cols th:first-child { padding-right: 2pt; }
/* the running header repeats on every printed page; on screen the sheet's
   own header already says it */
.pf-run { display: none; }
.pf-run th { padding: 0 0 5pt; border-bottom: 1px solid var(--pf-rule); font-size: 8.5pt; font-weight: 400; color: var(--pf-ink-muted); }
.pf-run-t { overflow-wrap: anywhere; }
.pf-run-n { float: right; display: inline-flex; align-items: flex-end; gap: 4pt; margin-left: 10pt; font-weight: 700; color: var(--pf-ink-strong); }
.pf-run-n::after { content: ''; display: inline-block; width: 120pt; height: 10pt; border-bottom: 1px solid var(--pf-ink-muted); }

.pf-cat th {
  padding: 10pt 0 3pt; border-bottom: 1px solid var(--pf-rule);
  font-size: 8.5pt; text-transform: uppercase; letter-spacing: .06em; color: var(--pf-ink);
}
.pf-row td { padding: 5pt 8pt 6pt 0; border-bottom: 1px solid var(--pf-rule-soft); vertical-align: top; }
.pf-row td.c-notes { padding-right: 0; }
.pf-box { display: block; width: 11pt; height: 11pt; margin-top: 1.5pt; border: 1.2px solid var(--pf-ink); border-radius: 1.5pt; }
.pf-line { display: block; height: 15pt; border-bottom: 1px solid var(--pf-ink-muted); }
.pf-line + .pf-line { margin-top: 2pt; }

.pf-it { line-height: 1.35; }
.pf-name { font-size: 10.5pt; font-weight: 700; color: var(--pf-ink); }
.pf-tag {
  display: inline-block; margin: 0 0 0 3pt; padding: 0 3.5pt;
  font-size: 6.8pt; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; line-height: 1.65;
  color: var(--pf-ink-strong); border: 1px solid var(--pf-ink-muted); border-radius: 2.5pt;
  vertical-align: 1.2pt; white-space: nowrap;
}
/* told apart by line style, so they survive a black-and-white printer */
.pf-tag--federal { color: var(--pf-ink); border-color: var(--pf-ink); }
.pf-tag--if { border-style: dashed; }
.pf-tag--state { color: var(--pf-ink); border: 2.5px double var(--pf-ink); padding: 0 3pt; line-height: 1.45; }
.pf-tag--policy { color: var(--pf-ink-muted); border-color: var(--pf-rule); }
.pf-tag--license { border-style: dotted; }
.pf-sum { margin-top: 1.5pt !important; color: var(--pf-ink); }
.pf-cite { margin-top: 2pt !important; font-size: 8.5pt; font-weight: 700; color: var(--pf-ink-strong); }
.pf-note { margin-top: 2pt !important; font-size: 8.5pt; line-height: 1.4; color: var(--pf-ink-muted); }
.pf-cite-in { font-weight: 700; color: var(--pf-ink-strong); }
.pf-st { margin-top: 3pt !important; padding-left: 6pt; border-left: 2px solid var(--pf-ink); font-size: 8.5pt; line-height: 1.4; color: var(--pf-ink-strong); }
.pf-st-k { font-weight: 700; color: var(--pf-ink); }
.pf-table tfoot td { padding: 7pt 0 0; font-size: 8pt; color: var(--pf-ink-muted); }

/* ---- the explainer ------------------------------------------------------------ */
.pf-legend-tag { display: inline-block; margin-bottom: .45rem; }
.pf-explain .lp-value h3 .pf-tag { font-family: var(--pf-serif); font-size: .7rem; vertical-align: .15em; margin-left: .4rem; }

/* ---- layouts -------------------------------------------------------------------- */
/* Big screens: the tool widens to the header's width, as the CR maker does,
   so the sheet gets close to a page's width beside the form. */
@media (min-width: 1280px) {
  .pf-tool > .wrap { max-width: 1320px; }
  .pf-grid { grid-template-columns: minmax(20rem, 23rem) minmax(0, 1fr); column-gap: 3rem; }
}
/* Stacked below 1100: side by side, the sheet gets too narrow for its columns. */
@media (max-width: 1099px) {
  .pf-grid { grid-template-columns: minmax(0, 1fr); row-gap: 1.8rem; }
  .pf-form { max-width: 640px; width: 100%; margin: 0 auto; }
}
@media (max-width: 720px) {
  .pf-tool { padding: 3rem 0 3.6rem; }
  .pf-tool-head { margin-bottom: 1.5rem; }
  .pf-tool .signup-card { padding: 1.4rem 1.15rem 1.2rem; }
  .pf-sheet { padding: 1.4rem 1.1rem 1.2rem; font-size: 10.5pt; }
  .pf-fields { grid-template-columns: 1fr 1fr; }
  .pf-bar .btn { width: 100%; }
}
/* Phones: each item stacks over its own Date and Notes lines. Screen only;
   paper always uses the table. */
@media screen and (max-width: 560px) {
  .pf-sheet .pf-title { font-size: 16pt; }
  .pf-fields, .pf-key { grid-template-columns: 1fr; }
  .pf-table, .pf-table tbody, .pf-table tfoot, .pf-table tr, .pf-table td, .pf-table th { display: block; width: auto; }
  .pf-table thead, .pf-table colgroup { display: none; }
  .pf-table tr.pf-row { display: grid; grid-template-columns: 16pt minmax(0, 1fr); column-gap: 8pt; padding: 8pt 0 9pt; border-bottom: 1px solid var(--pf-rule-soft); }
  .pf-row td { padding: 0 !important; border: 0; }
  .pf-row .c-check { grid-row: span 3; }
  .pf-row .c-date, .pf-row .c-notes { grid-column: 2; }
  .pf-row .c-date, .pf-row .c-notes { display: flex; align-items: flex-end; gap: 6pt; margin-top: 6pt; font-size: 8.5pt; font-weight: 700; color: var(--pf-ink-strong); }
  .pf-row .c-date::before, .pf-row .c-notes::before { content: attr(data-label); }
  .pf-row .pf-line { flex: 1 1 auto; height: 12pt; }
  .pf-row .pf-line + .pf-line { display: none; }
  .pf-cat th { padding-top: 14pt; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-chip span { transition: none; }
}

/* ---- print: the sheets only, one role per page group -------------------------
   US Letter, portrait. The table's head (the running header and the column
   names) repeats on every page; its foot closes every page; a row never
   splits across pages; each role starts on a new page. */
@media print {
  @page { size: letter portrait; margin: .5in .55in .55in; }
  html, body { background: var(--pf-paper) !important; }
  body { overflow: visible !important; }
  .skip-link, .site-head, .site-foot, main > :not(#maker), #maker .pf-tool-head,
  .pf-form, .pf-bar, .pf-empty, #maker noscript { display: none !important; }
  #maker { padding: 0 !important; background: none !important; }
  #maker > .wrap { max-width: none !important; padding: 0 !important; }
  .pf-grid, .pf-out, .pf-sheets { display: block !important; max-width: none !important; }
  .pf-sheet { border: 0; border-radius: 0; box-shadow: none; padding: 0; font-size: 11pt; }
  .pf-sheet + .pf-sheet { break-before: page; page-break-before: always; }
  .pf-run { display: table-row; }
  .pf-head, .pf-row, .pf-notes { break-inside: avoid; page-break-inside: avoid; }
  .pf-cat { break-after: avoid; page-break-after: avoid; }
  .pf-table thead { display: table-header-group; }
  .pf-table tfoot { display: table-footer-group; }
}