/* Relationships, as a place to work: today's number and the path people move along, a list of who to write to,
   one person in full beside it, a board one switch away. Loaded last. Everything lives under body.rel2, which
   rel.js sets, so without that script the older list shows exactly as before.

   The controls are the app's own, measured off the deal stage and the Deals page: buttons 34px tall with a 9px
   corner and one hairline; switches on the sand strip with a white selected tab; white cards with a 14px corner;
   Fraunces for names and figures, Manrope for the rest. No icons inside buttons, no pills, no coloured borders. */
body.rel2 #relTop, body.rel2 #people, body.rel2 #pplSearchBtn, body.rel2 #pplAddBtn { display: none; }
.r2, .r2-htools { --hair: var(--line, #e4e2da); --sand: #f1efe8; --pri: var(--blue, #1439c6); }
.r2 { display: grid; gap: 16px; align-content: start; min-width: 0; font-size: 13.5px; color: var(--ink); }
:where(.r2, .r2-htools) :where(button, input, select, textarea) { font: inherit; color: inherit; margin: 0; }
:where(.r2, .r2-htools) :where(button, a) { -webkit-tap-highlight-color: transparent; }
.r2 :focus-visible, .r2-htools :focus-visible { outline: 2px solid var(--pri); outline-offset: 2px; border-radius: 9px; }
.r2 :is(input, textarea, select):focus-visible { outline: 0; }  /* a text box shows its caret; its frame darkens instead */

/* Buttons: the app's own */
.r2-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; height: 34px; padding: 0 13px; border: 0; border-radius: 9px; background: #fff; color: var(--ink-2); font: 600 13px/1 var(--sans, Manrope, sans-serif); white-space: nowrap; text-decoration: none; cursor: pointer; box-shadow: inset 0 0 0 1px var(--hair); transition: color .15s, box-shadow .15s, background .15s, opacity .15s; }
.r2-btn:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-2); }
.r2-btn.pri { padding: 0 16px; background: var(--pri); color: #fff; box-shadow: none; }
.r2-btn.pri:hover { background: #1a3bb8; color: #fff; box-shadow: none; }
.r2-btn.quiet { padding: 0 8px; background: none; box-shadow: none; color: var(--mute); font-weight: 500; }
.r2-btn.quiet:hover { color: var(--ink); box-shadow: none; }
.r2-btn:disabled { opacity: .55; cursor: default; }
.r2-send { display: grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 9px; background: var(--pri); color: #fff; cursor: pointer; transition: background .15s, opacity .15s; }
.r2-send:hover { background: #1a3bb8; } .r2-send:disabled { opacity: .5; cursor: default; }
.r2-send svg { width: 16px; height: 16px; }

/* Switches: the sand strip with a white tab, as on the deal stage */
.r2-seg { display: inline-flex; flex: none; padding: 3px; gap: 0; border-radius: 11px; background: var(--sand); }
.r2-seg button { height: 28px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--ink-2); font: 500 13px/1 var(--sans, Manrope, sans-serif); white-space: nowrap; cursor: pointer; transition: color .15s, background .15s, box-shadow .15s; }
.r2-seg button:hover { color: var(--ink); }
.r2-seg button.on { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(12, 29, 51, .14); }
.r2-seg em { font-style: normal; font-weight: 400; color: var(--mute); margin-left: 6px; font-variant-numeric: tabular-nums; }
.r2-tabs { padding: 4px; border-radius: 13px; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; } .r2-tabs::-webkit-scrollbar { display: none; }
.r2-tabs button { height: 34px; padding: 0 14px; border-radius: 9px; font-size: 13.5px; flex: none; }
.r2-htools { display: flex; align-items: center; gap: 8px; }

/* Text boxes */
.r2-add input, .r2-add select, .r2-edit input, .r2-edit select, .r2-edit textarea, .r2-log input { min-width: 0; height: 34px; padding: 0 11px; border: 0; border-radius: 9px; background: #fff; font-size: 13.5px; box-shadow: inset 0 0 0 1px var(--hair); transition: box-shadow .15s; }
.r2-add input:focus, .r2-add select:focus, .r2-edit input:focus, .r2-edit select:focus, .r2-edit textarea:focus, .r2-log input:focus { box-shadow: inset 0 0 0 1px var(--ink-2); }
.r2 ::placeholder { color: var(--mute); opacity: 1; }
.r2-search { display: flex; align-items: center; gap: 9px; flex: 0 1 260px; min-width: 160px; height: 42px; padding: 0 14px; background: #fff; border-radius: 12px; color: var(--mute); box-shadow: inset 0 0 0 1px var(--hair); transition: box-shadow .15s; }
.r2-search:focus-within { box-shadow: inset 0 0 0 1px var(--ink-2); }
.r2-search input { flex: 1; min-width: 0; height: auto; border: 0; background: none; font-size: 14px; color: var(--ink); padding: 0; }

/* Today: the one number, then the path from stranger to backer */
.r2-today { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 2.1fr); background: #fff; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--hair); }
.r2-quota { display: flex; align-items: center; gap: 18px; padding: 16px 22px; min-width: 0; }
.r2-qn { display: flex; align-items: baseline; font: 500 40px/1 var(--serif, Georgia, serif); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.r2-qn b { font-weight: 500; } .r2-qn i { font-style: normal; color: var(--mute); }
.r2-qt { display: grid; gap: 7px; flex: 1; min-width: 0; font-size: 13.5px; color: var(--ink-2); }
.r2-qbar { display: block; height: 6px; background: var(--sand); border-radius: 3px; overflow: hidden; }
.r2-qbar > span { display: block; height: 100%; width: 0; background: var(--pri); border-radius: 3px; transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.r2-today.hit .r2-qbar > span { background: var(--good, #1f7a4f); }
.r2-owed { margin: 0; font-size: 12px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r2-link { padding: 0; border: 0; background: none; color: var(--pri); font-weight: 600; cursor: pointer; } .r2-link:hover { text-decoration: underline; }
.r2-funnel { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); box-shadow: inset 1px 0 0 var(--hair); }
.r2-fcell { position: relative; display: grid; gap: 3px; align-content: center; text-align: left; padding: 14px 14px 14px 22px; border: 0; background: none; cursor: pointer; min-width: 0; transition: background .15s; }
.r2-fcell:last-child { border-radius: 0 14px 14px 0; }
.r2-fcell + .r2-fcell::before { content: ""; position: absolute; left: -4px; top: 50%; width: 7px; height: 7px; border-top: 1px solid #cfccc2; border-right: 1px solid #cfccc2; transform: translateY(-50%) rotate(45deg); }
.r2-fcell small { font-size: 12px; letter-spacing: .01em; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r2-fcell b { font: 500 26px/1.1 var(--serif, Georgia, serif); font-variant-numeric: tabular-nums; }
.r2-fcell.zero b { color: #c3c0b6; }
.r2-fcell:hover { background: rgba(28, 34, 48, .028); }
.r2-fcell.on { background: var(--sand); }
.r2-fcell:focus-visible { outline-offset: -2px; }

/* Who to show, and search */
.r2-filters { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }

/* Add a person */
.r2-add { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; background: #fff; border-radius: 14px; padding: 14px; box-shadow: inset 0 0 0 1px var(--hair); }
.r2-add[hidden] { display: none; }
.r2-add .wide { grid-column: span 4; }
.r2-addb { grid-column: span 2; display: flex; justify-content: flex-end; gap: 8px; }

/* The list */
.r2-main { display: grid; gap: 16px; min-width: 0; min-height: 0; }
.r2-main.list { grid-template-columns: minmax(300px, 392px) minmax(0, 1fr); }
.r2-list { min-width: 0; min-height: 0; }
.r2-main.list .r2-list { background: #fff; border: 1px solid var(--hair); border-radius: 14px; overflow: hidden auto; }
.r2-row { position: relative; display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 13px 16px; border: 0; background: none; text-align: left; cursor: pointer; transition: background .12s, opacity .25s, transform .25s; }
.r2-row + .r2-row { box-shadow: inset 0 1px 0 var(--hair); }
.r2-row:hover { background: #faf9f6; }
.r2-row.on { background: #f4f2ec; }
.r2-row.gone { opacity: 0; transform: translateX(12px); }
.r2-row:focus-visible { outline-offset: -2px; }
.r2-av { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--sand); color: var(--ink-2); font: 500 14px/1 var(--serif, Georgia, serif); letter-spacing: .01em; }
.r2-av.blue { background: var(--blue-soft, #eef1ff); color: var(--pri); }
.r2-av.navy { background: var(--ink); color: #fff; }
.r2-av.grey { color: var(--mute); }
.r2-av.sm { width: 28px; height: 28px; font-size: 11.5px; }
.r2-av.lg { width: 52px; height: 52px; font-size: 20px; }
.r2-rt { display: grid; gap: 2px; flex: 1; min-width: 0; }
.r2-r1 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }
.r2-rt b { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r2-sub { font-size: 12.5px; line-height: 1.4; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r2-next { margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--mute); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.r2-st { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; color: var(--mute); white-space: nowrap; }
.r2-st.ready { color: var(--pri); } .r2-st.warn { color: var(--warn, #9a5b00); } .r2-st.bad { color: var(--bad, #b3261e); }
.r2-st .dot.spin, .r2-agent .dot.spin, .r2-run .dot.spin { width: 11px; height: 11px; flex: none; }
.r2-list.f-ready .r2-st.ready { display: none; }
.r2-none, .r2-empty, .r2-quiet { margin: 0; font-size: 13px; color: var(--mute); }
.r2-none { padding: 28px 16px; text-align: center; } .r2-empty { padding: 60px 20px; text-align: center; }
.r2-keys { margin: 0; padding: 11px 16px; font-size: 11.5px; color: #a9a69c; box-shadow: inset 0 1px 0 var(--hair); }

/* One person */
.r2-panel { min-width: 0; min-height: 0; background: #fff; border: 1px solid var(--hair); border-radius: 14px; padding: 24px 26px 0; overflow: hidden auto; }
.r2-panel::after { content: ""; display: block; height: 24px; }  /* the foot space lives here, so the action row can rest on the panel's true bottom edge */
.r2-panel:empty { display: none; }
.r2-panel.swap > * { animation: r2in .22s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes r2in { from { opacity: 0; transform: translateY(4px); } }
.r2-ph { display: flex; align-items: center; gap: 16px; }
.r2-pht { flex: 1; min-width: 0; }
.r2-pht h3 { margin: 0; font: 500 26px/1.15 var(--serif, Georgia, serif); letter-spacing: -.01em; overflow-wrap: anywhere; }
.r2-pht p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.r2-back, .r2-x { display: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 9px; background: none; color: var(--ink-2); place-items: center; cursor: pointer; }
.r2-back:hover, .r2-x:hover { background: var(--sand); color: var(--ink); }
.r2-facts { display: flex; justify-content: space-between; gap: 16px; margin: 16px 0 0; font-size: 12.5px; color: var(--ink-2); }
.r2-facts .r2-last { flex: none; color: var(--mute); }
.r2-track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 20px 0 2px; }
.r2-track button { position: relative; display: grid; justify-items: center; gap: 8px; padding: 0 2px; border: 0; background: none; cursor: pointer; }
.r2-track button::before { content: ""; position: absolute; top: 5px; right: 50%; width: 100%; height: 2px; background: var(--hair); transition: background .2s; }
.r2-track button:first-child::before { display: none; }
.r2-track button.done::before, .r2-track button.at::before { background: var(--pri); }
.r2-track i { position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #cfccc2; transition: transform .15s, box-shadow .2s, background .2s; }
.r2-track .done i { background: var(--pri); box-shadow: none; }
.r2-track .at i { background: var(--pri); box-shadow: 0 0 0 4px var(--blue-soft, #eef1ff); }
.r2-track button:hover i { transform: scale(1.2); }
.r2-track span { font-size: 12px; line-height: 1.3; color: var(--mute); text-align: center; transition: color .2s; }
.r2-track .at span { color: var(--ink); font-weight: 600; }
.r2-track button:hover span { color: var(--ink); }
.r2-sec { margin-top: 24px; }
.r2-sec h4 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.r2-sec h4 small { font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.r2-nextp { margin: 0; font: 400 18px/1.4 var(--serif, Georgia, serif); color: var(--ink); }
.r2-why { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); white-space: pre-line; overflow-wrap: anywhere; }
.r2-draft { display: block; width: 100%; box-sizing: border-box; resize: none; padding: 16px 18px; border: 0; border-radius: 12px; background: #faf9f6; box-shadow: inset 0 0 0 1px var(--hair); font-size: 14px; line-height: 1.6; color: var(--ink); transition: box-shadow .15s, background .15s; }
.r2-draft:focus { background: #fff; box-shadow: inset 0 0 0 1px var(--ink-2); }
.r2-draft:disabled { opacity: .55; }
.r2-agent { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 12.5px; color: var(--ink-2); } .r2-agent.bad { color: var(--bad, #b3261e); }
.r2-change { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 4px 4px 4px 14px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--hair); transition: box-shadow .15s; }
.r2-change:focus-within { box-shadow: inset 0 0 0 1px var(--ink-2); }
.r2-change input { flex: 1; min-width: 0; border: 0; background: none; font-size: 13.5px; padding: 6px 0; }
.r2-change .r2-send { width: 30px; height: 30px; border-radius: 8px; } .r2-change .r2-send svg { width: 14px; height: 14px; }
.r2-write { margin-top: 10px; }
.r2-acts { position: sticky; bottom: 0; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px -26px 0; padding: 14px 26px; background: #fff; box-shadow: inset 0 1px 0 var(--hair); }
.r2-grow { flex: 1; }
.r2-log { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-bottom: 16px; }
.r2-hist { list-style: none; margin: 0; padding: 0; display: grid; }
.r2-hist li { position: relative; display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 12px; padding-bottom: 14px; }
.r2-hist li::before { content: ""; position: absolute; left: 3.5px; top: 13px; bottom: -3px; width: 1px; background: var(--hair); }
.r2-hist li:last-child::before { display: none; } .r2-hist li:last-child { padding-bottom: 0; }
.r2-hist i { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: #cfccc2; }
.r2-hist .k-message i, .r2-hist .k-meeting i, .r2-hist .k-call i { background: var(--pri); }
.r2-hist .k-reply i { background: var(--good, #1f7a4f); }
.r2-hist small { font-size: 12px; color: var(--mute); }
.r2-hist p { margin: 2px 0 0; font-size: 13px; line-height: 1.55; color: var(--ink-2); white-space: pre-line; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.r2-skel { display: grid; gap: 10px; padding: 16px 18px; border-radius: 12px; background: #faf9f6; box-shadow: inset 0 0 0 1px var(--hair); }
.r2-skel i { height: 10px; border-radius: 5px; background: linear-gradient(90deg, #eeebe3 25%, #f6f4ee 50%, #eeebe3 75%); background-size: 200% 100%; animation: r2shim 1.2s linear infinite; }
.r2-skel i:nth-child(2) { width: 86%; } .r2-skel i:nth-child(3) { width: 58%; }
@keyframes r2shim { to { background-position: -200% 0; } }
.r2-edit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; margin-top: 20px; }
.r2-edit label { display: grid; gap: 5px; min-width: 0; } .r2-edit label.wide, .r2-editb { grid-column: 1 / -1; }
.r2-edit label span { font-size: 12px; color: var(--ink-2); }
.r2-edit textarea { height: auto; padding: 9px 11px; resize: vertical; line-height: 1.5; }
.r2-editb { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.r2-park { margin-right: auto; padding-left: 0; }

/* The board: one column for each step, cards you can drag */
.r2-board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; height: 100%; min-height: 0; }
.r2-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: rgba(28, 34, 48, .035); border-radius: 14px; transition: background .15s, box-shadow .15s; }
.r2-col.over { background: var(--sand); box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.r2-col header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 13px 14px 9px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.r2-col header em { font-style: normal; font-weight: 400; color: var(--mute); font-variant-numeric: tabular-nums; }
.r2-colb { display: grid; gap: 6px; align-content: start; padding: 0 8px 8px; overflow: hidden auto; min-height: 60px; }
.r2-card { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 11px; border: 0; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--hair); text-align: left; cursor: grab; transition: box-shadow .15s, transform .15s, opacity .15s; }
.r2-card:hover { box-shadow: inset 0 0 0 1px #cfccc2, 0 6px 14px -10px rgba(12, 29, 51, .35); transform: translateY(-1px); }
.r2-card.on { box-shadow: inset 0 0 0 1.5px var(--ink); }
.r2-card.drag { opacity: .4; }
.r2-card b { font-size: 13px; font-weight: 600; } .r2-card .r2-sub { font-size: 12px; color: var(--mute); }
.r2-pip { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--pri); }
.r2-pip.owed, .r2-pip.due { background: #c98a1e; } .r2-pip.stop { background: var(--bad, #b3261e); }
.r2-pip.busy { background: none; border: 2px solid var(--pri); border-right-color: transparent; animation: spin 1s linear infinite; }
.r2-col .r2-none { padding: 18px 8px; font-size: 12px; }

/* The agent, at the foot: the same box as on a deal */
.r2-dock { display: grid; gap: 8px; justify-items: center; }
.r2-ask { display: flex; align-items: center; gap: 8px; width: min(760px, 100%); box-sizing: border-box; padding: 6px 6px 6px 16px; background: #fff; border: 1px solid var(--hair); border-radius: 14px; box-shadow: 0 10px 30px -18px rgba(12, 29, 51, .4); transition: border-color .15s; }
.r2-ask:focus-within { border-color: #cfccc2; }
.r2-ask textarea { flex: 1; min-width: 0; max-height: 180px; border: 0; background: none; resize: none; font-size: 14.5px; line-height: 1.45; padding: 7px 0; overflow-y: auto; }
.r2-ask .r2-send { align-self: flex-end; }
.r2-run { display: flex; align-items: flex-start; gap: 10px; width: min(760px, 100%); box-sizing: border-box; margin: 0; padding: 11px 14px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--hair); font-size: 13px; line-height: 1.5; color: var(--ink-2); animation: r2in .22s cubic-bezier(.2, .8, .2, 1) both; }
.r2-run[hidden] { display: none; }
.r2-run > .dot.spin, .r2-run > .r2-ok, .r2-run > .r2-bang { margin-top: 3px; }
.r2-runt { flex: 1; min-width: 0; display: grid; gap: 4px; }
.r2-runt b { font-weight: 500; color: var(--ink); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.r2-who { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12.5px; }
.r2-who span { color: var(--mute); }
.r2-run .r2-btn { height: 28px; padding: 0 10px; font-size: 12.5px; }
.r2-run.failed .r2-runt b { color: var(--bad, #b3261e); }
.r2-ok { display: grid; place-items: center; flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--good, #1f7a4f); color: #fff; }
.r2-bang { display: grid; place-items: center; flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--bad, #b3261e); color: #fff; font-size: 11px; font-weight: 700; }

/* Desk and laptop: the page fills the window; the list and the person scroll on their own */
@media (min-width: 821px) {
  body.rel2 #pplCard.as-page .ppl-card-h { align-items: center; padding-top: 24px; padding-bottom: 16px; }
  body.rel2 #pplCard.as-page .ppl-card-h, body.rel2 #pplCard.as-page .ppl-card-b { padding-left: max(28px, calc((100% - 1240px) / 2)); padding-right: max(28px, calc((100% - 1240px) / 2)); }
  body.rel2.no-side #pplCard.as-page .ppl-card-h { padding-left: max(60px, calc((100% - 1240px) / 2)); }
  #pplCard.as-page [data-ppl-toggle].icon, #dlCard.as-page [data-dl-toggle].icon { display: none; }  /* a page has no close button: the menu moves you */
  body.rel2 #pplCard.as-page .ppl-card-b { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 18px; }
  .r2 { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .r2 > * { flex: none; } .r2 > .r2-main { flex: 1; }
  .r2-main.list { grid-template-rows: minmax(0, 1fr); }
  .r2-main.board .r2-panel { position: fixed; z-index: 62; top: 12px; right: 12px; bottom: 12px; width: min(520px, calc(100vw - 300px)); box-shadow: 0 24px 60px -20px rgba(20, 28, 45, .4), 0 2px 6px rgba(20, 28, 45, .08); transform: translateX(calc(100% + 24px)); transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
  .r2-main.board.open .r2-panel { transform: none; }
  .r2-main.board .r2-x { display: grid; }
  .r2-main.board { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 821px) and (max-width: 1180px) {
  .r2-today { grid-template-columns: minmax(0, 1fr); } .r2-funnel { box-shadow: inset 0 1px 0 var(--hair); } .r2-fcell:last-child { border-radius: 0 0 14px 0; }
  .r2-main.list { grid-template-columns: minmax(250px, 320px) minmax(0, 1fr); }
  .r2-row .r2-st { display: none; } .r2-panel { padding: 20px 20px 0; } .r2-acts { margin: 14px -20px 0; padding: 14px 20px; }
}
@media (min-width: 821px) and (max-height: 640px) {
  body.rel2 #pplCard.as-page .ppl-card-b { display: block; overflow-y: auto; }
  .r2-main.list .r2-list, .r2-main.list .r2-panel { max-height: 78vh; } .r2-board { height: 78vh; }
}

/* Phone: one column; a person opens over the list and Back returns to it */
@media (max-width: 820px) {
  .r2-htools .r2-seg { display: none; }
  .r2 { gap: 12px; padding-bottom: 8px; }
  .r2-today { grid-template-columns: minmax(0, 1fr); }
  .r2-quota { padding: 14px 16px; gap: 14px; } .r2-qn { font-size: 34px; }
  .r2-funnel { box-shadow: inset 0 1px 0 var(--hair); }
  .r2-fcell { padding: 12px 6px 12px 14px; align-content: start; } .r2-fcell:last-child { border-radius: 0 0 14px 0; } .r2-fcell b { font-size: 21px; } .r2-fcell small { font-size: 11px; line-height: 1.25; white-space: normal; }
  .r2-filters { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
  .r2-search { flex: none; } .r2-search input { font-size: 16px; }
  .r2-add { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .r2-add .wide, .r2-addb { grid-column: 1 / -1; }
  .r2-add input, .r2-add select, .r2-edit input, .r2-edit select, .r2-edit textarea, .r2-log input { height: 40px; font-size: 16px; } .r2-edit textarea { height: auto; }
  .r2-draft, .r2-change input, .r2-ask textarea { font-size: 16px; }
  .r2-main.list { grid-template-columns: minmax(0, 1fr); }
  .r2-row { padding: 13px 14px; } .r2-row.on { background: none; }
  .r2-panel { position: fixed; z-index: 64; inset: 0; border: 0; border-radius: 0; padding: max(14px, env(safe-area-inset-top, 0px)) 16px 0; transform: translateX(100%); visibility: hidden; transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s .28s; }
  .r2-main.open .r2-panel { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
  .r2-back { display: grid; margin-left: -8px; } .r2-av.lg { width: 44px; height: 44px; font-size: 17px; } .r2-pht h3 { font-size: 22px; }
  .r2-ph { gap: 10px; position: sticky; top: calc(-1 * max(14px, env(safe-area-inset-top, 0px))); z-index: 2; margin: calc(-1 * max(14px, env(safe-area-inset-top, 0px))) -16px 0; padding: max(14px, env(safe-area-inset-top, 0px)) 16px 12px; background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: inset 0 -1px 0 var(--hair); }
  .r2-facts { flex-direction: column; gap: 2px; }
  .r2-track span { font-size: 11px; }
  .r2-panel::after { height: calc(24px + env(safe-area-inset-bottom, 0px)); }
  .r2-acts { margin: 14px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .r2-acts .r2-btn { height: 40px; } .r2-acts .r2-grow { flex-basis: 100%; height: 0; } .r2-acts .r2-sent { flex: 1; height: 44px; font-size: 14.5px; }
  .r2-log { grid-template-columns: minmax(0, 1fr) auto; } .r2-log .r2-seg { grid-column: 1 / -1; justify-self: start; } .r2-log .r2-btn { height: 40px; }
  .r2-edit { grid-template-columns: minmax(0, 1fr); }
  .r2-dock { position: sticky; bottom: -18px; z-index: 3; margin: 0 -14px -18px; padding: 14px 12px calc(12px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, #fff 78%, rgba(255, 255, 255, 0)); }
}
@media (prefers-reduced-motion: reduce) { .r2-qbar > span, .r2-row, .r2-panel, .r2-card, .r2-track i { transition: none !important; } .r2-skel i, .r2-panel.swap > *, .r2-run { animation: none; } }

/* Small fixes on the deal stage (this file loads last, after displays.css) */
.dd-in .dd-rail > .dd-card + .dd-card { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line, #e7e4dc); }  /* phone card: the second block of figures no longer runs into the first */
.dd[data-view="cmp"] .dd-chart { max-height: calc(100dvh - 190px); overflow-y: auto; }  /* a long comparison table scrolls instead of covering the top bar */

/* Person panel, 7 Oct: the message is the page. One line says the next step; notes, the log and the history open on demand. */
.r2-panel .r2-nextp { margin: 18px 0 0; font: 500 14px/1.5 var(--sans, Manrope, sans-serif); color: var(--ink); }
.r2-panel .r2-msg { margin-top: 14px; }
.r2-panel .r2-draft { padding: 18px 20px; font-size: 15px; line-height: 1.65; }
.r2-more { margin-top: 18px; border-top: 1px solid var(--hair); }
.r2-more summary { display: flex; align-items: baseline; gap: 10px; padding: 14px 0; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; list-style: none; }
.r2-more summary::-webkit-details-marker { display: none; }
.r2-more summary::before { content: "›"; flex: none; color: var(--mute); transition: transform .15s; }
.r2-more[open] summary::before { transform: rotate(90deg); }
.r2-more summary small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 400; color: var(--mute); }
.r2-more .r2-why { margin: 0 0 16px; }

/* Market switch: beside List | Board at the top of the page; on the phone it takes its own row under the title */
.r2-markets { --sand: #f1efe8; --pri: var(--blue, #1439c6); margin-left: auto; margin-right: 8px; align-self: center; }
.r2-markets[hidden] { display: none; }
.r2-markets button { margin: 0; }
.r2-markets :focus-visible { outline: 2px solid var(--pri); outline-offset: 2px; border-radius: 9px; }
@media (max-width: 820px) {
  body.rel2 #pplCard .ppl-card-h { flex-wrap: wrap; }
  .r2-markets:not([hidden]) { display: flex; order: 3; flex: 0 0 100%; margin: 12px 0 0; }
  .r2-markets button { flex: 1; height: 34px; }
}

/* Add people (8 Oct): one box to type or paste into, then one card per person to check before saving. */
.r2-add.v2 { display: block; padding: 14px; }
.r2-add.v2[hidden] { display: none; }
.r2-add.v2 textarea { display: block; width: 100%; box-sizing: border-box; min-height: 88px; max-height: 280px; padding: 11px 12px; border: 0; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px var(--hair); font-size: 14.5px; line-height: 1.5; resize: vertical; transition: box-shadow .15s; }
.r2-add.v2 textarea:focus { box-shadow: inset 0 0 0 1px var(--ink-2); }
.r2-add.v2 textarea:disabled { color: var(--mute); }
.r2-add.v2 .r2-addb { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.r2-add.v2 .r2-agent { margin: 0 0 0 8px; }
.r2-addnote { margin: 0 0 12px; font-size: 12.5px; color: var(--ink-2); }
.r2-picks { display: flex; gap: 8px; min-width: 0; }
.r2-pick { display: inline-flex; align-items: center; gap: 4px; min-width: 0; height: 42px; padding: 0 8px 0 14px; border-radius: 13px; background: #fff; box-shadow: inset 0 0 0 1px var(--hair); font-size: 13.5px; color: var(--mute); cursor: pointer; }
.r2-pick select { min-width: 0; height: 40px; padding: 0 2px; border: 0; background: none; font-weight: 600; color: var(--ink); cursor: pointer; text-overflow: ellipsis; }
.toast.r2-fail { background: var(--bad, #b3261e); color: #fff; }
@media (max-width: 820px) { .r2-picks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .r2-pick { height: 46px; } .r2-pick select { flex: 1; font-size: 16px; } }
.r2-newlist { display: grid; }
.r2-newc { position: relative; display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.2fr) 32px; gap: 8px; align-items: center; padding: 12px 0; border-top: 1px solid var(--hair); }
.r2-newc:first-child { padding-top: 0; border-top: 0; }
.r2-newc .wide { grid-column: 1 / 5; } .r2-newa { grid-column: 1 / 3; } .r2-newb { grid-column: 3 / 5; } .r2-newm { grid-column: 5 / 6; } .r2-newl { grid-column: 3 / 6; }
.r2-add.v2 .r2-newn { font-weight: 600; }
.r2-add.v2 .r2-newc.bad .r2-newn { box-shadow: inset 0 0 0 1px var(--bad, #b3261e); }
.r2-newx { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 9px; background: none; color: var(--mute); cursor: pointer; }
.r2-newx:hover { background: var(--sand); color: var(--ink); }
.r2-newc.there { display: flex; gap: 10px; font-size: 13.5px; min-height: 34px; }
.r2-newc.there span { flex: 1; color: var(--mute); }
@media (max-width: 820px) {
  .r2-newc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 14px 0; }
  .r2-newc .r2-newn, .r2-newc .wide, .r2-newa, .r2-newb, .r2-newm, .r2-newl { grid-column: 1 / -1; } .r2-add.v2 .r2-newn { padding-right: 44px; }
  .r2-newx { position: absolute; top: 14px; right: 0; width: 40px; height: 40px; } .r2-newc:first-child .r2-newx { top: 0; }
  .r2-add.v2 textarea { font-size: 16px; }
  .r2-add.v2 .r2-addb { flex-wrap: wrap; } .r2-add.v2 .r2-addb .r2-btn { height: 40px; } .r2-add.v2 .r2-addb .pri { flex: 1; }
}

/* Relationships UI (8 Oct, evening): the app's own menus instead of the browser's, and adding people as one flow:
   a calm box to paste into, a quiet reading state, then each person as a list row grown into a card. */
.r2-over, .r2-menu, .r2-scrim { --hair: var(--line, #e4e2da); --sand: #f1efe8; --pri: var(--blue, #1439c6); font: 13.5px/1.5 var(--sans, Manrope, sans-serif); color: var(--ink); }
:where(.r2-over, .r2-menu) :where(button, input, textarea) { font: inherit; color: inherit; margin: 0; }
:where(.r2-over, .r2-menu) :where(button, a) { -webkit-tap-highlight-color: transparent; }
.r2-over :focus-visible { outline: 2px solid var(--pri); outline-offset: 2px; border-radius: 9px; }
.r2-over :is(input, textarea):focus-visible, .r2-menu:focus-visible, .r2-menu button:focus-visible { outline: 0; }
.r2-over ::placeholder { color: var(--mute); opacity: 1; }

/* The two filters: what is chosen and how many, one tap to change */
.r2-picks { display: flex; gap: 8px; min-width: 0; }
.r2-pick { display: inline-flex; align-items: center; gap: 7px; flex: 0 1 auto; min-width: 0; height: 42px; padding: 0 11px 0 14px; border: 0; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--hair); font-size: 13.5px; color: var(--ink); white-space: nowrap; cursor: pointer; transition: box-shadow .15s; }
.r2-pick:hover, .r2-pick.open { box-shadow: inset 0 0 0 1px var(--ink-2); }
.r2-pick > span { color: var(--mute); }
.r2-pick > b { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.r2-pick > em { font-style: normal; font-size: 12.5px; color: var(--mute); font-variant-numeric: tabular-nums; }
.r2-pick > svg, .r2-chip > svg, .r2-fbtn > svg { flex: none; color: var(--mute); transition: transform .15s; }
.r2-pick.open > svg, .r2-chip.open > svg, .r2-fbtn.open > svg { transform: rotate(180deg); }
.r2-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin: 0 -4px 0 6px; cursor: pointer; opacity: .55; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23445266' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center / 14px no-repeat; }
.r2-search input::-webkit-search-cancel-button:hover { opacity: 1; }

/* The menu */
.r2-menu { position: fixed; z-index: 68; box-sizing: border-box; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow-y: auto; padding: 6px; background: #fff; border-radius: 12px; box-shadow: 0 0 0 1px var(--hair), 0 16px 36px -14px rgba(12, 29, 51, .28), 0 2px 6px rgba(12, 29, 51, .05); transform-origin: top left; animation: r2pop .15s cubic-bezier(.2, .8, .2, 1) both; }
.r2-menu.up { transform-origin: bottom left; }
@keyframes r2pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.r2-menu h6 { display: none; margin: 0; }
.r2-menu button { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 9px; width: 100%; height: 34px; padding: 0 10px 0 9px; border: 0; border-radius: 8px; background: none; text-align: left; font-size: 13.5px; font-weight: 500; color: var(--ink-2); white-space: nowrap; cursor: pointer; }
.r2-menu button.act { background: var(--sand); color: var(--ink); }
.r2-menu button.on { color: var(--ink); font-weight: 600; }
.r2-menu button > i { display: grid; place-items: center; color: var(--pri); }
.r2-menu button > i svg { width: 13px; height: 13px; }
.r2-menu button > em { font-style: normal; font-size: 12.5px; font-weight: 400; color: var(--mute); font-variant-numeric: tabular-nums; padding-left: 18px; }
.r2-menu button.zero:not(.on) { color: #a9a69c; } .r2-menu button.zero > em { color: #c3c0b6; }
.r2-scrim { position: fixed; z-index: 67; inset: 0; background: rgba(12, 29, 51, .3); animation: r2fade .2s ease both; }
.r2-scrim.out { opacity: 0; transition: opacity .18s; }
@keyframes r2fade { from { opacity: 0; } }
.r2-menu.sheet { left: 0; right: 0; bottom: 0; top: auto; max-width: none; max-height: 80dvh; padding: 8px 10px calc(14px + env(safe-area-inset-bottom, 0px)); border-radius: 20px 20px 0 0; box-shadow: 0 -10px 40px -20px rgba(12, 29, 51, .4); animation: r2sheet .2s cubic-bezier(.2, .8, .2, 1) both; }
.r2-menu.sheet.out { transform: translateY(100%); transition: transform .18s ease-in; }
@keyframes r2sheet { from { transform: translateY(100%); } }
.r2-menu.sheet::before { content: ""; display: block; width: 36px; height: 4px; margin: 0 auto 12px; border-radius: 2px; background: #d8d5cb; }
.r2-menu.sheet h6 { display: block; margin: 0 10px 8px; font: 500 20px/1.2 var(--serif, Georgia, serif); color: var(--ink); }
.r2-menu.sheet button { grid-template-columns: minmax(0, 1fr) auto 20px; gap: 10px; height: 52px; padding: 0 10px 0 12px; border-radius: 12px; font-size: 16px; }
.r2-menu.sheet button.act { background: none; } .r2-menu.sheet button.on, .r2-menu.sheet button:active { background: var(--sand); }
.r2-menu.sheet button > i { order: 3; } .r2-menu.sheet button > i svg { width: 16px; height: 16px; }
.r2-menu.sheet button > em { font-size: 14.5px; padding-left: 0; }

/* A field picked from the menu: a chip on a card, a full-width button in the Edit form */
.r2-chip { display: inline-flex; align-items: center; gap: 6px; flex: none; max-width: 100%; height: 30px; padding: 0 8px 0 11px; border: 0; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--hair); font-size: 12.5px; white-space: nowrap; cursor: pointer; transition: box-shadow .15s, background .15s; }
.r2-chip b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; } .r2-chip.none b { font-weight: 500; color: var(--mute); }
.r2-chip:hover, .r2-chip.open { box-shadow: inset 0 0 0 1px var(--ink-2); }
.r2-fbtn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-width: 0; height: 34px; padding: 0 9px 0 11px; border: 0; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px var(--hair); font-size: 13.5px; text-align: left; cursor: pointer; transition: box-shadow .15s; }
.r2-fbtn b { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .r2-fbtn.none b { color: var(--mute); }
.r2-fbtn:hover, .r2-fbtn.open { box-shadow: inset 0 0 0 1px var(--ink-2); }

/* Add people: over the page when there is a list; the page itself when the list is empty */
.r2-over { position: fixed; z-index: 66; inset: 0; display: grid; justify-items: center; align-items: start; padding: min(12vh, 110px) 16px 24px; overflow-y: auto; background: rgba(12, 29, 51, .3); animation: r2fade .18s ease both; }
.r2-over[hidden], .r2-new[hidden], #r2AddSlot[hidden] { display: none; }
.r2-new { display: grid; gap: 14px; box-sizing: border-box; min-width: 0; }
.r2-new.r2-dlg { width: min(640px, 100%); padding: 20px; background: #fff; border-radius: 16px; box-shadow: 0 0 0 1px rgba(12, 29, 51, .06), 0 30px 70px -30px rgba(12, 29, 51, .5); animation: r2rise .2s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes r2rise { from { opacity: 0; transform: translateY(8px) scale(.985); } }
.r2-nh { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; }
.r2-nh h3 { margin: 0; font: 500 22px/1.2 var(--serif, Georgia, serif); letter-spacing: -.01em; }
.r2-nh p { grid-column: 1 / -1; margin: 4px 0 0; font-size: 14px; color: var(--ink-2); }
.r2-px { display: grid; place-items: center; flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--mute); cursor: pointer; transition: background .15s, color .15s; }
.r2-px:hover { background: var(--sand); color: var(--ink); } .r2-px svg { width: 15px; height: 15px; }
.r2-comp { display: grid; padding: 14px 14px 12px 16px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--hair); transition: box-shadow .15s; }
.r2-comp:focus-within { box-shadow: inset 0 0 0 1px #cfccc2; }
.r2-comp textarea { display: block; width: 100%; box-sizing: border-box; min-height: 96px; padding: 0; border: 0; background: none; resize: none; font-size: 16px; line-height: 1.55; color: var(--ink); }
.r2-nf { display: flex; align-items: center; gap: 8px; min-width: 0; }
.r2-comp .r2-nf { margin-top: 8px; } .r2-comp .r2-btn.quiet { padding-left: 0; }
.r2-nf .r2-btn { height: 36px; } .r2-nf .r2-btn.quiet:first-child { padding-left: 2px; }
.r2-nf kbd { margin-right: 4px; font: 500 11.5px/1 var(--sans, Manrope, sans-serif); color: #a9a69c; }
.r2-quote { margin: 0; padding: 12px 16px; border-radius: 12px; background: #faf9f6; box-shadow: inset 0 0 0 1px var(--hair); font-size: 14px; line-height: 1.55; color: var(--ink-2); white-space: pre-line; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.r2-new .r2-reading { margin: 0; }
.r2-nnote { margin: -6px 0 0; font-size: 12.5px; color: var(--ink-2); }
.r2-nlist { display: grid; gap: 10px; align-content: start; min-height: 0; }
.r2-new.r2-dlg .r2-nlist { max-height: calc(100vh - min(12vh, 110px) - 190px); margin: 0 -8px; padding: 1px 8px; overflow-y: auto; }

/* One person to check: the list row, grown into a card you can edit */
.r2-pc { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px 12px 14px 16px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--hair); animation: r2in .2s cubic-bezier(.2, .8, .2, 1) both; }
.r2-pc:nth-child(2) { animation-delay: .04s; } .r2-pc:nth-child(3) { animation-delay: .08s; } .r2-pc:nth-child(n+4) { animation-delay: .12s; }
.r2-pc > .r2-av { width: 40px; height: 40px; font-size: 15px; transition: background .2s, color .2s; }
.r2-pct { display: grid; gap: 0; min-width: 0; }
.r2-pc1 { display: flex; align-items: center; gap: 8px; margin-top: -2px; }
.r2-new input.r2-pn, .r2-new input.r2-pi { min-width: 0; height: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; text-overflow: ellipsis; }
.r2-new input.r2-pn { flex: 1; height: 30px; font: 500 20px/1.2 var(--serif, Georgia, serif); letter-spacing: -.005em; color: var(--ink); }
.r2-new input.r2-pi { height: 24px; font-size: 13.5px; color: var(--ink-2); }
.r2-new input:is(.r2-pn, .r2-pi):focus-visible { border-radius: 0; }
.r2-new input:is(.r2-pn, .r2-pi)::placeholder { color: #b4b1a7; }
.r2-new input:is(.r2-pn, .r2-pi):hover { box-shadow: inset 0 -1px 0 var(--hair); }
.r2-new input:is(.r2-pn, .r2-pi):focus { box-shadow: inset 0 -1px 0 var(--ink-2); color: var(--ink); }
.r2-pc.bad input.r2-pn { box-shadow: inset 0 -1.5px 0 var(--bad, #b3261e); } .r2-pc.bad input.r2-pn::placeholder { color: var(--bad, #b3261e); }
.r2-pc.failed { box-shadow: inset 0 0 0 1px var(--bad, #b3261e); }
.r2-pc2 { display: flex; align-items: center; gap: 7px; min-width: 0; padding-right: 30px; }
.r2-pc2 > i { flex: none; font-style: normal; color: #b4b1a7; }
.r2-pc2 input { field-sizing: content; min-width: 34px; max-width: 62%; }
@supports not (field-sizing: content) { .r2-pc2 input { flex: 1; max-width: none; } }
.r2-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.r2-pls { display: grid; gap: 2px; margin-top: 12px; padding: 10px 4px 0 0; border-top: 1px solid var(--hair); }
.r2-pl { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 8px; cursor: text; }
.r2-pl > span { font-size: 12.5px; color: var(--mute); }
.r2-pl input.r2-pi { color: var(--ink); }
.r2-pc.there { grid-template-columns: 40px minmax(0, 1fr) auto 30px; align-items: center; padding-top: 12px; padding-bottom: 12px; background: #faf9f6; }
.r2-pc.there .r2-pct b { font: 500 17px/1.25 var(--serif, Georgia, serif); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r2-pc.there .r2-pct small { font-size: 12.5px; color: var(--mute); }
.r2-pc.skel { animation: none; } .r2-pc.skel + .r2-pc.skel { opacity: .65; } .r2-pc.skel + .r2-pc.skel + .r2-pc.skel { opacity: .35; }
.r2-pc.skel .r2-pct { gap: 10px; padding: 5px 0 3px; }
.r2-pc.skel i { display: block; height: 10px; border-radius: 5px; background: linear-gradient(90deg, #eeebe3 25%, #f6f4ee 50%, #eeebe3 75%); background-size: 200% 100%; animation: r2shim 1.2s linear infinite; }
.r2-pc.skel i.r2-av { height: 40px; border-radius: 50%; }
.r2-pc.skel .r2-pct i:nth-child(1) { width: 34%; height: 14px; } .r2-pc.skel .r2-pct i:nth-child(2) { width: 52%; } .r2-pc.skel .r2-pct i:nth-child(3) { width: 180px; max-width: 80%; height: 22px; border-radius: 8px; }

/* An empty list: the box is the page */
body.r2-nobody .r2-htools, body.r2-nobody .r2-filters, body.r2-nobody .r2-main { display: none; }
#r2AddSlot { display: grid; justify-items: center; align-content: start; min-height: 0; padding: clamp(8px, 5vh, 48px) 0 12px; overflow-y: auto; }
body.r2-nobody .r2 > #r2AddSlot { flex: 1; }
.r2-new.r2-hero { width: min(640px, 100%); }
.r2-new.r2-hero .r2-nh { justify-items: center; text-align: center; grid-template-columns: minmax(0, 1fr); margin-bottom: 6px; }
.r2-new.r2-hero .r2-nh h3 { font-size: 28px; }
.r2-new.r2-hero.s-in .r2-comp { box-shadow: inset 0 0 0 1px var(--hair), 0 14px 34px -24px rgba(12, 29, 51, .35); }

/* New people land in the list with one soft glow */
.r2-row.new, .r2-card.new { animation: r2new 2.2s ease-out both; }
@keyframes r2new { 0%, 35% { background: var(--blue-soft, #edf1fd); } 100% { background: transparent; } }
.r2-card.new { animation-name: r2newc; } @keyframes r2newc { 0%, 35% { background: var(--blue-soft, #edf1fd); } 100% { background: #fff; } }

/* Small things from the click-through */
.r2-acts [data-r-copy] { min-width: 66px; } .r2-ph [data-r-edit] { min-width: 58px; }  /* Copy / Copied and Edit / Close keep their width, so nothing beside them shifts */

@media (min-width: 821px) and (max-width: 1180px) {  /* a narrow window: today's number and the five steps stay on one row, so the list and the person keep their height */
  .r2-today { grid-template-columns: minmax(236px, 1fr) minmax(0, 1.9fr); } .r2-funnel { box-shadow: inset 1px 0 0 var(--hair); } .r2-fcell:last-child { border-radius: 0 14px 14px 0; }
  .r2-quota { padding: 14px 16px; gap: 12px; } .r2-qn { font-size: 32px; }
  .r2-fcell { padding: 12px 6px 12px 16px; align-content: start; } .r2-fcell small { font-size: 11.5px; line-height: 1.25; white-space: normal; } .r2-fcell b { font-size: 22px; }
  .r2-board { gap: 8px; } .r2-board .r2-av.sm { display: none; } .r2-card { padding: 9px 10px; }
}

@media (max-width: 820px) {
  .r2-pick { height: 44px; font-size: 15px; } .r2-pick > em { font-size: 14px; }
  .r2-pick.set > span { display: none; }  /* the choice says what it is; the room goes to the words */
  .r2-over { padding: 0; align-items: stretch; background: #fff; animation: none; }
  .r2-new.r2-dlg { width: 100%; min-height: 100dvh; align-content: start; grid-template-rows: auto; padding: max(14px, env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px)); border-radius: 0; box-shadow: none; animation: r2up .22s cubic-bezier(.2, .8, .2, 1) both; }
  @keyframes r2up { from { opacity: 0; transform: translateY(24px); } }
  .r2-new.r2-dlg .r2-nlist { max-height: none; margin: 0; padding: 0; overflow: visible; }
  .r2-new.r2-dlg .r2-nh { min-height: 36px; } .r2-px { width: 36px; height: 36px; }
  .r2-new.r2-dlg > .r2-nf { position: sticky; bottom: 0; margin: 0 -16px calc(-16px - env(safe-area-inset-bottom, 0px)); padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: #fff; box-shadow: inset 0 1px 0 var(--hair); }
  .r2-comp textarea { min-height: 120px; }
  .r2-nf .r2-btn { height: 42px; } .r2-nf .r2-btn.pri { padding: 0 18px; font-size: 14.5px; } .r2-nf kbd { display: none; }
  .r2-pc { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 14px 10px 12px 14px; } .r2-pc > .r2-av { width: 36px; height: 36px; font-size: 14px; }
  .r2-new input.r2-pn { height: 32px; } .r2-new input.r2-pi { height: 30px; font-size: 16px; }
  .r2-chip { height: 36px; padding: 0 10px 0 12px; font-size: 14px; } .r2-chips { gap: 8px; }
  .r2-pl { grid-template-columns: 64px minmax(0, 1fr); } .r2-pl > span { font-size: 13.5px; }
  .r2-fbtn { height: 40px; font-size: 16px; }
  #r2AddSlot { padding-top: 10px; } .r2-new.r2-hero .r2-nh h3 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { .r2-menu, .r2-scrim, .r2-over, .r2-new.r2-dlg, .r2-pc, .r2-row.new, .r2-card.new { animation: none !important; } }

/* ---------- People cards (8 Oct, night): a face or a firm mark, what they do, why we talk to them ----------
   Sand means buildings, blue means money, an outline means advice, navy means working together: the thesis colours. */
.r2-av { position: relative; overflow: hidden; }
.r2-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; background: #fff; }
.r2-av.logo { border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px var(--hair); }
.r2-av.logo img { inset: 15%; width: 70%; height: 70%; object-fit: contain; border-radius: 3px; }
.r2-av.logo.sm { border-radius: 7px; } .r2-av.logo.lg, .r2-av.logo.face { border-radius: 14px; }
.r2-av.logo.lg img, .r2-av.logo.face img { inset: 18%; width: 64%; height: 64%; }
.r2-av.face { width: 64px; height: 64px; font-size: 24px; }

.toast.r2-toast, .toast.r2-fail { pointer-events: none; }  /* a passing message never takes a tap meant for the button under it */

/* the purpose mark: a small square and two or three words; never a pill */
.r2-pu { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; line-height: 1.3; color: var(--ink-2); white-space: nowrap; }
.r2-pu i { flex: none; width: 7px; height: 7px; border-radius: 2px; background: #cdbd93; }
.r2-pu.money { color: var(--pri); } .r2-pu.money i { background: var(--pri); }
.r2-pu.advice i { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.r2-pu.work i { background: var(--ink); }
.r2-pu.sm { font-size: 11px; font-weight: 500; }

/* list row: name and purpose, then firm and stage, then one plain line */
.r2-rt.r2-g { grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: baseline; }
.r2-g > b { grid-area: 1 / 1; } .r2-g > .r2-pu { grid-area: 1 / 2; justify-self: end; }
.r2-g > .r2-r2, .r2-g > .r2-next { grid-column: 1 / -1; }
.r2-r2 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; } .r2-r2 > .r2-sub { flex: 1; min-width: 0; }
.r2-card .r2-rt { gap: 1px; } .r2-card .r2-pu { margin-top: 3px; }

/* the person: who this is */
.r2-ph { align-items: flex-start; } .r2-ph > .r2-btn, .r2-ph > .r2-x, .r2-ph > .r2-back, .r2-ph > .r2-ic { margin-top: 15px; }
.r2-pht { padding-top: 6px; } .r2-pht p { display: block; } .r2-pht p > i { font-style: normal; color: var(--mute); }
.r2-firm { color: inherit; text-decoration: none; box-shadow: inset 0 -1px 0 #cfccc2; transition: color .15s, box-shadow .15s; }
.r2-firm svg { margin-left: 4px; color: var(--mute); vertical-align: -1px; }
.r2-firm:hover { color: var(--pri); box-shadow: inset 0 -1px 0 var(--pri); } .r2-firm:hover svg { color: var(--pri); }
.r2-ic { flex: none; display: flex; align-items: center; gap: 2px; height: 34px; }
.r2-icn { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--mute); transition: background .15s, color .15s; }
.r2-icn:hover { background: var(--sand); color: var(--ink); }
.r2-tel { margin-left: 2px; font-size: 12.5px; color: var(--mute); user-select: all; }

/* what they do; why we talk to them */
.r2-eye { margin: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--mute); }
.r2-do { margin-top: 22px; }
.r2-about { margin: 0; font: 400 17px/1.45 var(--serif, Georgia, serif); color: var(--ink); overflow-wrap: anywhere; }
.r2-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: baseline; margin: 12px 0 0; padding: 0; list-style: none; }
.r2-kv li { display: contents; } .r2-kv small { font-size: 11.5px; color: var(--mute); white-space: nowrap; } .r2-kv span { font-size: 13px; font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; }
.r2-addline { padding: 0; border: 0; background: none; font: 400 17px/1.45 var(--serif, Georgia, serif); color: var(--mute); cursor: pointer; text-align: left; box-shadow: inset 0 -1px 0 var(--hair); transition: color .15s, box-shadow .15s; }
.r2-addline:hover { color: var(--ink); box-shadow: inset 0 -1px 0 var(--ink-2); }
.r2-point { margin-top: 18px; padding: 15px 18px 16px; border-radius: 12px; background: #f6f4ee; }
.r2-point.money { background: var(--blue-soft, #eef1ff); } .r2-point.money .r2-eye { color: var(--pri); }
.r2-point.advice { background: #fff; box-shadow: inset 0 0 0 1px var(--hair); }
.r2-point.work { background: var(--ink); } .r2-point.work .r2-eye { color: rgba(255, 255, 255, .6); } .r2-point.work b, .r2-point.work > p:last-child { color: #fff; }
.r2-point b { display: block; font: 500 19px/1.3 var(--serif, Georgia, serif); color: var(--ink); }
.r2-point > p:last-child { margin: 5px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); overflow-wrap: anywhere; }
.r2-fill { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 12px 0 0; min-height: 20px; font-size: 12.5px; color: var(--ink-2); }
.r2-fill .dot.spin { width: 11px; height: 11px; flex: none; } .r2-fill .bad { color: var(--bad, #b3261e); }
.r2-do ~ .r2-track { margin-top: 24px; }
@media (min-width: 1281px) {  /* a wide panel: what they do beside why we talk to them, so the message stays in sight */
  .r2-intro { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 0 26px; align-items: start; margin-top: 22px; }
  .r2-intro > .r2-do { margin-top: 0; padding-top: 15px; } .r2-intro > .r2-point { margin-top: 0; }
  .r2-intro .r2-about { font-size: 16px; }
}

/* edit: the photo row and the menu for what we want */
.r2-photo { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .r2-photo small { font-size: 12px; color: var(--mute); }
.r2-photo label.r2-btn { display: inline-flex; cursor: pointer; }

@media (max-width: 1180px) {  /* less room beside the name: the quiet links go under it */
  .r2-ph { flex-wrap: wrap; } .r2-ph > .r2-ic { order: 9; flex-basis: 100%; margin: -4px 0 -6px 61px; }
}
@media (min-width: 821px) and (max-width: 1180px) {  /* a narrow list: the purpose gets a line of its own under the name */
  .r2-g > b { grid-column: 1 / -1; } .r2-g > .r2-pu { grid-area: 2 / 1 / auto / -1; justify-self: start; margin: 1px 0; }
  .r2-av.face { width: 52px; height: 52px; font-size: 20px; } .r2-ph > .r2-btn, .r2-ph > .r2-x { margin-top: 9px; } .r2-pht { padding-top: 2px; }
}
@media (max-width: 820px) {
  body.rel2:has(.r2-main.open) .nav-toggle { display: none; }  /* the menu button sat on top of Back while a person is open */
  .r2-pht { padding-top: 0; } .r2-pht p { font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .r2-av.face { width: 44px; height: 44px; font-size: 17px; } .r2-av.logo.face { border-radius: 11px; }
  .r2-ph > .r2-btn, .r2-ph > .r2-back { margin-top: 5px; }
  .r2-ph > .r2-ic { margin: -2px 0 -4px 26px; } .r2-icn { width: 38px; height: 34px; }
  .r2-about, .r2-addline { font-size: 16px; } .r2-point { padding: 14px 16px 15px; } .r2-do { margin-top: 18px; }
}

/* Adding one person by hand: a plain form, labelled boxes, the name first */
.r2-pc.form { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 0; border-radius: 0; box-shadow: none; animation: none; }
.r2-pc.form + .r2-pc { margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--hair); }
.r2-pc.form.failed { box-shadow: none; } .r2-pc.form.failed .r2-pn { box-shadow: inset 0 0 0 1.5px var(--bad, #b3261e); }
.r2-fh { display: flex; align-items: center; gap: 12px; min-width: 0; }
.r2-fh > .r2-av { flex: none; width: 44px; height: 44px; font-size: 16px; transition: background .2s, color .2s; }
.r2-f2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.r2-fl { display: grid; gap: 5px; min-width: 0; cursor: text; }
.r2-fl > span { font-size: 12px; font-weight: 600; color: var(--mute); }
.r2-new .r2-pc.form input.r2-pn { flex: 1; height: 46px; padding: 0 14px; border-radius: 11px; background: #fff; box-shadow: inset 0 0 0 1px var(--hair); font-size: 20px; }
.r2-new .r2-pc.form input.r2-pi { width: 100%; box-sizing: border-box; height: 38px; padding: 0 12px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px var(--hair); font-size: 14px; color: var(--ink); }
.r2-new .r2-pc.form input:is(.r2-pn, .r2-pi):hover { box-shadow: inset 0 0 0 1px #cfccc2; }
.r2-new .r2-pc.form input:is(.r2-pn, .r2-pi):focus { box-shadow: inset 0 0 0 1px var(--ink-2); }
.r2-new .r2-pc.form.bad input.r2-pn { box-shadow: inset 0 0 0 1.5px var(--bad, #b3261e); }
.r2-f2.r2-f3 { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.r2-f3 .r2-fl { cursor: default; }
.r2-f3 .r2-chip { width: 100%; box-sizing: border-box; height: 38px; padding: 0 10px 0 12px; border-radius: 9px; justify-content: space-between; font-size: 14px; }
.r2-f3 .r2-chip b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.r2-dup { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: -4px 0 0 56px; font-size: 13px; color: var(--mute); }
.r2-dup[hidden] { display: none; }
@media (max-width: 640px) {
  .r2-f2, .r2-f3 { grid-template-columns: minmax(0, 1fr); } .r2-f3 .r2-chip { height: 44px; font-size: 16px; }
  .r2-new .r2-pc.form input.r2-pi { height: 44px; font-size: 16px; } .r2-new .r2-pc.form input.r2-pn { height: 48px; }
  .r2-dup { margin-left: 0; }
}

/* the mail step: To, Cc and Subject, and the mailbox it goes from, before anything leaves */
.r2-mail { margin: 14px -26px 0; padding: 14px 26px; background: #fff; box-shadow: inset 0 1px 0 var(--hair); }
.r2-mail .r2-editb { flex-wrap: wrap; margin-top: 0; } .r2-mail .r2-editb small { min-width: 0; font-size: 12.5px; color: var(--mute); overflow-wrap: anywhere; } .r2-mail .r2-editb small.bad { color: var(--ink); font-weight: 600; }
@media (max-width: 1180px) { .r2-mail { margin: 14px -20px 0; padding: 14px 20px; } }
@media (max-width: 820px) {
  .r2-mail { margin: 14px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); } .r2-mail .r2-editb small { flex-basis: 100%; } .r2-mail .r2-editb .r2-grow { display: none; }
  .r2-mail .r2-btn { height: 40px; } .r2-mail .r2-btn.pri { flex: 1; height: 44px; font-size: 14.5px; }
  .r2-ic { height: auto; min-height: 34px; flex-wrap: wrap; } .r2-tel { overflow-wrap: anywhere; }
}

/* your own order: the row being dragged lifts off the list, and a line shows where it will land */
.r2-row { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.r2-row.drag { z-index: 3; background: #fff; box-shadow: 0 0 0 1px var(--hair), 0 14px 30px -14px rgba(20, 24, 40, .45); transition: none; cursor: grabbing; }
.r2-list.sorting .r2-row:not(.drag) { transition: none; } .r2-list.sorting { cursor: grabbing; }
.r2-row.over-a { box-shadow: inset 0 2px 0 var(--pri); } .r2-row.over-b { box-shadow: inset 0 -2px 0 var(--pri); }

/* Today's targets: a second row in the today card, one cell per target; a click shows the people it counts */
.r2-today { overflow: hidden; } .r2-today .r2-fcell:last-child { border-radius: 0; }
.r2-goals { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); box-shadow: inset 0 1px 0 var(--hair); }
.r2-goals .r2-fcell { padding-top: 11px; padding-bottom: 12px; } .r2-goals .r2-fcell::before { content: none; }
.r2-goals .r2-fcell b { font-size: 20px; } .r2-goals .r2-fcell b i { font-style: normal; color: var(--mute); }
.r2-goals .r2-fcell.zero b i { color: #c3c0b6; } .r2-goals .r2-fcell.hit b { color: var(--good, #1f7a4f); }
@media (max-width: 820px) {  /* phone: investors on the left, then a row for each market */
  .r2-goals { grid-template-columns: repeat(3, minmax(0, 1fr)); } .r2-goals .r2-fcell:first-child { grid-row: span 2; align-content: center; }
  .r2-goals .r2-fcell { padding-top: 9px; padding-bottom: 9px; } .r2-goals .r2-fcell small { white-space: nowrap; }
}