/* TrueStep HR reference notes. Loaded after site.css by every page in articles/ except the hub.
   Rewritten 2026-10-07 (phase 3). The earlier contents styled a body class (tsp-reference-note)
   that no page carries, so nothing in the old file applied anywhere.
   Uses the site tokens from site.css: --ink, --teal, --teal-dark, --paper, --paper-2, --mist,
   --line, --muted, --brass, --sans, --serif. Square corners, hairline rules, no new colors.
   Everything is scoped to .resource-page--reference.
   The share row itself (.pshare) is styled in site.css because product pages use it too. */

/* ---------- Action section at the end of the note: tools, then pass it on ---------- */
.resource-page--reference .note-actions{margin:0}
.resource-page--reference .note-actions>h2{margin:54px 0 16px;font:500 clamp(1.55rem,2.5vw,1.95rem)/1.14 var(--serif);letter-spacing:-.025em;scroll-margin-top:150px;text-wrap:balance}
.resource-page--reference .note-actions .pshare{margin:34px 0 0;scroll-margin-top:150px}
.resource-page--reference .note-main>.pshare{margin:44px 0 0;scroll-margin-top:150px}
.resource-page--reference .section-body>.pshare{max-width:700px;margin:40px 0 0}

/* ---------- Jump row: phones only, where the "On this page" list is hidden ---------- */
.resource-page--reference .note-jump{display:none}
@media screen and (max-width:820px){
  .resource-page--reference .note-jump{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0}
  .resource-page--reference .note-jump a{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 14px;border:1px solid var(--line);background:#fff;color:var(--ink);font:600 .86rem/1.2 var(--sans);text-decoration:none;text-align:center}
  .resource-page--reference .note-jump a:hover{background:var(--mist);border-color:var(--ink)}
  .resource-page--reference .note-jump a:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
}

/* ---------- Bars: a few figures from the note, drawn to one scale ---------- */
.resource-page--reference .nbars{margin:26px 0 30px;padding:0;border-top:2px solid var(--ink);border-bottom:1px solid var(--line)}
.resource-page--reference .nbars__cap{display:block;padding:11px 0;color:var(--teal-dark);font:800 .72rem/1.4 var(--sans);letter-spacing:.09em;text-transform:uppercase}
.resource-page--reference .nbars__cap span{margin-left:8px;color:var(--muted);font-weight:700;letter-spacing:.04em;text-transform:none;white-space:nowrap}
.resource-page--reference .nbars__group{margin:0;padding:15px 0 8px;border-top:1px solid var(--line);color:var(--teal-dark);font:800 .72rem/1.4 var(--sans);letter-spacing:.09em;text-transform:uppercase}
.resource-page--reference .nbars__cap+.nbars__group{padding-top:4px;border-top:0}
.resource-page--reference .nbars__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 20px;align-items:baseline;margin:0;padding:12px 0 15px;border-top:1px solid var(--line)}
.resource-page--reference .nbars__cap+.nbars__row,
.resource-page--reference .nbars__group+.nbars__row{border-top-color:var(--ink)}
.resource-page--reference .doc .nbars__label{margin:0;color:var(--ink);font-size:.98rem;font-weight:650;line-height:1.45}
.resource-page--reference .doc .nbars__val{margin:0;color:var(--ink);font-size:.98rem;font-weight:700;line-height:1.45;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.resource-page--reference .nbars__track{grid-column:1/-1;display:block;height:10px;background:var(--paper-2)}
.resource-page--reference .nbars__bar{display:block;width:var(--w,0%);height:0;border-top:10px solid var(--teal)}
.resource-page--reference .doc .nbars__note{margin:0;padding:11px 0 13px;border-top:1px solid var(--line);color:var(--muted);font-size:.86rem;line-height:1.55}

/* ---------- Formula block: paper with a brass rule ---------- */
.resource-page--reference .nformula{margin:26px 0 30px;padding:18px 22px 20px;border-left:3px solid var(--brass);background:var(--paper)}
.resource-page--reference .doc .nformula__label{margin:0 0 9px;color:var(--teal-dark);font:800 .72rem/1.4 var(--sans);letter-spacing:.09em;text-transform:uppercase}
.resource-page--reference .doc .nformula__eq{margin:0;color:var(--ink);font:500 1.28rem/1.4 var(--serif);letter-spacing:-.01em;font-variant-numeric:tabular-nums lining-nums}
.resource-page--reference .doc .nformula__eq+.nformula__eq{margin-top:8px}
.resource-page--reference .doc .nformula__note{margin:11px 0 0;color:#3d505c;font-size:.92rem;line-height:1.6}

/* ---------- Two neutral cards side by side (a comparison, no verdict color) ---------- */
.resource-page--reference .doc .case--plain .case__verdict{color:var(--teal-dark)}
.resource-page--reference .doc .case--plain ul{margin-bottom:0}

/* ---------- Lists that stand in for a lost table: same measure as the body ---------- */
.resource-page--reference .doc .nlist{margin:22px 0 28px;padding:0;list-style:none;border-top:2px solid var(--ink);border-bottom:1px solid var(--line);counter-reset:nlist}
.resource-page--reference .doc .nlist>li{position:relative;margin:0;padding:13px 0 14px 2.4em;border-top:1px solid var(--line);font-size:1rem;line-height:1.6;counter-increment:nlist}
.resource-page--reference .doc .nlist>li:first-child{border-top:0}
.resource-page--reference .doc .nlist>li::before{content:counter(nlist);position:absolute;left:0;top:13px;color:var(--teal-dark);font:500 1.2rem/1.3 var(--serif);font-variant-numeric:tabular-nums lining-nums}
.resource-page--reference .doc .nlist>li b{font-weight:750}
.resource-page--reference .doc ul.nlist>li{padding-left:0}
.resource-page--reference .doc ul.nlist>li::before{content:none}

/* Definition rows whose value is a short label rather than a figure */
.resource-page--reference .deflist--steps dt .v{color:var(--muted);font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}

/* ---------- Product line inside the note: the price stays on the line with the last word of the name.
   site.css turns this link into a flex box on phones for tap height, which pushed ", $69" to a line of its own.
   An inline link with vertical padding keeps the same tap height and wraps like text. */
.resource-page--reference .notecta .price a{display:inline;min-height:0;padding:12px 0}

/* ---------- A note with no long body: the questions are the body ---------- */
.resource-page--reference .note-main--brief>h2#questions{margin-top:44px}

/* ---------- Print: brand row above the title, source line at the foot ---------- */
.resource-page--reference .tshr-print{display:none}
@media (max-width:560px){
  .resource-page--reference .nbars__cap span{display:block;margin:2px 0 0;white-space:normal}
  .resource-page--reference .nformula{padding:16px 16px 18px}
  .resource-page--reference .doc .nformula__eq{font-size:1.12rem}
}
@media print{
  .resource-page--reference .tshr-print{display:block}
  .resource-page--reference .tshr-print-head{margin:0 0 12pt}
  .resource-page--reference .tshr-print-brandrow{display:flex;align-items:center;justify-content:space-between;margin:0;padding:0 0 8pt;border-bottom:.75pt solid #000}
  .resource-page--reference .tshr-print-logo{display:block;width:auto;height:24pt}
  .resource-page--reference .tshr-print-brand{font:600 15pt/1 var(--serif,Georgia,serif)}
  .resource-page--reference .tshr-print-site{font:700 8pt/1 var(--sans,Arial,sans-serif);letter-spacing:.08em;text-transform:uppercase}
  .resource-page--reference .tshr-print-foot{margin-top:14pt;break-inside:avoid;page-break-inside:avoid}
  .resource-page--reference .tshr-print-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2pt 16pt;margin:0;padding-top:6pt;border-top:.75pt solid #000;font:700 7.6pt/1.4 var(--sans,Arial,sans-serif);letter-spacing:.02em}
  .resource-page--reference .tshr-print-meta span:first-child{overflow-wrap:anywhere}

  .resource-page--reference .note-jump,
  .resource-page--reference .note-actions,
  .resource-page--reference .pshare{display:none!important}

  .resource-page--reference .nbars{margin:10pt 0 12pt;border-top:1.5pt solid #000;border-bottom:.5pt solid #999;break-inside:avoid}
  .resource-page--reference .nbars__cap,.resource-page--reference .nbars__group{font-size:7.5pt}
  .resource-page--reference .nbars__row,.resource-page--reference .nbars__group,.resource-page--reference .doc .nbars__note{border-color:#999}
  .resource-page--reference .nbars__row{padding:5pt 0 6pt;gap:3pt 14pt}
  .resource-page--reference .doc .nbars__label,.resource-page--reference .doc .nbars__val{font-size:10pt}
  .resource-page--reference .nbars__track{height:6pt;border-bottom:.5pt solid #999}
  .resource-page--reference .nbars__bar{border-top:6pt solid #000}
  .resource-page--reference .doc .nbars__note{font-size:8.5pt}
  .resource-page--reference .nformula{margin:10pt 0 12pt;padding:6pt 0 6pt 10pt;border-left:2pt solid #000;break-inside:avoid}
  .resource-page--reference .doc .nformula__eq{font-size:12pt}
  .resource-page--reference .doc .nformula__label{font-size:7.5pt}
  .resource-page--reference .doc .nformula__note{font-size:9pt}
  .resource-page--reference .doc .nlist{border-top:1.5pt solid #000;border-bottom:.5pt solid #999}
  .resource-page--reference .doc .nlist>li{padding-top:5pt;padding-bottom:5pt;border-color:#999;font-size:10pt;break-inside:avoid}
  .resource-page--reference .doc .nlist>li::before{top:5pt;font-size:11pt}
}

/* Phase 5 (2026-10-08, calcnotes builder). Buyer phone S3-13: the disclaimer and the share row
   help line read at .875rem on screen, the same size as the calculator help line. Print is unchanged. */
@media screen{
  .resource-page--reference p.disclaimer{font-size:.875rem;line-height:1.6}
  .resource-page--reference .pshare .pshare__help{font-size:.875rem;line-height:1.5}
}