/* /crm (29 Oct 2026): the instrument is a Timer People record window (crm.aspx.vb), one layer per state,
   shown by the run (sub.js) from .pr[data-st]. Scenes are CSS animations; reduced motion shows the end state.
   07 is a sub.css link list, 08 plain <details>. Tokens only. */
.pr { --pr-r: 14px; width: 100%; max-width: 620px; margin-inline: auto; }
.pr-win { border: 1px solid var(--lp-rule-2); border-radius: var(--pr-r); background: var(--lp-paper); overflow: hidden; box-shadow: 0 18px 50px -28px color-mix(in srgb, var(--lp-ink) 45%, transparent); }
.pr-bar { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--lp-rule); }
.pr-name { display: flex; align-items: center; gap: 8px; margin-inline-end: auto; font: 600 12px var(--tos-font-mono); letter-spacing: .14em; color: var(--lp-ink-2); }
.pr-name::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lp-accent); opacity: .55; }
.pr-chip { font-size: 12px; padding: 5px 10px; border: 1px solid var(--lp-rule-2); border-radius: 7px; color: var(--lp-ink); background: var(--lp-paper); white-space: nowrap; }
.pr-chip.on { background: var(--lp-ink); color: var(--lp-paper); border-color: var(--lp-ink); }
.pr-body { position: relative; height: 300px; background: color-mix(in srgb, var(--lp-paper-2) 55%, var(--lp-paper)); }
.pr-ly { position: absolute; inset: 0; padding: 18px; display: flex; flex-direction: column; gap: 10px; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; }
.pr[data-st="hd"] .ly-hd, .pr[data-st="fill"] .ly-fill, .pr[data-st="crm"] .ly-crm, .pr[data-st="ask"] .ly-ask,
.pr[data-st="notice"] .ly-notice, .pr[data-st="bring"] .ly-bring, .pr[data-st="memory"] .ly-memory { opacity: 1; visibility: visible; transition: opacity .3s ease .1s, visibility 0s; }
.pr .k { font: 600 10.5px var(--tos-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--lp-accent); }

/* the person */
.pr-who { display: flex; align-items: center; gap: 12px; border: 1px solid var(--lp-rule); border-radius: 12px; background: var(--lp-paper); padding: 14px 16px; }
.pr-who .av { width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--lp-accent); color: var(--lp-on-accent); font-weight: 700; font-size: 15px; }
.pr-who .nm { display: grid; gap: 2px; min-width: 0; margin-inline-end: auto; }
.pr-who b { font-size: 16px; }
.pr-who small { font-size: 12.5px; color: var(--lp-ink-2); }
.pr-pill { flex: none; font: 600 11px var(--tos-font-mono); padding: 4px 9px; border-radius: 999px; color: var(--lp-accent); background: color-mix(in srgb, var(--lp-accent) 10%, var(--lp-paper)); }
.pr-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--lp-rule); border-radius: 12px; background: var(--lp-paper); }
.pr-facts div { padding: 12px 14px; display: grid; gap: 4px; border-inline-start: 1px solid var(--lp-rule); }
.pr-facts div:first-child { border-inline-start: 0; }
.pr-facts i { font: 400 10.5px var(--tos-font-mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--lp-muted); }
.pr-facts b { font-size: 16px; font-variant-numeric: tabular-nums; }
.pr-facts b.ac { color: var(--lp-accent); }
.pr-next, .pr-auto, .pr-chg { display: grid; gap: 4px; border: 1px solid color-mix(in srgb, var(--lp-accent) 35%, var(--lp-rule)); border-radius: 12px; background: color-mix(in srgb, var(--lp-accent) 5%, var(--lp-paper)); padding: 12px 14px; font-size: 14px; line-height: 1.45; }

/* 01: rows from where the work happened */
.pr-h { font: 600 11px var(--tos-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--lp-ink-2); }
.pr-row { display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 1px solid var(--lp-rule); border-radius: 10px; background: var(--lp-paper); padding: 10px 12px; font-size: 13.5px; }
.pr-row .src { font: 400 11px var(--tos-font-mono); padding: 3px 7px; border-radius: 6px; border: 1px solid var(--lp-rule-2); color: var(--lp-ink-2); white-space: nowrap; }

/* 02: the pipeline */
.pr-pipe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; flex: 1; }
.pr-pipe .col { display: flex; flex-direction: column; gap: 6px; border-radius: 10px; padding: 8px; background: color-mix(in srgb, var(--lp-rule) 35%, transparent); }
.pr-pipe .col.on { background: color-mix(in srgb, var(--lp-accent) 9%, var(--lp-paper)); }
.pr-pipe i { font: 600 10.5px var(--tos-font-mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--lp-ink-2); padding: 2px 2px 4px; }
.pr-pipe .dc { display: grid; gap: 3px; border: 1px solid var(--lp-rule); border-radius: 8px; background: var(--lp-paper); padding: 8px; font-size: 12.5px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.pr-pipe .dc small { font-weight: 400; font-size: 11px; color: var(--lp-ink-2); font-variant-numeric: tabular-nums; }
.pr-pipe .dc.hl { border-color: var(--lp-accent); }

/* 03: Pallas over the record */
.pr-me { align-self: flex-end; max-width: 80%; background: var(--lp-ink); color: var(--lp-paper); border-radius: 12px 12px 3px 12px; padding: 9px 13px; font-size: 14px; }
.pr-ai { align-self: flex-start; max-width: 88%; display: grid; gap: 6px; }
.pr-ai p { margin: 0; font-size: 14px; line-height: 1.5; background: var(--lp-paper); border: 1px solid var(--lp-rule); border-radius: 12px 12px 12px 3px; padding: 10px 13px; }
.pr-src { display: flex; flex-wrap: wrap; gap: 6px; }
.pr-src span { font: 400 11px var(--tos-font-mono); padding: 4px 8px; border-radius: 6px; border: 1px solid var(--lp-rule-2); color: var(--lp-ink-2); background: var(--lp-paper); }

/* 04: what it noticed; 05: what came in */
.pr-alert, .pr-src-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 10px; align-items: center; border: 1px solid var(--lp-rule); border-radius: 10px; background: var(--lp-paper); padding: 11px 13px; font-size: 13.5px; }
.pr-alert b, .pr-src-row b { font-size: 13.5px; }
.pr-alert span, .pr-src-row span { color: var(--lp-ink-2); }
.pr-alert:first-child { border-color: var(--lp-accent); }
.pr-btn { font: 600 12px var(--tos-font-body); padding: 5px 10px; border: 1px solid var(--lp-rule-2); border-radius: 8px; color: var(--lp-ink) !important; background: var(--lp-paper); white-space: nowrap; }
.pr-alert:first-child .pr-btn { background: var(--lp-accent); border-color: var(--lp-accent); color: var(--lp-on-accent) !important; }
.pr-src-row .ok { font: 600 11px var(--tos-font-mono); color: var(--lp-accent) !important; white-space: nowrap; }

/* 06: the call notes on the contact */
.pr-note { border: 1px solid var(--lp-rule); border-radius: 12px; background: var(--lp-paper); padding: 14px 16px; display: grid; gap: 8px; }
.pr-k { display: flex; justify-content: space-between; gap: 10px; font: 600 11px var(--tos-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--lp-accent); }
.pr-k span { color: var(--lp-muted); letter-spacing: 0; text-transform: none; font-weight: 400; }
.pr-note ul { margin: 0; padding-inline-start: 18px; display: grid; gap: 4px; font-size: 14px; line-height: 1.45; }
.pr-foot { border-top: 1px solid var(--lp-rule); padding-top: 8px; font: 400 11.5px var(--tos-font-mono); color: var(--lp-muted); }

/* the scenes: each state's pieces arrive in order when the state is reached */
@keyframes pr-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pr-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lp-accent) 45%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
@media (prefers-reduced-motion: no-preference) {
  .pr[data-st] .pr-ly .s1 { animation: pr-in .45s ease .2s both; }
  .pr[data-st] .pr-ly .s2 { animation: pr-in .45s ease .9s both; }
  .pr[data-st] .pr-ly .s3 { animation: pr-in .45s ease 1.6s both; }
  .pr[data-st] .pr-ly .s4 { animation: pr-in .45s ease 2.3s both; }
  .pr[data-st="ask"] .ly-ask .pr-me:first-child { animation: pr-in .45s ease .1s both; }
  .pr[data-st="crm"] .ly-crm .dc.hl { animation: pr-pulse 1.3s ease 1s 2; }
  .pr[data-st="notice"] .ly-notice .pr-alert:first-child .pr-btn { animation: pr-pulse 1.4s ease 1s 2; }
}

/* on a phone the chapter copies do not pin: a record window is too tall for the reading band */
.sp.js .run .inst.pr:not(.is-hero) { position: static; border: 0; padding: 0; margin-inline: 0; background: transparent; }
.pr .ro-set { text-align: start; }
@media (max-width: 560px) {
  .pr-chip:not(.on) { display: none; }
  .pr-body { height: 360px; }
  .pr-ly { padding: 14px; }
  .pr-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-facts div:nth-child(3) { border-inline-start: 0; }
  .pr-facts div:nth-child(n+3) { border-top: 1px solid var(--lp-rule); }
  .pr-row { grid-template-columns: 58px minmax(0, 1fr); } .pr-row .src { display: none; }
  .pr-pipe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-pipe .col:nth-child(1), .pr-pipe .col:nth-child(4) { display: none; }
  .pr-alert, .pr-src-row { grid-template-columns: minmax(0, 1fr) auto; } .pr-alert > span:nth-child(2), .pr-src-row > span:nth-child(2) { grid-column: 1; grid-row: 2; font-size: 12.5px; }
  .pr-alert .pr-btn, .pr-src-row .ok { grid-row: 1 / span 2; grid-column: 2; }
}

/* 07 industries */
.sp.crm-page .crm-ind .lk-t { overflow-wrap: anywhere; }
@media (min-width: 760px) { .sp.crm-page .crm-ind a { grid-template-columns: 48px minmax(0, 1fr); } }

/* 08 questions */
.pq-list { display: grid; border-top: 1px solid var(--lp-ink); }
.pq { border-bottom: 1px solid var(--lp-rule); }
.pq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; font-weight: 600; font-size: 17px; color: var(--lp-ink); }
.pq summary::-webkit-details-marker { display: none; }
.pq summary::after { content: "+"; font-weight: 400; color: var(--lp-muted); }
.pq[open] summary::after { content: "\2212"; }
.pq p { margin: 0 0 18px; color: var(--lp-ink-2); max-width: 60ch; }