/* ---- one record's own page ------------------------------------------------
   The book answers "who do I work with"; this answers "what is going on with
   THIS one", which is the question somebody actually opens the tab holding.
   A person's name and a job's title are both buttons, everywhere they appear,
   for viewers too — opening a record is reading, and reading is the one thing
   a viewer account exists to do.

   `.cx-facts` renders a blank field as the words "not on file" rather than as
   an empty cell, for the reason the rest of this page keeps repeating: nothing
   to show has to print differently from nothing was checked. An empty row in a
   details table reads as "this loaded and there is nothing there", which is
   true — but it reads exactly the same as a row that failed to render. */
button.cx-open{display:block;width:100%;text-align:left;background:none;border:0;padding:0;cursor:pointer;
  font:500 14.5px/1.35 var(--sans);color:var(--text)}
button.cx-open:hover{color:var(--accent)}
button.cx-open:focus-visible{outline:2px solid var(--h4);outline-offset:3px;border-radius:5px}
.cx-back{background:none;border:1px solid var(--line);border-radius:99px;cursor:pointer;color:var(--muted);
  font:500 11.5px var(--mono);letter-spacing:.05em;padding:6px 14px;margin-bottom:16px}
.cx-back:hover{border-color:var(--accent-dim);color:var(--accent)}
.cx-rec{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:4px}
.cx-rec h3{margin:0;font:600 20px var(--sans);letter-spacing:-.015em;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.cx-rec .cx-sub{width:100%;font-size:12.5px;color:var(--faint);line-height:1.6;margin-top:2px}
.cx-pill{font:600 9.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);border-radius:99px;padding:3px 9px;white-space:nowrap}
.cx-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 18px;margin-top:18px}
.cx-facts>div{min-width:0}
.cx-facts .k{display:block;font:600 9.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);margin-bottom:4px}
.cx-facts .v{font-size:13.5px;color:var(--text);line-height:1.55;overflow-wrap:anywhere}
.cx-facts .v.none{color:var(--faint);font-style:italic}
.cx-recjobs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;align-items:start}
.cx-emptyjobs{font-size:13px;color:var(--muted);line-height:1.7}
.cx-email-summary,.cx-email-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.cx-email-summary .btn,.cx-email-head .btn{width:auto;flex:0 0 auto}
.cx-email-picker{display:flex;align-items:end;gap:9px;flex-wrap:wrap;margin-top:14px}
.cx-email-picker label{width:100%;font:600 9.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.cx-email-picker select{min-width:240px}.cx-email-picker .btn{width:auto}
.cx-email-compose{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.cx-email-compose textarea{resize:vertical;min-height:130px}
.cx-email-thread{padding:13px 0;border-top:1px solid var(--line)}
.cx-email-message{margin:10px 0;padding:10px 12px;border-left:2px solid var(--line);background:var(--bg);border-radius:0 8px 8px 0}
.cx-email-message span,.cx-email-message strong{display:block;font-size:11px;color:var(--faint)}
.cx-email-message p{margin:6px 0;white-space:pre-wrap;font-size:13px;line-height:1.55}
.cx-email-media{display:grid;gap:7px;margin:13px 0}.cx-email-media label{font-size:12px;color:var(--muted)}
@media(max-width:900px){.cx-lane{grid-template-columns:repeat(3,minmax(0,1fr))}.cx-forms{grid-template-columns:1fr}
  .cx-facts,.cx-recjobs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.cx-lane{grid-template-columns:repeat(2,minmax(0,1fr))}.cx-f{grid-template-columns:1fr}
  .cx-facts,.cx-recjobs{grid-template-columns:1fr}}