/* The People page (/crm). Martin's list of everyone who signed up, with their
   email. The boss only; see src/accounts-do.js crm().

   MARTIN'S CALL, 2026-08-20: this page leaves the app's look behind. No neon,
   no glow, no brand pink. It is a plain dark dashboard he reads on a laptop,
   so it is built for reading: neutral slate, one blue for the thing you press,
   and green / amber / red kept for done, chase-this and broken. Everything
   else is white numbers and grey labels.

   It is the ONLY page that does this. Every colour below is written here, on
   purpose, so nothing in style.css leaks a glow into it. */

/* The tokens sit on both the page and the body: body.crm-wide paints the
   ground with --d-bg, and until round twelve caught it (2026-08-20) that
   variable was declared on .crm-page only, so the rule below resolved to
   nothing and the ground was never #0F1115 at all. It had been the app's own
   dark blue the whole time, which looked close enough to hide it. The moment
   the app's ground went pure black the page went with it. */
.crm-page, body.crm-wide {
  --d-bg:      #0F1115;
  --d-panel:   #171A21;
  --d-panel-2: #1C2029;
  --d-line:    #2A2F3A;
  --d-line-2:  #363C49;
  --d-text:    #E6E9EE;
  --d-text-2:  #9AA3B0;   /* 7.4 against the ground */
  --d-text-3:  #808A99;   /* 5.4, so the quiet lines are still readable */
  --d-blue:    #4C8DFF;   /* links and the focus ring, on dark */
  --d-blue-btn:#2F6FEB;   /* the button's own ground: white on it is 4.5 */
  --d-green:   #3FB950;   /* copied, done */
  --d-amber:   #D29922;   /* something to chase */
  --d-red:     #F85149;   /* refused, or broken */

  padding-bottom: 3.5rem;
  color: var(--d-text);
  font-family: var(--sans);
}

/* The app's ground is pure black since round twelve. This page is not. */
body.crm-wide {
  background: var(--d-bg);
  background-attachment: scroll;
}

/* ---- the top of the page ---- */

/* The way back leaves the dashboard for the app. On the subdomain that is a
   different host, so crm.js writes the address; this is only the look.
   44 px tall, because it is a thing to tap (tester, 2026-08-20). */
.crm-page .back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--d-text-2);
  text-decoration: none;
}
.crm-page .back:hover { color: var(--d-text); }

/* No glow on the mark here, and it is small: this is a tool, not the app. */
.crm-page .mark,
.crm-page .mark i {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #FFFFFF;
  text-shadow: none;
  margin: .1rem 0 1.3rem;
}

.crm-head { display: flex; flex-direction: column; gap: .1rem; margin-bottom: 1.1rem; }
.crm-head h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 650;
  letter-spacing: -.01em;
  color: #FFFFFF;
}
.crm-lede { margin: 0; font-size: .86rem; color: var(--d-text-2); }

.crm-wait {
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--d-text-3);
  text-align: center;
  padding: 3rem 0;
  margin: 0;
}

/* ---- refused, and could not load ---- */

.crm-no { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem 0 0; }
.crm-no-line {
  margin: 0;
  font-size: .9rem;
  line-height: 1.7;
  color: var(--d-red);
  text-align: center;
  border: 1px solid rgba(248,81,73,.35);
  background: rgba(248,81,73,.06);
  border-radius: 8px;
  padding: 1.3rem .9rem;
}

/* ---- the four counts ---- */

.crm-body { display: flex; flex-direction: column; gap: .7rem; }

.crm-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.crm-tile {
  border: 1px solid var(--d-line);
  border-radius: 8px;
  background: var(--d-panel);
  padding: .8rem .85rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.crm-tile .k {
  order: 1;
  font-size: .74rem;
  color: var(--d-text-2);
}
.crm-tile .v {
  order: 2;
  font-family: var(--mono);
  font-size: 1.5rem;
  line-height: 1.1;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
}
/* A zero is a zero, not an alarm: it goes quiet rather than coloured. */
.crm-tile .v.zero { color: var(--d-text-3); }
.crm-tile.coins .v { color: #FFFFFF; }

.crm-foot {
  margin: 0 0 .3rem;
  font-size: .74rem;
  line-height: 1.6;
  color: var(--d-text-3);
}

/* how many still owe an email: amber, because it is a thing to chase */
.crm-owed {
  margin: 0;
  font-size: .8rem;
  line-height: 1.6;
  color: var(--d-amber);
  border: 1px solid rgba(210,153,34,.3);
  border-left: 3px solid var(--d-amber);
  background: rgba(210,153,34,.08);
  border-radius: 6px;
  padding: .6rem .8rem;
}

/* ---- the two controls ---- */

.crm-page .crm-search {
  min-height: 44px;
  width: 100%;
  background: var(--d-panel);
  border: 1px solid var(--d-line-2);
  border-radius: 8px;
  color: var(--d-text);
  font-family: var(--sans);
  font-size: .9rem;
  padding: 0 .8rem;
  box-shadow: none;
}
.crm-page .crm-search::placeholder { color: var(--d-text-3); }
.crm-page .crm-search:focus {
  outline: none;
  border-color: var(--d-blue);
  box-shadow: 0 0 0 2px rgba(76,141,255,.25);
}

.crm-page .crm-copy {
  min-height: 44px;
  padding: 0 1rem;
  border-radius: 8px;
  border: 1px solid var(--d-blue-btn);
  background: var(--d-blue-btn);
  color: #FFFFFF;
  font-family: var(--sans);
  font-size: .88rem;
  font-weight: 550;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
}
.crm-page .crm-copy:hover:not(:disabled) { background: #1F5FDB; border-color: #1F5FDB; }
.crm-page .crm-copy:disabled {
  background: var(--d-panel-2);
  border-color: var(--d-line-2);
  color: var(--d-text-3);
  opacity: 1;
}
.crm-page .crm-copy.done {
  background: rgba(63,185,80,.12);
  border-color: rgba(63,185,80,.5);
  color: var(--d-green);
}

/* The box shown only when the browser refuses the clipboard. Selectable, and
   never taller than a few lines (tester, 2026-08-20). */
.crm-page .crm-fallback {
  font-family: var(--mono);
  font-size: .76rem;
  line-height: 1.5;
  resize: vertical;
  min-height: 5rem;
  background: var(--d-panel);
  border: 1px solid var(--d-line-2);
  border-radius: 8px;
  color: var(--d-text-2);
  padding: .6rem .7rem;
  box-shadow: none;
}

/* ---- the people, on a phone: one card each ---- */

.crm-list { display: flex; flex-direction: column; gap: .55rem; }

.crm-card {
  border: 1px solid var(--d-line);
  border-radius: 8px;
  background: var(--d-panel);
  padding: .75rem .85rem;
  display: flex;
  flex-direction: column;
}
.crm-card .top { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.crm-card .nm { font-size: .95rem; font-weight: 600; color: #FFFFFF; word-break: break-word; }
/* Their permanent number, which is also their invite code. Quiet, and its own
   colour so it never reads as part of the name. */
.crm-card .idtag,
.crm-row .idtag {
  font-family: var(--mono);
  font-size: .76rem;
  color: var(--d-text-3);
  margin-left: .4rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.crm-card .em {
  display: block;
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--d-text-2);
  word-break: break-all;      /* a long address wraps instead of pushing the page sideways */
  line-height: 1.5;
  margin: .3rem 0 .5rem;
}
.crm-card .em.none,
.crm-row .em.none { color: var(--d-amber); }
.crm-card .fx {
  display: flex;
  flex-wrap: wrap;
  gap: .1rem .7rem;
  font-family: var(--mono);
  font-size: .74rem;
  color: var(--d-text-3);
  font-variant-numeric: tabular-nums;
}
.crm-card .fx b { color: var(--d-text-2); font-weight: 500; }

/* The level, same pill on the card and in the table. */
.crm-lvl {
  display: inline-block;
  min-width: 2.5rem;
  text-align: center;
  font-family: var(--mono);
  font-size: .74rem;
  padding: .12rem .4rem;
  border-radius: 4px;
  background: var(--d-panel-2);
  border: 1px solid var(--d-line-2);
  color: var(--d-text-2);
  font-variant-numeric: tabular-nums;
}

/* ---- the people, on a laptop: a table ---- */

.crm-scroll {
  border: 1px solid var(--d-line);
  border-radius: 8px;
  overflow-x: auto;          /* a narrow window scrolls the table, not the page */
}
.crm-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.crm-table thead th {
  text-align: left;
  font-size: .74rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--d-text-2);
  font-weight: 600;
  padding: .6rem .7rem;
  background: var(--d-panel);
  border-bottom: 1px solid var(--d-line-2);
  white-space: nowrap;
}
.crm-table tbody td { padding: .65rem .7rem; border-bottom: 1px solid var(--d-line); vertical-align: middle; }
.crm-table tbody tr:last-child td { border-bottom: 0; }
.crm-table tbody tr:hover { background: var(--d-panel); }
.crm-table th.r, .crm-table td.r { text-align: right; }
.crm-row .nm { font-weight: 600; color: #FFFFFF; word-break: break-word; }
.crm-row .em { font-family: var(--mono); font-size: .78rem; color: var(--d-text-2); word-break: break-all; }
.crm-row .n {
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--d-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.crm-row .dim { color: var(--d-text-3); white-space: nowrap; }
.crm-row .inv { color: var(--d-text-2); word-break: break-word; }

/* ---- nobody there ---- */

.crm-empty {
  margin: 0;
  font-size: .88rem;
  line-height: 1.8;
  color: var(--d-text-2);
  text-align: center;
  white-space: pre-line;
  border: 1px dashed var(--d-line-2);
  border-radius: 8px;
  padding: 2.2rem 1.2rem;
}

/* ---- laptop width (Martin's ask, 2026-08-20) -----------------------------
   Every other screen is held to a 27rem phone column past 520 px (style.css),
   because the app is meant to feel like a phone. This page is not the app: it
   is Martin's own list and he reads it on a laptop. So it opts out.
   `body` in front is what beats style.css's own `body .page` rule. */
@media (min-width: 520px) {
  body.crm-wide .page.crm-page { max-width: 72rem; margin-inline: auto; }
  /* the hairlines that draw the phone's edges have no place here */
  body.crm-wide::before, body.crm-wide::after { display: none; }
}

@media (min-width: 720px) {
  .crm-stats { grid-template-columns: repeat(4, 1fr); }
  .crm-tile .v { font-size: 1.7rem; }
  /* the search and the button share one row */
  .crm-row-controls { display: flex; gap: .6rem; align-items: stretch; }
  .crm-row-controls .crm-search { flex: 1 1 auto; }
  .crm-row-controls .crm-copy { flex: 0 0 auto; }
}

.crm-scroll { width: 100%; }

/* ---- the coin pot (2026-08-21) ----------------------------------------
   Martin's call: a fixed number of coins circling in the app, watched from
   here. Its own section under the counts, in the same plain dashboard look:
   four tiles, a line saying what they mean, and a fold holding where the
   coins have been. Nothing here borrows the app's neon. */
.crm-pot {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding-top: .5rem;
  border-top: 1px solid var(--d-line);
}
/* A real section heading, not a label. It has to sit clearly ABOVE the four
   tiles under it, or the pot reads as a fifth row of the counts above. The
   font and spacing are set here because style.css dresses bare headings for
   the app, and this page is not the app. */
/* `.crm-page` in front because style.css's `.page h2` (a class AND an element)
   beats a lone class, and it dresses headings for the APP: 11.5px, grey, its
   own border. On this page that made the section heading smaller than the
   labels under it (caught by looking at it, 2026-08-21). */
.crm-page .crm-h2 {
  margin: .3rem 0 0;
  padding: 0;
  border: 0;
  font: 600 1.05rem/1.2 var(--sans, system-ui, sans-serif);
  letter-spacing: 0;
  text-transform: none;
  color: #FFFFFF;
}
.crm-page .crm-h3 {
  margin: .6rem 0 0;
  padding: 0;
  border: 0;
  font: 600 .84rem/1.3 var(--sans, system-ui, sans-serif);
  letter-spacing: 0;
  color: var(--d-text-2);
}
/* The verdict. Green is the books adding up; red is not, and it is the one
   thing on this page that should never appear. */
.crm-tile .v.good { color: var(--d-green); }
.crm-tile .v.bad  { color: var(--d-red); }

/* The pot's numbers are NINE digits (100,000,000 with its commas), and at
   1.5rem they will not fit half a 390px phone: the tile grew past its column
   and pushed the whole page sideways (caught at 390 px, 2026-08-21). A grid
   item has to be told it may shrink, and the number has to be small enough to
   fit. Both come back at laptop width, where there is room. */
.crm-pot .crm-tile { min-width: 0; }
.crm-pot .crm-tile .v { font-size: 1.15rem; overflow-wrap: anywhere; }
@media (min-width: 480px) {
  .crm-pot .crm-tile .v { font-size: 1.5rem; }
}

.crm-fold { border: 1px solid var(--d-line); border-radius: 8px; background: var(--d-panel); }
.crm-fold > summary {
  cursor: pointer;
  padding: .7rem .8rem;
  font-size: .84rem;
  font-weight: 600;
  color: var(--d-text-2);
  list-style: none;
}
.crm-fold > summary::-webkit-details-marker { display: none; }
.crm-fold > summary::after { content: ' \203A'; display: inline-block; transform: rotate(90deg); margin-left: .3rem; }
.crm-fold[open] > summary::after { transform: rotate(-90deg); }
.crm-fold > summary:hover { color: var(--d-text); }
.crm-fold > *:not(summary) { margin-inline: .8rem; }
.crm-fold > *:last-child { margin-bottom: .8rem; }
/* The tail of this file sets .crm-scroll to width:100%. Inside the fold that
   100% is measured against the fold, and the .8rem margin above then pushes
   the table past its own rounded border, cutting the right-hand column off
   (caught by looking at it, 2026-08-21). Let it be as wide as what is left. */
.crm-fold .crm-scroll { width: auto; }

/* the numbers in the two pot tables line up under each other */
.crm-pot .crm-table td.r,
.crm-pot .crm-table .n {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.crm-pot .crm-table td.dim { color: var(--d-text-3); white-space: nowrap; }
.crm-pot .crm-table td.out { color: var(--d-amber); }
.crm-pot .crm-table td.in  { color: var(--d-green); }
.crm-pot .crm-table td.zero { color: var(--d-text-3); }