/* Lab Notes and person pages (plan L4b, D175, D181–D184). Tokens only; nothing here redefines a spine or site class. */
.note-head .note-byline{font-size:15px;color:var(--ink-soft);margin:14px 0 0;max-width:68ch}
.note-head .note-byline a{color:inherit}
.note-head .note-actions,.person-head .note-actions{margin:20px 0 0;display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.person-head .person-role{font-family:var(--font-mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin:6px 0 0}
.note-spine{max-width:76ch;margin:0 auto;padding:0 16px}
.note-body h2{font-size:26px;margin:32px 0 12px}
.note-body h3{font-size:20px;margin:24px 0 8px}
.note-body ul,.note-body ol{padding-left:1.3em}
.note-body li{margin:0 0 6px}
.note-origin{font-size:12px;color:var(--ink-soft);margin-top:28px}
.note-links{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-wrap:wrap;gap:8px 18px}
.note-cards{list-style:none;padding:0;margin:16px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.note-card{padding:18px 20px;display:flex;flex-direction:column;gap:6px;max-width:none;border:1px solid var(--rule);border-radius:8px;background:var(--surface)}
.note-card[hidden]{display:none}
.note-card-meta{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin:0}
.note-card-title{font-size:19px;margin:0}
.note-card-title a{text-decoration:none}
.note-card-summary{font-size:14.5px;margin:0;max-width:none}
.note-card-by{font-size:13px;color:var(--ink-soft);margin:auto 0 0}
/* the type and practice filters: visible radio chips (persona panel 2026-10-05). Every note shows without script; the
   :has() rules below filter in the browser alone, and lab-notes.js applies the same filter and the count where :has()
   is missing. Each chip is a 44px target and wraps at 390px. */
.note-filters{display:flex;flex-direction:column;gap:10px;margin:0 0 10px}
.note-filter{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.note-filter legend{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);padding:0;margin:0 0 6px}
.note-chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:1px solid var(--rule);border-radius:22px;background:var(--surface);font-size:15px;cursor:pointer}
.note-chip input{margin:0;accent-color:var(--primary)}
.note-chip:has(input:checked){border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}
.note-chip:has(input:focus-visible){outline:2px solid var(--focus-ring,var(--primary));outline-offset:2px}
.note-chip-n{font-family:var(--font-mono);font-size:12px;color:var(--ink-soft)}
.note-count{font-size:12px;margin:0}
.note-card-tags{margin:0;display:flex;flex-wrap:wrap;gap:6px}
.note-tag{font-size:12px;line-height:1.2;padding:3px 9px;border-radius:12px;border:1px solid var(--rule);color:var(--ink-soft)}
.lab-notes-index:has(input[name="type"][value="guide"]:checked) .note-card:not([data-type="guide"]),
.lab-notes-index:has(input[name="type"][value="article"]:checked) .note-card:not([data-type="article"]),
.lab-notes-index:has(input[name="type"][value="news"]:checked) .note-card:not([data-type="news"]),
.lab-notes-index:has(input[name="type"][value="event"]:checked) .note-card:not([data-type="event"]),
.lab-notes-index:has(input[name="practice"][value="practice-veterinary-diagnostics"]:checked) .note-card:not([data-practices~="practice-veterinary-diagnostics"]),
.lab-notes-index:has(input[name="practice"][value="practice-transportation-materials"]:checked) .note-card:not([data-practices~="practice-transportation-materials"]),
.lab-notes-index:has(input[name="practice"][value="practice-government-research"]:checked) .note-card:not([data-practices~="practice-government-research"]),
.lab-notes-index:has(input[name="practice"][value="practice-laboratory-modernization"]:checked) .note-card:not([data-practices~="practice-laboratory-modernization"]){display:none}
/* person pages: the first screen names delivered work before the call to action */
.person-head .person-team-role{margin:8px 0 0;max-width:62ch}
.person-head .person-work-h{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin:16px 0 6px}
.person-head .person-work{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;max-width:62ch}
.person-head .person-work li{font-size:16px;line-height:1.4;margin:0}
.note-talk{margin:24px 0 0}
.lab-notes-related{padding:40px 16px;border-top:1px solid var(--rule)}
.lab-notes-related h2{font-size:26px;margin:0 0 4px}
/* on a railed page the block sits in the content column: no inset of its own, and one or two related notes keep a card's
   width instead of stretching across the column (review 2026-10-09) */
.spine .lab-notes-related{padding-left:0;padding-right:0}
.lab-notes-related .note-cards{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
[data-lab-notes="latest"] .note-cards{margin-top:16px}
/* the 30-second first screen (persona panel 2026-10-06, D5): who it is for, the problems, what was delivered, step one */
.note-context{margin:14px 0 0;padding:12px 14px;border-left:3px solid var(--primary);background:var(--surface);max-width:68ch}
.ctx-line{margin:0 0 6px;font-size:14.5px;line-height:1.45;max-width:68ch}
.ctx-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-right:6px}
.ctx-problem a{margin-right:6px}
.ctx-step{margin:8px 0 0;font-weight:600;font-size:15.5px;max-width:62ch}
.note-context .note-actions{margin:10px 0 0}
.person-head .ctx-line{margin-top:8px}
.person-head .ctx-step{margin-top:16px}
.lab-note .note-head{padding-top:28px}
.lab-note .note-head h1{font-size:clamp(24px,6.4vw,32px);line-height:1.15;max-width:none}
.note-context-strip{margin:10px 0 14px}
.lab-note .note-head .ctx-step{margin-top:14px}
/* one column for the head and the body (Doug, 2026-10-09): both share a max width and the same side padding, so their
   left edges line up. Before, the head (880px) and the body (76ch) were centred separately and sat on different edges. */
.lab-note,.lab-notes-index{--spine-note-col:760px}
.person-page{--spine-note-col:1040px}
.lab-note .note-head,.lab-notes-index .note-head,.person-page .person-head,.lab-note .note-spine,.lab-notes-index .note-spine,.person-page .note-spine{max-width:var(--spine-note-col);margin-left:auto;margin-right:auto;padding-left:var(--spine-pad);padding-right:var(--spine-pad);box-sizing:border-box}
.note-head .summary60{margin-top:12px}
/* PR #109: a real list, one engagement per line; no separator text is generated by CSS (TEAM-VOICE V3) */
.ctx-list{list-style:none;padding:0;margin:2px 0 0}
.ctx-list li{margin:0 0 2px}
/* PR #108: a tighter strip so the problem, who it is for, step one and the CTA end above the consent banner */
.note-context-strip{margin:8px 0 10px;padding:8px 12px}
.note-context .ctx-line{margin:0 0 4px;font-size:14px;line-height:1.4}
.lab-note .note-head .ctx-step,.lab-notes-index .note-head .ctx-step{margin-top:8px;font-size:15px}
.lab-note .note-head .note-actions,.lab-notes-index .note-head .note-actions{margin-top:8px}
@media (max-width:600px){.lab-note .note-head{padding-top:16px}.lab-note .note-head h1{font-size:22px;margin-bottom:10px}}
.person-head .ctx-line{margin-top:4px;font-size:14px;line-height:1.4}
.person-head .person-work-h{margin-top:10px}
.person-head .person-work li{font-size:15px;line-height:1.35}
.person-head .ctx-step{margin-top:10px;font-size:15px}
.person-head .note-actions{margin-top:8px}
/* PR #110 (V6): three or more problems or audiences are a real list; its items flow side by side, separated by space
   only (no generated text), so the first screen keeps its height at 390px */
.ctx-line .ctx-flow{display:inline-flex;flex-wrap:wrap;gap:2px 12px;margin:0;padding:0;list-style:none;vertical-align:top}
.ctx-line .ctx-flow li{margin:0}
/* WCAG 2.5.8: each link in the flowed list is a 24px target (axe target-size, /lab-notes/, review 2026-10-09) */
.ctx-line .ctx-flow li a{display:inline-block;min-height:24px;line-height:24px}
@media (max-width:600px){.lab-notes-index .note-head{padding-top:16px}.lab-notes-index .note-head h1{margin-bottom:8px}.lab-notes-index .note-context-strip{margin-top:4px}}
/* person pages, 2026-10-08: the portrait beside the name on wide screens, above it on narrow ones; the contact row;
   the experience, education and publication lists. Tokens only. */
.person-figure{margin:0}
.person-figure picture,.person-figure img{display:block}
.person-intro{min-width:0}
.person-contact{list-style:none;margin:var(--sp-4) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.person-contact li{margin:0;max-width:none}
.person-pubs{margin:0;padding-left:1.4em}
.person-pubs li{margin:0 0 var(--sp-3);max-width:68ch;line-height:1.5}
.person-pubs .pub-title{font-style:normal;font-weight:600;display:block}
.person-pubs .pub-authors{display:block;color:var(--ink-soft);font-size:14.5px}
.person-pubs .pub-venue{display:block;font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--ink-soft);margin-top:2px}
/* ---- person pages, night run 2026-10-09 (Doug: "use the new infographics on the team pages"). Tokens only; every word
   on the page is a record field. Three pieces from the house infographic styles:
   1. the first screen on a Lab-schematic sheet: graph ground fading out behind the text, the portrait as a matted,
      tilted specimen card (or the name's initials where no portrait is recorded), the band closed by a 3px ink rule;
   2. Experience and Education as a Report-figure pair of record timelines (a spine, a soma per row, mono years);
   3. Practice as a Lab schematic: the person → their practices (hub links) → the delivered work (evidence links). */
.person-page{--fig-sx-grid:color-mix(in srgb,var(--primary) 7%,transparent);--fig-sx-grid-major:color-mix(in srgb,var(--primary) 13%,transparent)}
.person-page .person-head{max-width:none;margin:0;
  padding-top:40px;padding-bottom:36px;
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-5) var(--sp-7);align-items:start;
  background-color:var(--paper);
  background-image:linear-gradient(90deg,transparent 0,transparent 18%,var(--paper) 62%),
    linear-gradient(var(--fig-sx-grid-major) 1px,transparent 1px),linear-gradient(90deg,var(--fig-sx-grid-major) 1px,transparent 1px),
    linear-gradient(var(--fig-sx-grid) 1px,transparent 1px),linear-gradient(90deg,var(--fig-sx-grid) 1px,transparent 1px);
  background-size:100% 100%,80px 80px,80px 80px,16px 16px,16px 16px;
  border-bottom:3px solid var(--ink)}
/* the band runs edge to edge; the content keeps the page column, so its left edge still meets the sections' (the
   selector outranks spine.css's railless-head padding rule) */
main.person-page > header.spine-head.person-head{padding-left:max(var(--spine-pad),calc((100% - var(--spine-note-col)) / 2 + var(--spine-pad)));padding-right:max(var(--spine-pad),calc((100% - var(--spine-note-col)) / 2 + var(--spine-pad)))}
.person-page .person-head h1{margin:0 0 6px;max-width:none}
.person-page .person-head .sect{margin:0 0 10px}
.person-page .person-head .person-role{display:inline-block;margin:0;padding:2px 0 2px 10px;border-left:3px solid var(--patina);color:var(--patina-deep)}
.person-page .person-head .person-contact{margin-top:var(--sp-3)}
.person-page .person-head .person-team-role{font-family:var(--font-display);font-size:18px;line-height:1.4;margin-top:var(--sp-3)}
.person-page .person-head .person-work-h{margin-top:var(--sp-4)}
.person-page .person-head .ctx-step{margin-top:var(--sp-4)}
/* the portrait: a print matted on the sheet, tilted like the paper figures (it is a physical object here, not UI) */
.person-page .person-portrait{display:block;box-sizing:border-box;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;padding:6px;border:1px solid var(--ink);border-radius:0;background:var(--surface);box-shadow:var(--elevation-paper);transform:rotate(var(--tilt-paper))}
.person-page .person-monogram{display:grid;place-items:center;font-family:var(--font-display);font-size:clamp(34px,4.4vw,64px);letter-spacing:.06em;color:var(--ink-soft);background-color:var(--surface);background-image:linear-gradient(var(--fig-sx-grid-major) 1px,transparent 1px),linear-gradient(90deg,var(--fig-sx-grid-major) 1px,transparent 1px);background-size:16px 16px;box-shadow:inset 0 0 0 6px var(--surface),var(--elevation-paper);user-select:none}
.person-page .person-figure{width:96px;padding:6px 0 0 4px}
@media (max-width:719px){
  /* phone: the portrait beside the name and role only; everything else runs the full width below them */
  .person-page .person-head{grid-template-columns:96px minmax(0,1fr);column-gap:18px;row-gap:0;padding-top:24px;padding-bottom:24px}
  .person-page .person-intro{display:contents}
  .person-page .person-figure{grid-column:1;grid-row:1 / span 3;align-self:center;padding:0}
  .person-page .person-intro > *{grid-column:1 / -1}
  .person-page .person-intro > .sect,.person-page .person-intro > h1,.person-page .person-intro > .person-role{grid-column:2;justify-self:start}
  .person-page .person-intro > .sect{margin-bottom:6px}
  .person-page .person-head h1{font-size:clamp(26px,7.4vw,32px);line-height:1.1}
  .person-page .person-head .person-role{font-size:12px}
  /* PR #108's 30-second test: step one and the booking button end above the consent banner at 390x844, also on the
     longest first screen (Doug: five contact buttons, four audiences, a team role and delivered work) */
  .person-page .person-head{padding-top:14px;padding-bottom:18px}
  .person-page .person-head .person-contact{margin-top:8px}
  .person-page .person-head .person-team-role{font-size:16px;margin-top:6px}
  .person-page .person-head .person-work-h{margin-top:8px}
  .person-page .person-head .ctx-step{margin-top:8px}
  .person-page .person-head .note-actions{margin-top:6px}
}
@media (min-width:720px){.person-page .person-head{grid-template-columns:180px minmax(0,1fr)}.person-page .person-figure{width:auto;padding-top:var(--sp-2)}}
@media (min-width:960px){.person-page .person-head{grid-template-columns:220px minmax(0,1fr);padding-top:36px;padding-bottom:40px}}
/* the record timelines: Experience beside Education on a wide screen, the pair opened by a 3px ink rule */
.person-record{display:grid;grid-template-columns:minmax(0,1fr);border-top:3px solid var(--ink);margin-top:var(--sp-5)}
.person-record > .spine-sec{border-top:0;min-width:0;padding-top:36px}
.person-record > .spine-sec + .spine-sec{border-top:1px solid var(--rule)}
@media (min-width:880px){
  .person-record[data-cols="2"]{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .person-record[data-cols="2"] > .spine-sec:first-child{padding-right:var(--sp-7)}
  .person-record[data-cols="2"] > .spine-sec + .spine-sec{border-top:0;border-left:1px solid var(--rule);padding-left:var(--sp-7)}
}
.person-timeline{list-style:none;margin:var(--sp-4) 0 0;padding:0 0 0 30px;position:relative}
.person-timeline .tl-row{position:relative;display:flex;flex-direction:column;gap:2px;margin:0 0 var(--sp-5);max-width:none}
.person-timeline .tl-row:last-child{margin-bottom:0}
.person-timeline .tl-row::before{content:"";position:absolute;left:-30px;top:3px;box-sizing:border-box;width:18px;height:18px;border-radius:50%;background:var(--primary);border:3px solid var(--paper)}
/* the spine: each row draws the wire from its soma down to the next one, so it never runs past the last row and a
   one-row list has none */
.person-timeline .tl-row:not(:last-child)::after{content:"";position:absolute;left:-22px;top:12px;bottom:calc(-1 * var(--sp-5) - 12px);border-left:2px solid var(--primary)}
.person-timeline .tl-undated::before{background:var(--paper);border:2px solid var(--primary)}
.person-timeline .tl-when{font-family:var(--font-label);font-size:12px;line-height:1.5;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--patina-deep)}
.person-timeline .tl-what{font-family:var(--font-display);font-size:19px;line-height:1.3;color:var(--ink)}
.person-timeline .tl-where{color:var(--ink-soft);line-height:1.4}
.person-timeline .tl-note{font-size:14.5px;color:var(--ink-soft);max-width:60ch;margin-top:2px}
/* the practice schematic: a graph-paper sheet; the person tile, a primary wire (the bus) with a stub to each practice
   tile, and a patina wire from each practice to its delivered work. Each row draws its own bus segment, so the wire
   ends at the last stub. Phone: the same tree, the works under their practice. */
.person-schematic{--fig-sx-hue:var(--primary);--fig-sx-mid:20px;--fig-sx-stub:22px;margin:var(--sp-4) 0 0;padding:var(--sp-5);border:1px solid var(--ink);
  background-color:var(--paper);
  background-image:linear-gradient(var(--fig-sx-grid-major) 1px,transparent 1px),linear-gradient(90deg,var(--fig-sx-grid-major) 1px,transparent 1px),
    linear-gradient(var(--fig-sx-grid) 1px,transparent 1px),linear-gradient(90deg,var(--fig-sx-grid) 1px,transparent 1px);
  background-size:80px 80px,80px 80px,16px 16px,16px 16px;
  outline:1px solid var(--rule);outline-offset:-7px}
.person-schematic .sx-person{display:inline-block;margin:0;padding:9px 14px;min-height:40px;box-sizing:border-box;border:1.5px solid var(--ink);background:var(--surface);font-family:var(--font-label);font-size:12px;line-height:20px;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink)}
.person-schematic .sx-tree{position:relative;list-style:none;margin:0;padding:var(--sp-4) 0 0 var(--sp-5)}
.person-schematic .sx-tree::before{content:"";position:absolute;left:var(--sp-5);top:0;height:var(--sp-4);border-left:2px solid var(--primary)}
.person-schematic .sx-group{position:relative;margin:0;padding:var(--sp-2) 0 var(--sp-2) var(--fig-sx-stub);max-width:none}
.person-schematic .sx-group::before{content:"";position:absolute;left:0;top:0;bottom:0;border-left:2px solid var(--primary)}
.person-schematic .sx-group:last-child::before{bottom:auto;height:calc(var(--sp-2) + var(--fig-sx-mid))}
.person-schematic .sx-group::after{content:"";position:absolute;left:0;top:calc(var(--sp-2) + var(--fig-sx-mid) - 1px);width:var(--fig-sx-stub);border-top:2px solid var(--primary)}
.person-schematic .sx-practice{display:flex;align-items:center;box-sizing:border-box;min-height:40px;padding:8px 14px;border:1.5px solid var(--fig-sx-hue);background:color-mix(in srgb,var(--fig-sx-hue) 10%,var(--surface));font-weight:600;line-height:1.25;color:var(--ink);text-decoration-color:var(--fig-sx-hue)}
.person-schematic .sx-works{position:relative;list-style:none;margin:0 0 0 var(--sp-5);padding:var(--sp-2) 0 0 var(--fig-sx-stub)}
.person-schematic .sx-work{position:relative;margin:0 0 var(--sp-2);max-width:none}
.person-schematic .sx-work:last-child{margin-bottom:0}
.person-schematic .sx-work::before{content:"";position:absolute;left:calc(-1 * var(--fig-sx-stub));top:calc(-1 * var(--sp-2));bottom:calc(-1 * var(--sp-2));border-left:2px solid var(--patina)}
.person-schematic .sx-work:last-child::before{bottom:auto;height:calc(var(--sp-2) + var(--fig-sx-mid))}
.person-schematic .sx-work::after{content:"";position:absolute;left:calc(-1 * var(--fig-sx-stub));top:calc(var(--fig-sx-mid) - 1px);width:var(--fig-sx-stub);border-top:2px solid var(--patina)}
.person-schematic .sx-work a{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:0 10px;box-sizing:border-box;min-height:40px;padding:8px 16px;border:1px solid var(--primary);border-radius:var(--radius-card);background:var(--surface);line-height:22px;text-decoration:none}
.person-schematic .sx-work a .sx-client{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.person-schematic .sx-client{font-weight:600}
.person-schematic .sx-tail{font-family:var(--font-label);font-size:12px;letter-spacing:.04em;color:var(--ink-soft)}
/* work that hangs from the person directly: the chip sits on the bus stub, no practice wire */
.person-schematic .sx-direct > .sx-works{margin:0;padding:0}
.person-schematic .sx-direct > .sx-works > .sx-work::before,.person-schematic .sx-direct > .sx-works > .sx-work::after{display:none}
@media (min-width:760px){
  /* wide: each practice row reads left to right, tile then its works; the patina wire leaves the tile's right edge */
  .person-schematic .sx-group:not(.sx-direct){display:grid;grid-template-columns:minmax(0,17rem) minmax(0,1fr);align-items:start}
  .person-schematic .sx-group:not(.sx-direct) > .sx-works{margin:0;padding:0 0 0 calc(2 * var(--fig-sx-stub))}
  .person-schematic .sx-group:not(.sx-direct) > .sx-works::before{content:"";position:absolute;left:0;top:calc(var(--fig-sx-mid) - 1px);width:var(--fig-sx-stub);border-top:2px solid var(--patina)}
  .person-schematic .sx-group:not(.sx-direct) > .sx-works > .sx-work::before{left:calc(-1 * var(--fig-sx-stub));top:0;bottom:calc(-1 * var(--sp-2))}
  .person-schematic .sx-group:not(.sx-direct) > .sx-works > .sx-work:first-child::before{top:var(--fig-sx-mid)}
  .person-schematic .sx-group:not(.sx-direct) > .sx-works > .sx-work:last-child::before{bottom:auto;height:var(--fig-sx-mid)}
  .person-schematic .sx-group:not(.sx-direct) > .sx-works > .sx-work:only-child::before{display:none}
  .person-schematic .sx-group:not(.sx-direct) > .sx-works > .sx-work:only-child::after{left:calc(-1 * var(--fig-sx-stub))}
}
@media (max-width:600px){.person-schematic{padding:var(--sp-4)}.person-schematic .sx-tree{padding-left:var(--sp-3)}.person-schematic .sx-tree::before{left:var(--sp-3)}}
/* tap targets (night run 2026-10-09, extended audit): the stacked "Helps" and problem links in the first-screen strip
   were about 20px tall at 390px. Vertical padding on the inline link grows its target to 24px or more without moving
   the text; the strip's line height keeps neighbouring lines' targets from stacking on each other. Shared by person
   pages, Lab Notes and the Lab Notes index. */
.ctx-line a{padding-block:4px}
.ctx-line{line-height:1.6}
.person-head .ctx-line,.note-context .ctx-line{line-height:1.6}
.person-page .person-head .sect a{display:inline-block;padding-block:5px}
.person-page .person-head .person-work a,.person-pubs .pub-title a,.person-page .note-talk a{padding-block:4px}
.person-page .person-head .person-work{gap:8px}
.note-context-strip .ctx-line{line-height:1.5}
.note-card-title a{padding-block:2px}
/* in a flowed list each link is its own 24px box (no row gap), so stacked targets touch without overlapping */
.ctx-line .ctx-flow{row-gap:0}
.ctx-line .ctx-flow a{display:inline-block;padding-block:2px;line-height:20px}