/* The CRM page: the lists. Tables (organizations, people, prospects, documents), Spam, Clients and parked
   (js/lists.js), Research (js/research.js) and Reports (js/reports.js). Loaded after board.css, before file.css.
   Use the tokens of ws.css and app.css; never a raw color.
   Tables (SPEC): a header of 12/16 muted words, rows of 48px on hairlines, a quiet hover, numbers at the right.
   Dates are Space Grotesk with tabular figures; IBM Plex Mono only for money and figures in a table and for commands. */

/* ===== A table: organizations, people, prospects, lost work, the rest of Spam, and the tables of a file ===== */
/* A table on the page is a white card. In a card or a sheet it is plain. */
.table { margin-top: 16px; padding: 0 16px; overflow: clip; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--raised); }
.card .table, .sheet .table { overflow: visible; padding: 0; border: 0; border-radius: 0; background: none; }
.table > .trow:last-child { border-bottom: 0; }
.table > a.trow { margin: 0 -16px; padding-right: 16px; padding-left: 16px; }
a.trow:hover { background: var(--hover); }
a.trow:focus-visible { outline-offset: -2px; border-radius: 0; }
.thead, .trow { display: grid; column-gap: 16px; }
.thead { align-items: center; min-height: 36px; border-bottom: 1px solid var(--line); }
.thead span { overflow: hidden; color: var(--muted); font: 500 var(--t-xs) var(--sans); text-overflow: ellipsis; white-space: nowrap; }
.thead .icon { vertical-align: -1px; }
.trow { align-items: center; min-height: 48px; padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--ink); font: 400 var(--t-md) var(--sans); text-decoration: none; }
.trow > span, .trow > b { min-width: 0; overflow-wrap: anywhere; }
.trow b { font-weight: 500; }
.trow .label, .cell-due { font-variant-numeric: tabular-nums; }
.trow .mono { color: var(--ink-2); font-size: 13px; letter-spacing: 0; }
.clip { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-due, .cell-due .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-name { font: 500 var(--t-md) var(--sans); }
.cell-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.cell-owner { display: flex; align-items: center; gap: 8px; }
.cell-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cell-person b { font: 500 var(--t-md) var(--sans); }
.cell-msg, .cell-why { color: var(--muted); }
.cell-why { font-size: 13px; }
.cell-msg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step-take { font-weight: 500; }
.cell-fit { font-variant-numeric: tabular-nums; }
/* A list under its tabs and filter: the filter row sits close to the tabs, the table close to the filter. */
.page-list .filter-row { margin-top: 16px; }
.seg.seg-filter { flex-wrap: nowrap; max-width: 100%; }
/* An empty list in the main column is a quiet card, not a blank page. */
.cols-main > .empty, .stack > .empty, .page-list > .empty-list { max-width: none; margin: 16px 0 0; padding: 40px 24px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--raised); }
.cols-main > .empty:first-child, .stack > .empty:first-child { margin-top: 0; }
.empty > * { max-width: 460px; }
/* The columns of each table */
/* Organizations and the people of a file: the table is the grid and each row lines up on it (subgrid). A column of
   short words (the status, the need, the date) takes the width of its words; the name and the step share the rest. A
   name wraps at a space. A cell cuts with an ellipsis, its words in a title, only when the screen is too narrow. */
@media (min-width: 760px) {
  .t-orgs, .t-fpeople { display: grid; column-gap: 14px; }
  .t-orgs > .thead, .t-orgs > .trow, .t-fpeople > .thead, .t-fpeople > .trow { grid-column: 1 / -1; grid-template-columns: subgrid; column-gap: inherit; }
  .t-orgs { grid-template-columns: minmax(120px, 1.6fr) minmax(112px, max-content) minmax(0, max-content) max-content minmax(120px, 1.2fr) minmax(88px, max-content) max-content; }
  .t-orgs-touch { grid-template-columns: minmax(120px, 1.6fr) minmax(112px, max-content) minmax(0, max-content) max-content minmax(120px, 1.2fr) minmax(88px, max-content) max-content max-content; }
  .t-fpeople { column-gap: 12px; grid-template-columns: minmax(180px, 1fr) max-content max-content; }
}
@media (min-width: 760px) and (max-width: 1099px) {
  /* With "Last talked", the need gives its room to the name and the step (below). */
  .t-orgs-touch { grid-template-columns: minmax(120px, 1.6fr) minmax(112px, max-content) max-content minmax(120px, 1.2fr) minmax(88px, max-content) max-content max-content; }
}
.t-fpeople .cell-who { min-width: 0; }
.t-fpeople .cell-mail { overflow: hidden; overflow-wrap: normal; text-overflow: ellipsis; white-space: nowrap; }
.cell-need .tag { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.t-people .thead, .t-people .trow { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr) minmax(0, 1.3fr) 136px 112px minmax(0, 1.4fr); }
.t-prospects .thead, .t-prospects .trow { grid-template-columns: minmax(0, 1.8fr) 96px minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr) 72px; }
.t-spam .thead, .t-spam .trow { grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr) minmax(0, 1.3fr) 104px; }
.t-lost .thead, .t-lost .trow { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 120px 48px; }
.t-lost .trow { padding: 10px 0; }
.t-fpeople, .t-docs { margin-top: 2px; }
.t-docs .thead, .t-docs .trow { grid-template-columns: minmax(0, 420fr) minmax(0, 180fr) minmax(0, 190fr) 50px; column-gap: 12px; }
/* A document in a table (the file) */
.docname { display: block; color: var(--ink); font: 500 var(--t-sm) var(--mono); overflow-wrap: anywhere; }
.is-scanning .docname { font-weight: 400; color: var(--muted); }
.docstate { display: flex; align-items: center; gap: 10px; }
.progress { display: block; width: 180px; height: 3px; margin-top: 12px; border-radius: 2px; background: var(--line); overflow: hidden; }
.progress i { display: block; width: 62%; height: 100%; background: var(--brand); }
.doc-add { margin-top: 22px; gap: 14px; }
@media (prefers-reduced-motion: no-preference) {
  a.trow { transition: background-color .12s var(--ease); }
}
/* A touch screen: the text links of the lists get a 44px tap height. A link inside a sentence keeps its line: padding
   on an inline link makes the tap area taller without moving the text. */
@media (pointer: coarse) {
  .page-list .more-row .link, .line-plain .link, .how-note .link, .rfpcard .actions .link, .rfp-row .link, .docrow-file .link, .card-top .link-ext, .shelf-list .park-name a,
  .rp-shelf .link, .page-list .shelf-lost { display: inline-flex; align-items: center; min-height: 44px; }
  .card-note a.link { padding: 14px 0; }
}
@media (max-width: 1099px) {
  .thead, .trow, .t-orgs, .t-fpeople { column-gap: 12px; }
  /* With "Last talked", the need gives its room to the name and the step. */
  .t-orgs-touch .cell-need { display: none; }
  .t-people .thead, .t-people .trow { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.3fr) 128px 116px minmax(0, 1.2fr); }
  .t-people .cell-title { display: none; }
}
@media (max-width: 759px) {
  .thead { display: none; }
  .table { margin-top: 12px; }
  /* The filter scrolls; a faded edge says so (core.js sets more-left and more-right; the mask is in app.css). */
  .seg.seg-filter { overflow-x: auto; scrollbar-width: none; }
  /* The head of a list on a phone: Export and Import are 44px icon buttons with the same edge, then the one solid
     button, on one row. */
  .btn-ic-phone { width: 44px; padding: 0; }
  .btn-ic-phone.btn-ghost { border-color: var(--edge); background: var(--raised); color: var(--ink); }
  .page-list .empty-action .btn { height: 44px; }
  .btn-ic-phone .btn-text { display: none; }
  .btn-ic-phone .icon { margin: 0; }
  .page-list .head-right .btn { height: 44px; }
  .seg.seg-filter::-webkit-scrollbar { display: none; }
  .trow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 0; }
  .trow > span:empty { display: none; }
  /* Organizations: the name and the status; the next step; then the owner, the date, the need and the fit. */
  .t-orgs .trow > .cell-name { order: 1; flex: 1 1 0; }
  .t-orgs .trow > .cell-chips { order: 2; flex: none; }
  .t-orgs .trow > .cell-step { order: 3; flex: 0 0 100%; }
  .t-orgs .trow > .cell-owner { order: 4; }
  .t-orgs .trow > .cell-due { order: 5; }
  .t-orgs .trow > .cell-touch { order: 6; }
  .t-orgs .trow > .cell-need { order: 7; }
  .t-orgs .trow > .cell-need:not(:empty) { display: block; }
  .t-orgs .trow > .cell-fit { order: 8; margin-left: auto; }
  /* People: the name and the role; the title; the organization and the last reach; the email. */
  .t-people .trow { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "person role" "title title" "org reached" "mail mail"; gap: 2px 12px; }
  .t-people .cell-person { grid-area: person; }
  .t-people .cell-role { grid-area: role; }
  .t-people .cell-title { grid-area: title; display: block; padding-left: 38px; font-size: 13px; }
  .t-people .cell-org { grid-area: org; padding-left: 38px; color: var(--ink-2); font-size: 13px; }
  .t-people .cell-reached { grid-area: reached; text-align: right; }
  .t-people .cell-mail { grid-area: mail; padding-left: 38px; font-size: 13px; }
  .t-spam .trow > b { flex: 1 1 100%; }
  .cell-msg { flex: 0 0 100%; }
  .t-spam .cell-why { flex: 1 1 0; }
  .t-lost .trow > span:first-child { flex: 1 1 100%; }
}

/* ===== Parked and lost: a filter of Organizations ===== */
.shelf-list { margin-top: 8px; }
.sec-row { display: flex; align-items: baseline; gap: 8px; margin-top: 24px; }
.sec-title { font: 600 var(--t-h3) var(--sans); }
.sec-gap { margin-top: 32px; }
.sec-note { margin-left: auto; }
.shelf-list .stack { margin-top: 12px; }
.shelf-list .none { padding: 12px 0 0; }
.parkcard { padding: 20px; }
.park-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.park-name { min-width: 0; }
.park-name h3 { font: 600 var(--t-h3) var(--sans); overflow-wrap: anywhere; }
.park-name h3 a { color: inherit; text-decoration: none; }
.park-name h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.park-when { display: flex; flex: none; align-items: center; gap: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.park-foot { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 16px; align-items: start; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.park-foot > div { display: grid; gap: 4px; font: 400 var(--t-md) var(--sans); }
.park-foot > .btn { align-self: center; }
.t-lost { margin-top: 12px; }
@media (max-width: 759px) {
  .park-top { flex-direction: column; gap: 8px; }
  .park-foot { grid-template-columns: minmax(0, 1fr); }
  .park-foot > .btn { justify-self: start; height: 44px; }
}

/* ===== Spam ===== */
/* The "may be real" card: one accent edge, the message, why it is here and why it may be real, two actions. */
.real { margin-top: 24px; padding: 20px 24px; border-color: var(--accent); }
.real + .real { margin-top: 16px; }
.real-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; }
.real h2 { margin-top: 8px; font: 600 18px/24px var(--sans); overflow-wrap: anywhere; }
.real-who { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; color: var(--muted); font: 400 var(--t-md) var(--sans); overflow-wrap: anywhere; }
.quote { position: relative; padding: 0 20px; font: 400 21px/31px var(--sans); white-space: pre-wrap; overflow-wrap: anywhere; }
.quote::before { content: ""; position: absolute; top: 5px; bottom: 5px; left: 0; width: 3px; background: var(--accent); }
.real .quote-m { margin-top: 16px; padding: 0 0 0 16px; font: 400 15px/23px var(--sans); }
.real .quote-m::before { top: 2px; bottom: 2px; width: 2px; border-radius: 1px; }
.real-why { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 16px; color: var(--muted); font: 400 var(--t-sm) var(--sans); }
.why { padding: 3px 8px; border-radius: var(--r-sm); background: var(--caution-soft); color: var(--caution); font: 500 var(--t-xs) var(--sans); }
.real .actions { margin-top: 20px; }
.page-list > .real + .table, .page-list > .page-head + .table { margin-top: 24px; }
.spam-note { display: flex; align-items: flex-start; gap: 8px; max-width: 760px; margin-top: 16px; color: var(--muted); font: 400 var(--t-sm) var(--sans); }
.spam-note .icon { margin-top: 2px; }
.empty + .spam-note { margin: 0 auto; }
@media (max-width: 759px) {
  .real { padding: 16px; }
  .real .btn { flex: 1 1 100%; height: 44px; }
}

/* ===== Clients ===== */
/* The whole card opens the file: a quiet edge and shadow on hover, no lift. */
.client { display: block; padding: 20px; color: var(--ink); cursor: pointer; }
.client:hover { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.client-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.client-name { min-width: 0; }
.client-top h2 { font: 600 var(--t-h3) var(--sans); overflow-wrap: anywhere; }
.client-top h2 a { color: inherit; text-decoration: none; }
.client-top .sub { margin-top: 4px; }
.client-state { display: flex; flex: none; align-items: center; gap: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.client .track-client { margin-top: 24px; }
/* Dates of a track in the lists: Space Grotesk with tabular figures, not mono. */
.track-client .mono, .track-rfp .mono { font: 400 var(--t-xs) var(--sans); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.client-foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.client-foot > div { display: grid; gap: 2px; align-content: start; }
.client-foot b { font: 500 var(--t-md) var(--sans); }
.client-foot .label:first-child { margin-bottom: 4px; }
.client-foot .sub { margin-top: 0; font-variant-numeric: tabular-nums; }
.client-new { margin-top: 12px; font: 400 var(--t-md) var(--sans); }
.client-new .link, .client-req { font-weight: 500; }
.client-req { margin-top: 4px; font-size: 13px; }
.money2 { display: grid; grid-template-columns: 1fr 1fr; }
.money2 > div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.money2 .figure-l { margin-top: 6px; font-size: 24px; line-height: 30px; }
.money2 .sub { margin-top: 4px; }
.perm { margin-top: 14px; }
.perm + .perm { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.perm b { font: 500 var(--t-md) var(--sans); }
.perm .facts { margin-top: 8px; }
.perm .quiet { margin-top: 4px; font-size: 13px; }
@media (max-width: 759px) {
  .client { padding: 16px; }
  .client-top { flex-direction: column; gap: 8px; }
  /* The delivery track stays on a phone (file.css hides the track of a file there). */
  .client .track-client { display: grid; margin-top: 20px; }
  .client-foot { grid-template-columns: minmax(0, 1fr); }
}

/* ===== Research: prospects, RFPs, runs ===== */
.label-violet { color: var(--violet); }
.label-caution { color: var(--caution); }
.cols-research { margin-top: 24px; }
/* Prospects: below 1440px the table takes the full width and the side cards (Claude suggests, Run a new list) sit under
   it, side by side, so the six columns never squeeze. */
@media (max-width: 1439px) {
  .cols-prospects { display: block; }
  .cols-prospects > .cols-side { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; margin-top: 24px; }
}
.plist + .plist { margin-top: 32px; }
.plist-head { display: grid; gap: 4px; }
.plist-head h2 { font: 600 var(--t-h3) var(--sans); overflow-wrap: anywhere; }
.plist-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; }
.plist-meta .legend { font-size: 12px; }
.plist .table { margin-top: 12px; }
.fitcell { display: flex; align-items: center; gap: 10px; }
.fitcell .mono { width: 20px; text-align: right; }
.fitcell .meter { flex: none; width: 44px; height: 4px; margin: 0; }
.sys { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; }
.dot-none { visibility: hidden; }
p.sys { margin-top: 10px; font-size: 13px; }
.cell-app { font-size: 13px; overflow-wrap: anywhere; }
.hint-inferred { margin-top: 8px; color: var(--caution); font-size: 12px; }
.hint-inferred:empty { display: none; }
.chead { display: flex; gap: 12px; }
.chead h2, .card-h { font: 600 var(--t-h3) var(--sans); }
.chead h2 { margin-top: 2px; }
.chead + .lines { margin-top: 12px; }
.cmd { margin-top: 10px; padding: 12px 14px; border-radius: var(--r-md); background: var(--sunken); color: var(--ink); font: 400 12px/18px var(--mono); letter-spacing: 0; overflow-wrap: anywhere; }
.have { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.have b { display: block; font: 500 var(--t-md) var(--sans); }
.card-h + .line-plain { margin-top: 10px; font-size: 13px; }
.card-h + .lines { margin-top: 8px; }
/* An RFP: the one to decide has the accent edge and its dates at the side; one in work and a passed one are quiet. */
.rfpcard { padding: 20px 24px; }
.rfpcard h2 { margin-top: 6px; font: 600 var(--t-h3) var(--sans); overflow-wrap: anywhere; }
.rfpcard h2 a { color: inherit; text-decoration: none; }
.rfpcard h2 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rfpcard .sub { margin-top: 2px; }
.rfp-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; }
.rfp-row .link { font: 500 var(--t-md) var(--sans); }
.rfp-row + h2 { margin-top: 8px; }
.rfpcard.is-open { display: grid; grid-template-columns: minmax(0, 1fr) 200px; column-gap: 24px; border-color: var(--accent); }
.rfp-lines { display: grid; gap: 8px; margin-top: 14px; font: 400 var(--t-sm) var(--sans); }
.rfpcard .actions { margin-top: 18px; gap: 8px 12px; }
.rfpcard .actions .link { margin-left: 4px; font-weight: 500; }
/* The facts of an RFP to decide (Due, Fit, Budget): each label stays with its value; a date and "in 38 days" may sit on
   two lines, but neither one breaks inside. */
.rfp-side { display: grid; align-content: start; gap: 16px; padding-left: 24px; border-left: 1px solid var(--line); }
.rfp-fact, .rfp-val { min-width: 0; }
.rfp-due { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.rfp-due b { font: 600 var(--t-md) var(--sans); }
.rfp-due > * { white-space: nowrap; }
.rfp-side .meter { margin-top: 8px; }
.rfpcard.is-passed { background: transparent; }
.rfpcard.is-passed h2 { color: var(--ink-2); font-weight: 500; }
/* A find of the weekly research (This week): the card of an RFP to decide, with the line of why it matters, the reasons to
   act now with their sources, the systems, and the parts of its score at the side. */
.find-stack { margin-top: 12px; }
.find-text { margin-top: 10px; font: 400 var(--t-md) var(--sans); overflow-wrap: anywhere; }
.find-list { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; font: 400 var(--t-sm) var(--sans); }
.find-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.find-list .icon { flex: none; align-self: center; color: var(--good); }
.find-list .link-ext { font-size: 12px; }
.find-sys { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 12px; font: 400 var(--t-sm) var(--sans); }
.find-sys-part { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.find-people { margin-top: 14px; }
.find-people-list { display: grid; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; font: 400 var(--t-sm) var(--sans); }
.find-people-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.find-people-list p { margin: 0; overflow-wrap: anywhere; }
.find-reach { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.find-reach span { display: inline-flex; align-items: center; gap: 6px; }
.find-reach .icon { flex: none; color: var(--ink-2); }
.find-people-list .link-ext { font-size: 12px; }
.find-open { margin-top: 12px; color: var(--ink-2); font: 400 var(--t-sm) var(--sans); }
.find-parts { display: grid; gap: 6px; margin-top: 8px; }
.find-part { display: flex; justify-content: space-between; gap: 12px; font: 400 13px/18px var(--sans); }
.find-part .mono { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.line-check.is-no .icon, .line-check.is-no { color: var(--late); }
.line-check.is-no span { color: var(--ink); }
.line-check.is-off .icon { color: var(--muted); }
/* What the scan keeps: three conditions that all hold, so a checked list, not numbered steps. */
.checks-list { display: grid; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.checks-list li { display: flex; align-items: flex-start; gap: 10px; font: 400 var(--t-md) var(--sans); }
.checks-list .icon { margin-top: 3px; color: var(--good); }
.how-note { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font: 400 var(--t-sm) var(--sans); }
.how-note .link { font-weight: 500; }
.dot-on, .dot-off { flex: none; width: 6px; height: 6px; margin-right: 2px; border-radius: 50%; background: var(--good); }
.dot-off { background: var(--muted); }
.t-runs { margin-top: 0; }
.t-runs .thead, .t-runs .trow { grid-template-columns: 132px 160px minmax(0, 1fr) 128px; }
.t-runs .trow b { display: flex; align-items: baseline; gap: 10px; font: 500 var(--t-md) var(--sans); }
.run-cmd { color: var(--ink-2); font: 400 12px/16px var(--mono); }
.t-runs .sub .link { margin-left: 6px; font-weight: 500; }
.t-runs .cell-owner { font-size: 13px; }
.maydo { display: grid; gap: 10px; margin-top: 16px; font: 400 var(--t-md) var(--sans); }
.maydo-tight { margin-top: 8px; }
.maydo + .card-note { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.card-note .link { font-weight: 500; }
.card-note-line { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
/* One RFP: the file layout, with its actions on a phone too. */
.page-rfp .file-head { align-items: flex-start; justify-content: space-between; }
.page-rfp .file-sub { font-size: 15px; line-height: 22px; }
.page-rfp .track-rfp { margin-top: 32px; }
.rfp-cols { margin-top: 32px; }
.rfp-cols .sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rfp-cols .story h2 { font: 600 var(--t-h3) var(--sans); }
.t-asks { margin-top: 12px; border-top: 1px solid var(--line); }
.t-asks .trow { grid-template-columns: minmax(0, 1fr) auto; }
.t-asks .trow b { font: 500 var(--t-md) var(--sans); }
.tag-ans { padding: 3px 8px; font-size: 12px; }
.tag-yes { background: var(--good-soft); color: var(--good); }
.tag-unknown { background: var(--caution-soft); color: var(--caution); }
.tag-no { background: var(--late-soft); color: var(--late); }
.src { margin-top: 12px; color: var(--ink); overflow-wrap: anywhere; }
.src + .quiet { margin-top: 8px; font-size: 13px; }
.link-ext { display: inline-flex; align-items: center; gap: 4px; font: 500 var(--t-sm) var(--sans); }
.lines-tight { margin-top: 6px; }
.lines-tight .line { padding: 9px 0; }
.lines-tight .line:last-child { padding-bottom: 9px; }
.warnline.warn-2 { align-items: flex-start; margin-top: 18px; font-size: 14px; line-height: 19px; }
.warnline.warn-2 .icon { margin-top: 3px; }
.crow { display: flex; align-items: center; gap: 14px; margin-top: 24px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.crow > div { flex: 1; display: grid; gap: 3px; }
.crow b { font: 500 var(--t-md) var(--sans); }
.crow > div span { color: var(--muted); font: 400 var(--t-sm) var(--sans); }
.docrow-file { min-height: 56px; }
/* The import sheet starts with the file: the same 24px under the head as the other sheets. */
.sheet-body > .docrow-file:first-child { margin-top: 20px; }
.docrow-file .docrow-name b { display: block; color: var(--ink); }
.docrow-file .docrow-name b:not(.mono) { font: 500 14px/19px var(--sans); }
/* Import a prospect list */
.field-list { margin-top: 20px; }
.imp-sum { margin-top: 8px; font: 600 var(--t-h3) var(--sans); font-variant-numeric: tabular-nums; }
.imp-sum + .sheet-hint { margin-top: 4px; }
.t-imp { margin-top: 16px; }
.t-imp .thead, .t-imp .trow { grid-template-columns: minmax(0, 1fr) 126px 132px; }
.t-imp .trow { min-height: 44px; padding: 6px 0; }
.t-imp .trow b { font: 400 var(--t-md) var(--sans); }
.imp-rest { font-size: 13px; }
.tag-res { padding: 3px 8px; background: var(--tint); font-size: 12px; line-height: 16px; }
.tag-res.tag-amber { background: var(--caution-soft); }
.tag-blue { color: var(--accent); }
.info-2 { align-items: flex-start; margin-top: 16px; font-size: 13px; line-height: 20px; }
.info-2 .icon { margin-top: 3px; }
@media (max-width: 1099px) {
  .rfpcard.is-open { display: block; }
  .rfp-side { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; margin-top: 20px; padding: 16px 0 0; border: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 759px) {
  /* A prospect: the name and the fit; then each system with its name; then the app and the revenue. */
  .t-prospects .trow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "name fit" "ams cms" "app rev"; gap: 6px 12px; }
  .t-prospects .trow > .cell-name { grid-area: name; }
  .t-prospects .trow > .fitcell { grid-area: fit; justify-self: end; }
  .t-prospects .trow > .cell-sys:nth-child(3) { grid-area: ams; }
  .t-prospects .trow > .cell-sys:nth-child(4) { grid-area: cms; }
  .t-prospects .trow > .cell-app { grid-area: app; }
  .t-prospects .trow > .cell-rev { grid-area: rev; justify-self: start; text-align: left; }
  .t-prospects .trow > span:empty { display: block; }
  .sys-label, .cell-app .ph-only, .cell-rev .ph-only, .fitcell .ph-only { color: var(--muted); }
  .fitcell .mono { width: auto; }
  .t-runs .trow > span:nth-child(3) { flex: 1 1 100%; order: -1; }
  .rfpcard { padding: 16px; }
  /* A phone: one fact on each line, the label beside its value. */
  .rfp-side { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .rfp-fact { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: baseline; column-gap: 16px; }
  .rfp-fact .rfp-due { margin-top: 0; }
  .rfpcard .actions .btn { height: 44px; }
  .have .btn { height: 44px; }
  /* One RFP on a phone: file.css hides the crumbs, the actions and the track of a file; an RFP keeps all three. Its
     dates are a column: a dot and a line at the left, each stop with its date at the right. */
  .page-rfp .crumbs { display: flex; min-height: 44px; align-items: center; margin-top: 8px; }
  .page-rfp .file-head { flex-direction: column; align-items: stretch; gap: 16px; margin-top: 4px; }
  .page-rfp .rfp-actions { display: flex; }
  .page-rfp .rfp-actions .btn { flex: 1; height: 44px; }
  .page-rfp .track-rfp { display: grid; grid-template-columns: minmax(0, 1fr); margin: 24px 0 0; }
  .page-rfp .track-rfp li { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-height: 34px; padding: 0 0 0 26px; }
  .page-rfp .track-rfp li::before { top: 14px; right: auto; bottom: -4px; left: 4px; width: 2px; height: auto; }
  .page-rfp .track-rfp li::after { top: 4px; }
  .page-rfp .track-rfp li.is-now::after { top: 1px; }
  .page-rfp .track-rfp .mono { min-height: 18px; margin-top: 0; line-height: 18px; }
}

/* ===== Reports ===== */
.rp-now { margin-top: 24px; }
.rp-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 8px; padding: 20px 0; }
.rp-fig { min-width: 0; padding: 0 20px; border-left: 1px solid var(--line); }
.rp-fig:first-child { border-left: 0; }
.rp-fig-label { color: var(--ink-2); font: 500 var(--t-sm) var(--sans); }
.rp-num { margin-top: 6px; color: var(--ink); font: 600 24px/30px var(--sans); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.rp-names { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-cols { margin-top: 28px; }
/* A section of a report: the title, its count or dates, and the control that changes it at the right. */
.rp-sec { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 34px; margin-bottom: 12px; }
.cols-main > .rp-sec:not(:first-child) { margin-top: 32px; }
.rp-sec-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-variant-numeric: tabular-nums; }
.rp-sec-title { font: 600 var(--t-h3) var(--sans); }
.rp-rows { padding: 0 16px; overflow: clip; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--raised); }
.rp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 84px 24px; align-items: center; column-gap: 16px; min-height: 56px; margin: 0 -16px; padding: 10px 16px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.rp-row:last-child { border-bottom: 0; }
a.rp-row:hover { background: var(--hover); }
a.rp-row:focus-visible { outline-offset: -2px; border-radius: 0; }
.rp-row b { font: 500 var(--t-md) var(--sans); }
.rp-what .sub { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.rp-row .chip { justify-self: start; }
.rp-fee { color: var(--ink-2); text-align: right; }
.rp-row > .av, .rp-row > .av-none { justify-self: end; }
.rp-stuck { grid-template-columns: minmax(0, 1fr) auto auto; }
.rp-since { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-since.is-late { color: var(--late); }
.rp-since.is-caution { color: var(--caution); }
.rp-marks { display: flex; justify-content: flex-end; gap: 6px; }
.rp-cols .cols-main > .empty { margin: 0; padding: 28px 24px; }
/* A narrow main column (the rail, a phone): the avatar at the end of the first line, the status and the fee below. */
@container (max-width: 560px) {
  .rp-row, .rp-stuck { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .rp-row > .rp-what { grid-column: 1; grid-row: 1; }
  .rp-row > .av, .rp-row > .av-none, .rp-row > .rp-marks { grid-column: 2; grid-row: 1; }
  .rp-row > .chip, .rp-row > .rp-since { grid-column: 1; grid-row: 2; }
  .rp-row > .rp-fee { grid-column: 2; grid-row: 2; }
}
.bars { display: grid; gap: 10px; margin-top: 14px; }
.bar-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 28px; align-items: center; column-gap: 12px; font: 400 var(--t-sm) var(--sans); }
.bar-row-wide { grid-template-columns: 96px minmax(0, 1fr) 64px; }
.bar-row b { color: var(--ink-2); font: 500 var(--t-xs) var(--sans); font-variant-numeric: tabular-nums; text-align: right; }
.bar { height: 6px; border-radius: 3px; background: var(--tint); }
.bar i { display: block; min-width: 2px; height: 6px; border-radius: 3px; background: var(--s-new); }
.bar i.is-zero { min-width: 0; }
.bar .bar-contacted { background: var(--s-contacted); }
.bar .bar-call-booked { background: var(--s-call-booked); }
.bar .bar-proposal { background: var(--s-proposal); }
.bar .bar-won { background: var(--s-won); }
.rp-shelf { display: flex; flex-wrap: wrap; gap: 4px 16px; font-variant-numeric: tabular-nums; }
.rp-shelf > span { margin-right: auto; }
.rp-next { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; color: var(--ink); text-decoration: none; }
.rp-next .label { font-variant-numeric: tabular-nums; white-space: nowrap; }
a.rp-next:hover b { text-decoration: underline; text-underline-offset: 3px; }
/* A narrow side column: the date goes under the step, the avatar stays at the end, and the status is left out. */
.cols-side { container-type: inline-size; }
@container (max-width: 420px) {
  .rp-next { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 4px; }
  .rp-next > .chip { display: none; }
  .rp-next > .label { grid-column: 1; grid-row: 2; }
  .rp-next > .av, .rp-next > .av-none { grid-column: 2; grid-row: 1 / span 2; }
}
.rp-lost { justify-content: space-between; align-items: flex-start; }
.rp-count { color: var(--ink-2); font: 500 var(--t-sm) var(--sans); font-variant-numeric: tabular-nums; }
/* Where work comes from: a real table, in a card. */
.rp-card { padding: 0 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--raised); }
.rp-table { width: 100%; border-collapse: collapse; }
.rp-table th, .rp-table td { padding: 12px 0; border-bottom: 1px solid var(--line); font-weight: 400; text-align: left; vertical-align: middle; }
.rp-table thead th { padding: 10px 0; color: var(--muted); font: 500 var(--t-xs) var(--sans); white-space: nowrap; }
.rp-table .num-col, .rp-table td { width: 88px; text-align: right; }
.rp-table td.mono { color: var(--ink); font-size: 13px; letter-spacing: 0; }
.rp-table td.mono.quiet { color: var(--muted); }
.rp-table tbody th b, .rp-table tfoot th b { display: block; font: 500 var(--t-md) var(--sans); }
.rp-table tbody th .sub { padding-right: 16px; }
.rp-table tfoot th, .rp-table tfoot td { border-bottom: 0; }
/* The three figures of Right now stay side by side down to the phone. */
@media (max-width: 1099px) {
  .rp-fig { padding: 0 16px; }
}
@media (max-width: 759px) {
  .rp-figs { grid-template-columns: minmax(0, 1fr); padding: 4px 0; }
  .rp-fig { padding: 14px 16px; border-left: 0; border-top: 1px solid var(--line); }
  .rp-fig:first-child { border-top: 0; }
  /* Each source is a block with its four numbers named, not a row of initials. */
  .rp-table thead { display: none; }
  .rp-table tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 8px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .rp-table tfoot tr { border-bottom: 0; }
  .rp-table th[scope="row"] { grid-column: 1 / -1; padding: 0; border: 0; }
  .rp-table td { display: block; width: auto; padding: 0; border: 0; text-align: left; }
  .rp-table td::before { content: attr(data-label); display: block; color: var(--muted); font: 500 var(--t-xs) var(--sans); }
}