/* customer.54ten.com. Design tokens from the client portal handoff. */
:root{
  --ink:#0f172a; --ink2:#475467; --mut:#78828f;
  --line:#e5e9ed; --line2:#eff2f5; --bg:#f7f9fa; --panel:#fff;
  --acc:#2563a8; --accs:#eef4fb;
  --good:#15713c; --goods:#ecf6f0; --warn:#9a5316; --warns:#fdf3ea;
  --bad:#a1302a; --bads:#fbecea; --onacc:#fff;
  --font:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
@media(prefers-color-scheme:dark){:root{
  --ink:#e8eaed; --ink2:#b4bcc5; --mut:#8d959f;
  --line:#2c3136; --line2:#22262a; --bg:#131518; --panel:#1b1e21;
  --acc:#74a9e0; --accs:#18242f;
  --good:#61b384; --goods:#16241b; --warn:#d59f6b; --warns:#2a1f15;
  --bad:#e28379; --bads:#2b1917; --onacc:#101214;
}}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:13.5px/1.5 var(--font);
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;overflow:hidden}
a{color:var(--acc)}
button,input,select{font:inherit;color:inherit}

#app{display:flex;height:100%}

/* ------------------------------------------------------------------ sidebar */
/* 232px, and it stays 232px.
 *
 * A flex item defaults to min-width:auto, which refuses to shrink below its widest
 * unbreakable content. "MMCY Technology Group (TA-BPO)" is wider than this, so the
 * workshop's sidebar quietly grew to 289px while the portal's stayed at 232px, and the
 * mode switch inside it grew with it: one component, two sizes, depending on how long a
 * customer's name happened to be. */
#side{flex:0 0 232px;min-width:0;max-width:232px;background:var(--panel);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;height:100vh;position:sticky;top:0}
/* A long name wraps rather than widening the column it lives in. */
#side .who b,#side .who span,#side .nm{min-width:0;overflow-wrap:anywhere}
#side .top{padding:14px 14px 12px;border-bottom:1px solid var(--line);display:flex;
  flex-direction:column;gap:10px}
.who{display:flex;gap:9px;align-items:center}
.mark{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;
  background:var(--ink);color:var(--panel);font-size:11px;font-weight:700;flex:0 0 auto}
.who .nm{min-width:0;display:flex;flex-direction:column}
.who b{font-weight:640;font-size:13px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.who span{font-size:11.5px;color:var(--mut)}
.pick{display:flex;flex-direction:column;gap:3px}
.pick .cap{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--mut);font-weight:650}
.pick select{font-size:12.5px;font-weight:600;padding:7px 8px;border:1px solid var(--line);
  border-radius:7px;background:var(--panel);min-height:34px;width:100%}
.pick .note{font-size:11.5px;color:var(--mut)}
nav{flex:1;overflow-y:auto;padding:10px 8px;display:flex;flex-direction:column;gap:2px}
.grp{padding:2px 9px 6px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink);font-weight:700}
.grp.later{margin-top:14px;padding:13px 9px 6px;border-top:1px solid var(--line)}
.nv{appearance:none;border:0;background:none;color:var(--ink2);font:inherit;
  text-align:left;padding:7px 9px 7px 16px;border-radius:6px;cursor:pointer;display:flex;
  align-items:center;gap:8px;min-height:32px;border-left:2px solid transparent}
.nv:hover{background:var(--line2)}
.nv[aria-current=true]{background:var(--accs);color:var(--acc);font-weight:650;
  border-left-color:var(--acc)}
.nv em{font-style:normal;flex:1;min-width:0;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.nv s{text-decoration:none;flex:0 0 auto;font-size:11px;color:var(--mut)}
#foot{padding:10px 12px;border-top:1px solid var(--line);font-size:11.5px;
  color:var(--mut);display:flex;flex-direction:column;gap:2px}

/* ------------------------------------------------------------------- header */
#wrap{flex:1;min-width:0;overflow-y:auto;display:flex;flex-direction:column}
#hdr{background:var(--panel);border-bottom:1px solid var(--line);padding:0 22px;
  flex:0 0 auto}
#hdr .in{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;
  justify-content:space-between;padding:13px 0 12px}
#crumb{font-size:11.5px;color:var(--mut);display:none}
#crumb.on{display:block}
#crumb a{text-decoration:none;cursor:pointer}
#hdr h1{margin:0;font-size:17px;font-weight:650;letter-spacing:-.01em}
#hdr .sub{font-size:12.5px;color:var(--mut)}
#hdr .right{display:flex;gap:10px;align-items:center;color:var(--mut);font-size:12px}
main{flex:1;padding:18px 22px 48px;display:flex;flex-direction:column;gap:18px;
  max-width:1120px;width:100%}

/* -------------------------------------------------------------------- parts */
.cards{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(175px,1fr))}
.card{padding:14px 16px;border:1px solid var(--line);border-radius:9px;
  background:var(--panel)}
.card .k{font-size:12.5px;color:var(--mut);font-weight:600}
.card .v{font-size:23px;font-weight:660;letter-spacing:-.02em;line-height:1.15;
  margin:8px 0 2px}
.card .note{font-size:12.5px;color:var(--mut);margin-top:6px}
/* The line that says what to do about the number above it. A fact with no decision
   attached is the thing these cards were criticised for, so the decision is styled
   as part of the card rather than as another grey note nobody reads. */
.card .do{font-size:12.5px;margin-top:9px;padding-top:9px;
  border-top:1px solid var(--line);color:var(--ink);font-weight:550}

.tbl{background:var(--panel);border:1px solid var(--line);border-radius:9px;
  overflow:hidden}
.grouphead{background:var(--bg);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:9px 14px;display:flex;gap:10px;
  align-items:baseline}
.grouphead:first-child{border-top:0}
.grouphead b{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.grouphead span{color:var(--mut);font-size:12px}
.tr{display:grid;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line2);
  align-items:baseline}
.tr:last-child{border-bottom:0}
.th{font-size:10.5px;font-weight:650;text-transform:uppercase;letter-spacing:.05em;
  color:var(--mut);border-bottom:1px solid var(--line);background:var(--panel)}
.nm{font-weight:600}
.sub{color:var(--mut);font-size:11.5px}
.right-al{text-align:right}
.acts{display:flex;gap:6px;justify-content:flex-end}

.pill{display:inline-block;font-size:10.5px;font-weight:650;text-transform:uppercase;
  letter-spacing:.04em;padding:2px 7px;border-radius:5px;white-space:nowrap}
.pill.good{background:var(--goods);color:var(--good)}
.pill.warn{background:var(--warns);color:var(--warn)}
.pill.bad{background:var(--bads);color:var(--bad)}
.pill.acc{background:var(--accs);color:var(--acc)}
.pill.mut{background:var(--line2);color:var(--ink2)}

a.btn,button.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:36px;padding:0 14px;border:1px solid var(--line);background:var(--panel);
  color:var(--ink2);border-radius:7px;cursor:pointer;text-decoration:none;font-size:13px}
a.btn:hover,button.btn:hover{background:var(--line2)}
.btn.pri{background:var(--acc);border-color:var(--acc);color:var(--onacc);font-weight:600}
.btn.xs{min-height:28px;padding:0 9px;font-size:12px}
.notstarted{border:1px dashed var(--line);border-radius:9px;padding:24px;max-width:640px;
  background:var(--panel)}
.notstarted .lbl{font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--mut);margin-bottom:8px}
.notstarted p{margin:0 0 10px;color:var(--ink2)}
.notstarted .last{color:var(--mut);margin:0}
.clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden}
@media(max-width:1000px){#side{display:none}}
/* Sign Out in the header, for a screen too narrow for the side menu (Release 4, October 8, 2026). */
#hdr .so-narrow{display:none}
@media(max-width:1000px){#hdr .so-narrow{display:inline-flex}}

/* The opened section: status strip, its claims, then the document itself. */
.row-click{cursor:pointer}
.row-click:hover{background:var(--line2)}
.strip{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:flex-start;padding:11px 14px}
.sl-cap{font-size:10.5px;font-weight:600;color:var(--mut);margin-bottom:5px}
.sl-v{flex:0 0 auto}
.sl-f{flex:1 1 280px;min-width:0;font-size:13.5px;font-weight:600;padding-top:14px;
  color:var(--ink2)}
.sl-m{flex:0 0 auto;margin-left:auto;text-align:right;font-size:12px;color:var(--mut);
  padding-top:14px}

/* The document's own words, in the portal's type. One scale, whatever the source used. */
.doc{padding:6px 16px 22px}
.doc>*{max-width:680px}
.doc>table{max-width:none}
.doc h1,.doc h2{font-size:15px;font-weight:650;margin:18px 0 8px;color:var(--ink);
  padding-top:14px;border-top:1px solid var(--line2);text-transform:none}
.doc h1:first-child,.doc h2:first-child{margin-top:4px;padding-top:0;border-top:0}
.doc h3,.doc h4,.doc h5,.doc h6{font-size:13.5px;font-weight:650;margin:14px 0 4px;
  color:var(--ink);text-transform:none;letter-spacing:0}
.doc p{margin:8px 0;font-size:13.5px;line-height:1.55;color:var(--ink2);text-wrap:pretty}
.doc ul,.doc ol{display:flex;flex-direction:column;gap:6px;padding-left:18px;margin:8px 0}
.doc li{font-size:13.5px;line-height:1.55;color:var(--ink2);margin:0;text-wrap:pretty}
.doc li>p{margin:0}
.doc strong,.doc b{color:var(--ink);font-weight:650}
.doc table{width:100%;border-collapse:collapse;font-size:12.5px;margin:10px 0;
  table-layout:fixed}
.doc th,.doc td{padding:7px 9px;border:1px solid var(--line);vertical-align:top;
  text-align:left;color:var(--ink2);font-size:12.5px;font-weight:400;
  overflow-wrap:anywhere}
.doc th{background:var(--bg);font-weight:650;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--mut)}
.doc .callout{border-left:3px solid var(--acc);background:var(--bg);
  border-radius:0 8px 8px 0;padding:11px 14px;margin:12px 0;font-size:13px}
.doc .back,.doc .note{display:none}

/* Filtering is a control, not a headline. The cards above it are facts about the plan. */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:7px;overflow:hidden;
  background:var(--panel)}
.seg button{appearance:none;border:0;background:none;padding:7px 12px;min-height:32px;
  font-size:12.5px;color:var(--ink2);cursor:pointer;border-right:1px solid var(--line)}
.seg button:last-child{border-right:0}
.seg button:hover{background:var(--line2)}
.seg button[aria-pressed=true]{background:var(--accs);color:var(--acc);font-weight:650}

/* The ownership line, drawn across the ladder where our work ends and theirs begins. */
.linerow{background:var(--accs);border-top:1px solid var(--acc);
  border-bottom:1px solid var(--acc);padding:9px 14px}
.linerow b{color:var(--acc);font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;margin-right:9px}
.linerow span{color:var(--ink2);font-size:12px}

/* Targets you can type into. The value is the control, so it reads as a number first
   and an input second. */
.tin{width:100%;max-width:110px;padding:5px 8px;border:1px solid var(--line);
  border-radius:6px;background:var(--bg);font:inherit;font-weight:600;min-height:30px}
.tin:focus{outline:none;border-color:var(--acc);background:var(--panel)}
.tin.typed{border-color:var(--acc);background:var(--accs)}
.tin.big{max-width:140px;font-size:19px;font-weight:660;letter-spacing:-.02em;
  padding:4px 8px;min-height:34px}
.saverow{display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:12px 14px}
.saverow .sub{flex:1 1 280px}

/* ---- Component A: the parameters ribbon -------------------------------------
   A dense row of the handful of numbers a client is allowed to set, kept at the top of
   the screen so the figures below always have their inputs visible above them. */
.ribbon{display:grid;gap:10px 18px;padding:14px 16px;margin-bottom:12px;
  border:1px solid var(--line);border-radius:9px;background:var(--panel);
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.param{display:flex;flex-direction:column;gap:3px}
.param .pl{font-size:12.5px;color:var(--mut);font-weight:600}
.param .pi{display:flex;align-items:center;gap:3px;border:1px solid var(--line);
  border-radius:6px;padding:4px 8px;background:var(--bg)}
.param .pi i{font-style:normal;color:var(--mut);font-size:13px}
.param .pi input{border:0;outline:0;background:transparent;width:100%;
  font:inherit;font-size:15px;font-weight:620;color:var(--ink);letter-spacing:-.01em}
.param .pn{font-size:11.5px;color:var(--mut)}
.ribact{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  grid-column:1/-1;border-top:1px solid var(--line);padding-top:10px}

/* A variance worse than ten percent is the thing the grid exists to surface, so it is
   the only color on the screen. */
.vwarn{color:var(--warn);font-weight:650}
.tr.warn{background:var(--warns)}
.card.warn .v{color:var(--warn)}

/* An assumption the client can type over. It reads as a value until you click it, because
   a table of boxes looks like a form to fill in rather than numbers to correct. */
.ain{display:inline-flex;align-items:center;gap:2px;border:1px solid transparent;
  border-radius:6px;padding:2px 5px;background:transparent}
.ain:hover,.ain:focus-within{border-color:var(--line);background:var(--bg)}
.ain input{border:0;outline:0;background:transparent;width:52px;font:inherit;
  font-size:13.5px;font-weight:660;color:var(--ink)}
.ain i{font-style:normal;color:var(--mut);font-size:12px}
.ain.typed{border-color:var(--acc);background:var(--bg)}

/* Demo numbers that look real are how a mock ends up in a client meeting. */
.mockbar{display:flex;gap:10px;align-items:baseline;padding:9px 14px;margin-bottom:12px;
  border:1px solid var(--warn);border-radius:8px;background:var(--warns)}
.mockbar b{color:var(--warn);font-size:12.5px;text-transform:uppercase;letter-spacing:.04em}
.mockbar span{color:var(--ink2);font-size:12.5px}

/* A constraint that caps the whole funnel deserves to sit above the numbers it caps,
   not inside a table below them. */
.capbar{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;padding:10px 14px;
  margin-bottom:12px;border:1px solid var(--warn);border-radius:8px;background:var(--warns)}
.capbar b{color:var(--warn);font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;
  white-space:nowrap}
.capbar span{color:var(--ink2);font-size:12.5px;flex:1;min-width:260px}

/* Remove a person from the roster. Quiet until you are on the row. */
.xbtn{border:0;background:transparent;color:var(--mut);font-size:16px;line-height:1;
  cursor:pointer;padding:2px 5px;border-radius:5px}
.tr:hover .xbtn{color:var(--ink2)}
.xbtn:hover{background:var(--warns);color:var(--warn)}
.ain input[readonly]{color:var(--ink2);cursor:default}

/* A name and a date need more room than a rate does. */
.ain.wide{display:flex;width:100%}
.ain.wide input{width:100%}
.effw{font-size:11.5px;margin-top:1px;white-space:nowrap}

/* Constraints that decide whether the plan is arithmetic that can happen. They sit above
   every number they invalidate, because finding this in month seven is the failure. */
.checks{display:grid;gap:8px;margin-bottom:12px}
.chk{padding:11px 14px;border:1px solid var(--line);border-left:3px solid var(--acc);
  border-radius:8px;background:var(--panel)}
.chk.bad{border-color:var(--warn);border-left-color:var(--warn);background:var(--warns)}
.chk .ct{font-size:13px;font-weight:660;color:var(--ink);margin-bottom:3px}
.chk.bad .ct{color:var(--warn)}
.chk .cd{font-size:12.5px;color:var(--ink2);line-height:1.5}
.chk .cf{font-size:12.5px;color:var(--ink);font-weight:550;margin-top:5px}

/* A pointer from the numbers to the inputs that produced them. */
.golink{color:var(--acc);text-decoration:none;font-weight:600;white-space:nowrap}
.golink:hover{text-decoration:underline}

/* The funnel, drawn. Two columns of bars beside one column of labels, so the plan and the
   actual line up row for row and the shapes can be compared at a glance. */
/* Four columns since Step Conversion arrived. It was still declared with three, so the
 * Actual column wrapped underneath the stage labels and read as missing entirely. */
.funnel{display:grid;grid-template-columns:minmax(118px,1fr) 1.9fr 1.9fr minmax(150px,1fr);
  gap:0 18px;padding:4px 16px 14px}
.fhead{font-size:11.5px;color:var(--mut);font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;padding:8px 0 10px;border-bottom:1px solid var(--line);margin-bottom:6px}
.fstage{display:grid;grid-template-columns:1fr 62px 44px;align-items:center;gap:8px;height:34px}
.flabels .fstage{grid-template-columns:1fr}
.fnm{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.fbarwrap{display:flex;justify-content:center}
.fbar{height:20px;border-radius:3px;background:var(--acc);opacity:.85;min-width:3px;
  transition:width .2s}
.fbar.act{background:var(--good)}
.fval{font-size:12.5px;font-weight:660;color:var(--ink);text-align:right}
.fconv{font-size:11.5px;color:var(--mut);text-align:right}
.fempty{font-size:12.5px;color:var(--mut);padding:10px 0;line-height:1.5}
.fconvcol .fstage{grid-template-columns:1fr}
/* Narrow: drop the conversion column, and never the actual one.
 *
 * The old rule went to two columns at 820px and dropped ":last-child", which was Actual.
 * A funnel showing a plan with nothing beside it is the one thing this screen exists to
 * prevent, and it is what a reader saw in the browser pane: "the actual funnel is
 * missing". Plan and actual stay side by side at every width; the comparison goes first
 * because it can be worked out by eye from the two columns it compares. */
@media (max-width:1180px){
  .funnel{grid-template-columns:minmax(104px,1fr) 2fr 2fr;gap:0 12px}
  .fconvcol{display:none}}
@media (max-width:560px){
  .funnel{gap:0 8px;padding:4px 10px 12px}
  .fstage{grid-template-columns:1fr 52px;gap:6px}
  .fnm{font-size:12px}}
.hint{font-size:11px;color:var(--mut);line-height:1.3;margin-top:1px}

/* Baseline against working version. The delivered plan is a thing somebody agreed to, so
   it stays visible even after the numbers move. */
.verbar{display:grid;gap:6px;padding:11px 14px;margin-bottom:12px;border:1px solid var(--line);
  border-radius:9px;background:var(--panel)}
.vline{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.vline b{font-size:13px;color:var(--ink);white-space:nowrap}
.vline .sub{font-size:12.5px;flex:1;min-width:220px}

/* Chapter headings in the continuous read. */
.readgroup{font-size:15px;font-weight:680;color:var(--ink);margin:22px 0 8px;
  padding-top:14px;border-top:1px solid var(--line);letter-spacing:-.01em}
.readgroup:first-child{margin-top:0;padding-top:0;border-top:0}

/* A document, wearing this product's clothes.
   The export ships semantic HTML, so the content needs no rewriting: it needs the same
   type, the same tables and the same rhythm as every other screen here. */
.docstamp{font-size:12px;color:var(--mut);margin:0 0 10px}
.doctoc{display:flex;flex-wrap:wrap;gap:6px 8px;margin-bottom:12px;padding:10px 14px;
  border:1px solid var(--line);border-radius:9px;background:var(--panel)}
.doctoc a{font-size:12.5px;color:var(--acc);text-decoration:none;font-weight:600;
  padding:2px 8px;border:1px solid var(--line);border-radius:20px;background:var(--bg)}
.doctoc a:hover{border-color:var(--acc)}
.doc{padding:14px 16px;font-size:13.5px;line-height:1.62;color:var(--ink2)}
.doc h2,.doc h3,.doc h4{color:var(--ink);letter-spacing:-.01em;margin:18px 0 6px}
.doc h2{font-size:14.5px;font-weight:680}
.doc h3{font-size:13.5px;font-weight:660}
.doc h4{font-size:13px;font-weight:640;color:var(--ink2)}
.doc p{margin:0 0 10px}
.doc ul,.doc ol{margin:0 0 12px;padding-left:20px}
.doc li{margin:0 0 5px}
.doc strong{color:var(--ink);font-weight:650}
.doc table{width:100%;border-collapse:collapse;margin:8px 0 16px;font-size:12.5px}
.doc th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--mut);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--line)}
.doc td{padding:8px 10px;border-bottom:1px solid var(--line2);vertical-align:top;
  color:var(--ink2)}
.doc tr:last-child td{border-bottom:0}
.doc td:first-child{color:var(--ink);font-weight:560}
.readdoc{font-size:14.5px;font-weight:680;color:var(--ink);margin:20px 0 2px}
.readblurb{margin:0 0 10px}

/* Which version you are looking at. */
.vswitch{display:inline-flex;border:1px solid var(--line);border-radius:7px;overflow:hidden;
  margin-bottom:8px;align-self:start}
.vswitch button{border:0;background:var(--bg);color:var(--ink2);font:inherit;font-size:12.5px;
  font-weight:600;padding:5px 13px;cursor:pointer}
.vswitch button+button{border-left:1px solid var(--line)}
.vswitch button[aria-pressed="true"]{background:var(--acc);color:#fff}
.vnote{font-size:12.5px;color:var(--warn);background:var(--warns);border-radius:6px;
  padding:7px 11px;margin-bottom:6px}

/* Download everything. Not a row in the list of chapters, because it is not one. */
.wholebar{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;padding:11px 16px;margin-bottom:12px;border:1px solid var(--line);
  border-radius:9px;background:var(--panel)}
.wholebar b{font-size:13.5px;color:var(--ink)}
.wholebar .sub{margin-left:8px}

/* A section opened in place, indented so it reads as belonging to the row above it. */
.inlinedoc{margin:2px 0 16px;padding-left:14px;border-left:2px solid var(--acc)}
.btn.xs.on{background:var(--acc);color:#fff;border-color:var(--acc)}

/* A single measure, read as a short block instead of a four-column table with one row.
   Label on the left, value on the right, one fact per line. */
.measure{padding:4px 16px 12px}
.mrow{display:grid;grid-template-columns:minmax(130px,170px) 1fr;gap:14px;
  padding:9px 0;border-bottom:1px solid var(--line2)}
.mrow:last-child{border-bottom:0}
.mcap{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);
  font-weight:600;padding-top:2px}
.mval{font-size:13.5px;color:var(--ink2);line-height:1.55}
.mval b{color:var(--ink);font-weight:650}
.mval .pill{margin-left:8px;vertical-align:middle}


/* The account list, as a list. Dense rows, one line each, so a screen holds thirty of
   them rather than four. */
.gridbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.srch{flex:1;min-width:220px;padding:7px 11px;border:1px solid var(--line);border-radius:7px;
  background:var(--panel);font:inherit;font-size:13px;color:var(--ink);outline:0}
.srch:focus{border-color:var(--acc)}
.gridbar .seg button s{text-decoration:none;opacity:.6;margin-left:4px;font-size:11px}
.tbl.grid .tr{padding:6px 16px;align-items:center}
.tbl.grid .tr.acc:hover{background:var(--bg)}
.tbl.grid .nm{font-size:13px;font-weight:600}
.tbl.grid .sub{font-size:12.5px}
.clamp1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.morerow{display:flex;gap:12px;align-items:center;justify-content:center;padding:12px 0 18px}
.card .do .btn.xs{display:inline-block}

/* Tasks. A row you work in, not a row you read. */
.seg.wide button{padding:6px 14px}
.tr.task{padding:7px 16px;align-items:center}
.tr.task:hover{background:var(--bg)}
.tr.task.isdone .nm{color:var(--mut);text-decoration:line-through}
.stsel{width:100%;font:inherit;font-size:12px;font-weight:620;padding:4px 6px;
  border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink);
  cursor:pointer}
.stsel.good{color:var(--good);border-color:var(--good)}
.stsel.bad{color:var(--warn);border-color:var(--warn)}
.stsel.acc{color:var(--acc);border-color:var(--acc)}

/* Pages. A page number is a place you can come back to; "show more" is not. */
.pager{display:flex;gap:4px;align-items:center;justify-content:center;flex-wrap:wrap;
  padding:14px 0 20px}
.pbtn{border:1px solid var(--line);background:var(--panel);color:var(--ink2);font:inherit;
  font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:6px;cursor:pointer}
.pbtn:hover:not(:disabled){border-color:var(--acc);color:var(--ink)}
.pbtn.on{background:var(--acc);border-color:var(--acc);color:#fff}
.pbtn:disabled{opacity:.4;cursor:default}
.pgap{color:var(--mut);padding:0 2px}
.pager .sub{margin-left:10px}

/* Ways to open a workbook. The file goes to a real spreadsheet; nothing pretends to be
   one here. */
.wbacts{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.wbacts .hint{flex:1;min-width:200px;line-height:1.45}


/* Fields the list does not carry. One per line: this is the most important thing about
   a list and it was reading as a run-on sentence. */
.misslist{margin:6px 0 0;padding:0 0 0 16px;list-style:disc}
.misslist li{font-size:12.5px;color:var(--mut);line-height:1.6}

/* The Gantt. The library brings its own chart styling; this is the frame around it. */
.gantwrap{border:1px solid var(--line);border-radius:9px;background:var(--panel);
  margin-bottom:12px;overflow:hidden}
.gantbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:10px 14px;
  border-bottom:1px solid var(--line)}
.gantbar .sub{flex:1;min-width:220px}
.param.inline{flex-direction:row;align-items:center;gap:8px}
.param.inline .pi input{width:110px}
/* One scroller, and it is the library's.
 *
 * This wrapper had overflow:auto and max-height:520px, and the chart's own container also
 * scrolls. Two nested scrollers meant the library drew its sticky header and rows against
 * its scroll position while the scrolling actually happened in the outer box, so the
 * content went wherever it could not be seen. Every scroll made the chart vanish.
 *
 * The chart manages its own height and scrolling. This is only the frame around it.
 */
/* jsGantt-improved, dressed as the rest of the app.
 *
 * The library scrolls itself with the header frozen, which is why .gantt-target sets no
 * overflow of its own. The old chart sat inside a scroller inside a scroller and the rows
 * vanished under the header whenever you moved. One scroller, owned by the library. */
/* overflow:clip, not hidden. hidden makes this a scrollport, which traps the sticky
 * heading inside a box that never scrolls, so the heading never sticks to anything. */
.gantt-target{border:1px solid var(--line);border-radius:9px;overflow:clip;
  background:var(--panel)}
.gantt-target .gmain{font:12.5px/1.45 var(--font);color:var(--ink);border:0}
.gantt-target .gtasktableh,.gantt-target .gcharttableh{background:var(--line2)}
.gantt-target .gtasktableh td,.gantt-target .gcharttableh td,
.gantt-target .gtaskheading{font-weight:650;font-size:11px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--mut);border-color:var(--line)}
.gantt-target td,.gantt-target th{border-color:var(--line)}
.gantt-target .gtasktable,.gantt-target .gcharttable{background:var(--panel)}
.gantt-target .gtaskname,.gantt-target .gtasktable td{color:var(--ink)}
.gantt-target .gtaskname{max-width:340px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.gantt-target .gtaskcellwkend{background:var(--line2)}
.gantt-target .gtaskcellcurrent{background:var(--accs)}

/* Status is the bar color. Not started is quiet, done is green, blocked is the warning
 * color, and the darker inner strip is how much of it is finished. */
.gantt-target .gtaskblue{background:#dfe6ee;border-color:#c8d3de}
.gantt-target .gtaskbluecomplete{background:var(--acc)}
.gantt-target .gtaskyellow{background:var(--accs);border-color:var(--acc)}
.gantt-target .gtaskyellowcomplete{background:var(--acc)}
.gantt-target .gtaskgreen{background:var(--goods);border-color:var(--good)}
.gantt-target .gtaskgreencomplete{background:var(--good)}
.gantt-target .gtaskred{background:var(--warns);border-color:var(--warn)}
.gantt-target .gtaskredcomplete{background:var(--warn)}
.gantt-target .ggroupblack{background:var(--ink2);border-color:var(--ink)}
.gantt-target .gtasktable tr:has(.ggroupitem) td,
.gantt-target .gtaskname b{font-weight:650}

/* The library's own Day / Week / Month / Quarter picker, which now replaces the buttons
 * I had drawn beside it. One control, and it is the one that actually redraws. */
.gantt-target .gantt-inputtable{background:var(--panel);border-bottom:1px solid var(--line)}
.gantt-target .gformlabel{display:inline-block;padding:4px 11px;margin:6px 3px;
  border:1px solid var(--line);border-radius:999px;font-size:12px;color:var(--ink2);
  background:var(--panel);cursor:pointer;white-space:nowrap}
.gantt-target .gformlabel.gselected{background:var(--acc);border-color:var(--acc);
  color:var(--onacc);font-weight:600}
.gantt-target .gantt-inputtable input[type=radio]{display:none}
.gpop{padding:8px 10px;font-size:12.5px;line-height:1.5}
.gpop b{color:#fff}

/* A chip never wraps its own text. If they do not fit, the row wraps instead. */
.seg button{white-space:nowrap}
.pickwrap{display:flex;align-items:center;gap:8px}
.pickwrap .pl{font-size:12.5px;color:var(--mut);font-weight:600}
/* Sizing only. Everything else comes from the shared select rule below. */
.pickwrap select{min-width:220px}

/* The library leaves the name column unlabelled and narrow, so the header read
 * "(blank) Resource Duration" and every task was cut mid-word at 221px. */
.gantt-target .gtasktableh td.gtaskname:not(.gspanning):empty::before{content:"Task"}
/* A width can only hold if the text inside agrees to be cut. */
.gantt-target .gtaskname:not(.gspanning),.gantt-target .gres,.gantt-target .gdur,
.gantt-target .gcomp,.gantt-target .gstartdate,.gantt-target .genddate{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The zoom picker sits inside a .gtaskname cell of its own, so forcing display:block on
 * everything inside one put Day, Week, Month and Quarter on four separate lines. */
/* The library pins the div inside the name cell to a fixed 220px of its own, so widening
 * the column moved the border and left the text cut in the same place. The cell owns the
 * width; everything inside it follows. */
.gantt-target .gtaskname:not(.gspanning) > div,
.gantt-target .gtaskname:not(.gspanning) div,
.gantt-target .gtaskname:not(.gspanning) span:not(.gcolgrip){width:auto;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.gantt-target .gres > div,
.gantt-target .gres span:not(.gcolgrip){width:auto;max-width:100%}
.gantt-target .gspanning,.gantt-target .gspanning *{overflow:visible;white-space:nowrap}

/* Drag the right edge of any heading. Dragging used to select the heading text instead. */
.gantt-target .gtasktableh td{position:relative;user-select:none}
/* Sized last and defensively. A rule for the text inside the name and resource cells was
 * also matching this span, set it to width:auto, and collapsed both handles to nothing:
 * the two columns that had such a rule were exactly the two that stopped resizing. */
.gantt-target .gtasktableh td .gcolgrip,
.gantt-target .gcolgrip{position:absolute;top:0;right:-4px;width:9px;min-width:9px;
  max-width:9px;height:100%;cursor:col-resize;z-index:6;display:block;overflow:visible}
.gantt-target .gcolgrip::after{content:"";position:absolute;top:18%;left:4px;width:2px;
  height:64%;background:transparent;border-radius:2px}
.gantt-target .gcolgrip:hover::after{background:var(--acc)}
body.gresizing{cursor:col-resize;user-select:none}
body.gresizing .gcolgrip::after{background:var(--acc)}

/* One scroller, and the column headings stay put while the rows move under them. The
 * chart used to sit in a scroller inside a scroller and rows disappeared on every wheel. */
.gantt-target .gtasktableh,.gantt-target .gcharttableh{position:sticky;top:0;z-index:3;
  background:var(--line2)}

/* Where a row came from. Framework rows recede; the ones written for this company, and
 * the ones waiting on the client, are the ones worth the color. */
.prov{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:999px;
  font-size:10.5px;font-weight:650;letter-spacing:.02em;white-space:nowrap;
  vertical-align:1px;border:1px solid transparent}
.p-framework{background:var(--line2);color:var(--mut);border-color:var(--line)}
.p-unknown{background:transparent;color:var(--mut);border-color:var(--line)}
.p-plan{background:var(--accs);color:var(--acc);border-color:var(--acc)}
.p-research{background:var(--goods);color:var(--good);border-color:var(--good)}
.p-question{background:var(--warns);color:var(--warn);border-color:var(--warn)}
.p-waiting{background:var(--bads);color:var(--bad);border-color:var(--bad)}
.p-mirror{background:var(--line2);color:var(--ink2);border-color:var(--line)}
.tr.task .nm{white-space:normal}

/* A figure the documents state that the working version has moved away from. */
.capbar.warn{border-color:var(--warn);background:var(--warns)}
.capbar .tbl.fct{margin-top:10px;background:var(--panel);border-radius:8px}
.tbl.fct .tr{align-items:start}
.tbl.fct b.acc{color:var(--acc)}
.tbl.fct .sub{display:block;margin-top:2px}

/* One dropdown style, everywhere.
 *
 * .param styled its input and never its select, so every dropdown on Settings was a raw
 * OS control: 20px tall, the browser's grey border, no padding, its own blue focus ring
 * on top of the wrapper's. Meanwhile the request form had a proper one. Two products,
 * again, from one design.
 *
 * The .pi wrapper exists to draw a border round a number and its prefix. A select does
 * not need a box inside a box, so where .pi holds only a select it gets out of the way
 * and the select is the control. */
.param .pi:has(> select:only-child){border:0;padding:0;background:transparent}

select,.param .pi select,.stsel{appearance:none;-webkit-appearance:none;
  font:inherit;font-size:13.5px;line-height:1.45;color:var(--ink);
  background:var(--panel);border:1px solid var(--line);border-radius:7px;
  padding:7px 30px 7px 10px;width:100%;min-height:34px;cursor:pointer;
  text-overflow:ellipsis;
  /* The chevron the browser drew is gone with the appearance, so it is drawn here.
     A background image travels with the element, which a wrapper pseudo-element cannot
     do for a select that appears in a table cell or a filter bar. */
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2378828f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center}
select:hover,.stsel:hover{border-color:var(--acc)}
select:focus,.stsel:focus{outline:0;border-color:var(--acc);
  box-shadow:0 0 0 3px var(--accs)}
select:disabled{opacity:.55;cursor:default}
/* An unanswered dropdown says so rather than looking like an empty box. */
select.unset{color:var(--mut);font-weight:500}

/* The status dropdown in a task row keeps its pill colouring, at row height. */
.stsel{min-height:30px;padding:5px 26px 5px 9px;font-size:12.5px;font-weight:600;
  background-position:right 8px center}

/* A select that sits in a compact filter bar should size to its content, not stretch. */
.pickwrap select,.gridbar select{width:auto;min-width:200px;max-width:340px}

/* Step conversion: what the plan assumed, and what is happening. */
.fconvcol{min-width:190px}
.fconvpair{display:flex;align-items:baseline;gap:6px;height:30px;font-size:12.5px;
  color:var(--mut);white-space:nowrap}
.fconvpair .cp{font-weight:600;color:var(--fg)}
.fconvpair .carrow{opacity:.5}
.fconvpair .ca{font-weight:650;color:var(--fg)}
.fconvpair .cdiff{margin-left:2px;font-size:11.5px;font-weight:650}
.fconvpair.good .ca,.fconvpair.good .cdiff{color:var(--good)}
.fconvpair.bad .ca,.fconvpair.bad .cdiff{color:var(--bad)}


/* ============================================================================
   gtm.54ten.com only
   ----------------------------------------------------------------------------
   Everything above is shared with customer.54ten.com, byte for byte, and
   preflight fails if the two copies differ. The two sites drifted 219 lines
   apart in a week: the gtm site never received the dropdown fix, so one product
   had styled selects and the other had raw OS controls.

   Only put a rule here when the component genuinely does not exist on the
   customer side, such as the intake form and the run queue. A component that
   exists on both belongs above, once.
   ============================================================================ */

.pickwrap select:focus{outline:0;border-color:var(--acc)}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px 60px}
.eyebrow{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);
  font-weight:650}
.sechead{display:flex;align-items:baseline;gap:12px;margin:26px 0 10px;
  padding-bottom:8px;border-bottom:1px solid var(--line)}
.sechead b{font-size:15px;font-weight:650;letter-spacing:-.01em}
.sechead span{font-size:12.5px;color:var(--mut)}
.sechead .sn{display:grid;place-items:center;width:21px;height:21px;border-radius:6px;
  background:var(--accs);color:var(--acc);font-size:11px;font-weight:700;flex:0 0 auto}
.grid2{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(288px,1fr))}
.param .ph{font-size:12px;color:var(--mut);line-height:1.45}
.param .pi .pfx{color:var(--mut);font-size:13px}
.param input,.param textarea,.param select{width:100%;font:inherit;font-size:13px;
  padding:7px 9px;border:1px solid var(--line);border-radius:7px;background:var(--bg);
  color:var(--ink)}
.param textarea{min-height:92px;resize:vertical;line-height:1.5}
.param input:focus,.param textarea:focus,.param select:focus{outline:0;
  border-color:var(--acc);background:var(--panel)}
.param.filled{border-color:var(--acc)}
.param .pn b{color:var(--ink2);font-weight:600}
.assume{display:block;font-size:11.5px;color:var(--warn);background:var(--warns);
  border-radius:6px;padding:5px 8px;margin-top:5px;line-height:1.45}
.param.filled .assume{display:none}
/* Request A GTM and each run's Intake (JB, October 8, 2026): one column, or two where fields pair,
   with the help under the input so a longer help line never pushes an input below its neighbor;
   one gray Blank: line instead of an orange box; "Required" in title case. */
.fgrid{display:grid;gap:16px 14px;grid-template-columns:1fr 1fr;align-items:start}
.fgrid > .param.full{grid-column:1/-1}
@media (max-width:760px){.fgrid{grid-template-columns:1fr}}
.fgrid .param .pl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:19px}
.param .pl .req{font-size:11px;font-weight:650;color:var(--acc);margin-left:4px}
.param .blank{font-size:11.5px;color:var(--mut);line-height:1.45}
.sizerow{display:grid;gap:6px;align-items:center;grid-template-columns:minmax(150px,1.2fr) 1fr auto 1fr}
.sizerow .to{font-size:12px;color:var(--mut)}
.sizecap{display:grid;gap:6px;grid-template-columns:minmax(150px,1.2fr) 1fr auto 1fr;
  font-size:11px;color:var(--mut)}
.sizecap span:nth-child(3){width:14px}
.ratecap{display:grid;gap:6px;font-size:11px;color:var(--mut);
  grid-template-columns:minmax(120px,1.3fr) minmax(130px,1.2fr) 120px minmax(110px,.9fr) 64px}
.terrs{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 6px}
.terr{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);
  background:var(--panel);border-radius:999px;padding:3px 4px 3px 11px;font-size:12.5px}
.terr i{font-style:normal;color:var(--mut);font-size:11.5px}
.terr .x{font:inherit;font-size:11px;border:0;background:var(--line2);color:var(--ink2);
  border-radius:999px;padding:2px 8px;cursor:pointer}
.terradd{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.terradd .pi{flex:1;min-width:220px}
.zipbox{display:grid;gap:6px;margin-top:6px;grid-template-columns:minmax(180px,1fr) 2fr auto;
  align-items:start}
.param .capbar{margin-top:6px}
.zipbox[hidden]{display:none}
.fgrid .rateline .pi{height:auto;padding:0;border:0;background:transparent}
.fgrid .rateline input,.fgrid .rateline select,.fgrid .rateline .pi input{height:34px;box-sizing:border-box;
  border:1px solid var(--line);border-radius:6px;background:var(--panel);font-size:12.5px;
  font-weight:400;padding:0 8px;letter-spacing:0}
.param .ans{font-size:13px;color:var(--ink);min-height:36px;padding:7px 9px;border:1px solid var(--line2);
  border-radius:7px;background:var(--panel);white-space:pre-wrap;overflow-wrap:anywhere}
.param .ansrow{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.param .ansrow .btn{margin-left:auto}
.capbar .ovacts{display:flex;gap:6px;flex-wrap:wrap;flex:1 1 100%}
.param .srcs{display:flex;flex-direction:column;gap:2px}
.param.editing{border:1px solid var(--acc);border-radius:9px;padding:10px;background:var(--panel)}
.fgrid .param select,.fgrid .param .pi{height:38px;box-sizing:border-box}
.fgrid .param .pi input{padding-top:0;padding-bottom:0}
.fgrid .param select:has(option[value=""]:checked){color:var(--mut)}
.bad{color:var(--bad);font-size:12px;margin-top:3px}
.mkthead .sub{font-size:12px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:3px}
.chips button{font:inherit;font-size:12.5px;padding:5px 11px;border-radius:999px;
  border:1px solid var(--line);background:var(--panel);color:var(--ink2);cursor:pointer;
  white-space:nowrap}
.chips button[aria-pressed=true]{background:var(--acc);border-color:var(--acc);
  color:var(--onacc);font-weight:600}
.wide{grid-column:1/-1}
.rowbtn{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px}
.btn.sm{font-size:12px;padding:5px 10px}
.calcout{font-size:12.5px;color:var(--ink2);background:var(--accs);border-radius:7px;
  padding:9px 11px;line-height:1.55;margin-top:6px}
.calcout b{color:var(--acc)}
.stick{position:sticky;bottom:0;background:var(--panel);border-top:1px solid var(--line);
  padding:12px 22px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  margin:26px -22px 0}
.prog{height:4px;background:var(--line2);border-radius:99px;flex:1;min-width:120px;
  overflow:hidden}
.prog i{display:block;height:100%;background:var(--acc);border-radius:99px;
  transition:width .2s}
.mkt{border:1px solid var(--line);border-radius:10px;padding:13px;margin-bottom:14px;
  background:var(--bg)}
.mkthead{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.mkthead b{font-size:14px;font-weight:650}
.mkthead .sn{display:grid;place-items:center;width:21px;height:21px;border-radius:6px;
  background:var(--accs);color:var(--acc);font-size:11px;font-weight:700;flex:0 0 auto}
.mkthead button{margin-left:auto}
.rates{display:flex;flex-direction:column;gap:6px}
.rateline{display:grid;gap:6px;align-items:center;
  grid-template-columns:minmax(120px,1.3fr) minmax(130px,1.2fr) 120px minmax(110px,.9fr) auto}
.rateline input,.rateline select{width:100%;font:inherit;font-size:12.5px;padding:6px 8px;
  border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink)}
#side .prog{height:5px;background:var(--line2);border-radius:99px;overflow:hidden}
#side .prog i{display:block;height:100%;background:var(--acc);transition:width .2s}
.lvl{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  margin-top:4px}
.lvl label{display:flex;flex-direction:column;gap:5px;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;padding:13px 14px;cursor:pointer;
  transition:border-color .12s,background .12s}
.lvl label:hover{border-color:var(--acc)}
.lvl label .t{font-size:13.5px;font-weight:650;color:var(--ink);display:flex;
  align-items:center;gap:7px}
.lvl label .t::before{content:"";width:13px;height:13px;border-radius:50%;flex:0 0 auto;
  border:1.5px solid var(--line);background:var(--panel)}
.lvl label .m{font-size:12.5px;color:var(--mut);line-height:1.5}
.lvl label.on{border-color:var(--acc);background:var(--accs)}
.lvl label.on .t{color:var(--acc)}
.lvl label.on .t::before{border-color:var(--acc);background:var(--acc);
  box-shadow:inset 0 0 0 2.5px var(--panel)}
.lvl label.on .m{color:var(--ink2)}
.lede{color:var(--ink2);font-size:13.5px;line-height:1.6;max-width:70ch;margin:6px 0 16px}
.crumb{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--mut);
  font-weight:650}
/* The way back, looking like a way back.
 *
 * run.html has carried <a href="/">Runs</a> here all along and nothing styled it, so it
 * rendered as grey uppercase text identical to the plain label on the Runs page itself.
 * A link nobody can see is not a way out: the report was "there is no way to get back to
 * this page". The arrow is part of the link because an uppercase word at 11px does not
 * read as clickable on its own, whatever color it is. */
.crumb a{color:var(--acc);text-decoration:none;display:inline-flex;align-items:center;
  gap:4px;border-radius:5px;padding:1px 4px;margin-left:-4px}
.crumb a::before{content:"\2190";font-size:13px;line-height:1;opacity:.8}
.crumb a:hover{background:var(--accs);text-decoration:underline}
.crumb a:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.lb{font-size:12.5px;font-weight:640;color:var(--ink);display:block}
.err{color:var(--bad)}
.host{font-size:12px;color:var(--mut)}
.pub{font-size:11.5px;color:var(--mut)}
.gi{font-size:12px;color:var(--ink2)}
.bar{height:5px;background:var(--line2);border-radius:99px;overflow:hidden;min-width:70px}
.bar i{display:block;height:100%;background:var(--acc);border-radius:99px}
.row,.runrow,.filerow{display:grid;gap:10px;align-items:center}
.runrow{grid-template-columns:minmax(150px,1.3fr) minmax(130px,1.2fr) 88px
  minmax(150px,1.5fr) 96px}
.filerow{grid-template-columns:minmax(200px,1.5fr) minmax(240px,2.4fr) minmax(150px,auto)}
a.tr.runrow{text-decoration:none;color:inherit}
a.tr.runrow:hover,.tr.hover:hover{background:var(--line2)}
.depth{font-size:12px;color:var(--mut)}
.facts{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--ink2)}
.nv.nv2{align-items:flex-start;padding-top:7px;padding-bottom:7px}
.nv2 .nvtxt{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.nv2 .nvtxt em{font-style:normal;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;line-height:1.35}
.nv2 .nvtxt small{font-size:11px;color:var(--mut);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;font-weight:400}
.nv2[aria-current=true] .nvtxt small{color:var(--acc);opacity:.75}
.nv2 s.dot{margin-top:5px}
.nv s.dot{width:7px;height:7px;border-radius:50%;background:var(--mut);flex:0 0 auto}
.nv s.dot.good{background:var(--good)}
.nv s.dot.warn{background:var(--warn)}
.nv s.dot.bad{background:var(--bad)}
.runrow{grid-template-columns:minmax(140px,1.2fr) minmax(120px,1.1fr) 84px
  minmax(140px,1.4fr) 116px 92px}
.capbar .rowbtn{margin-top:9px}
.capbar a.btn.pri{text-decoration:none}
a.who.home{text-decoration:none;color:inherit;border-radius:8px;padding:2px;margin:-2px;
  display:flex;gap:9px;align-items:center}
a.who.home:hover{background:var(--line2)}
#side nav{overflow-y:auto;min-height:0}
.btn,.btn.xs{white-space:nowrap}
.filerow .acts{display:flex;gap:6px;justify-content:flex-end;align-items:center}
.tbl .grouphead{border-radius:9px 9px 0 0}
.capbar em.when{font-style:normal;font-weight:650;color:var(--ink)}

/* A run's screens shown under the run's own name, on a page that is not that run. */
#side nav .grp.sub2{margin-top:10px;opacity:.75}

/* A placeholder must not read as an answer.
 *
 * The intake's placeholders are worked examples: "Example Co", "example.com",
 * "United States", "Ethiopia", "2015". At #757575 on a white field, in the same weight
 * and style as a real value, a screen full of them looked like a completed form. The
 * sidebar said 0 of 43 answered and was read as a bug, because the form appeared filled.
 *
 * Lighter and italic. An example is now unmistakably an example. */
input::placeholder, textarea::placeholder{color:var(--mut);opacity:.62;font-style:italic}
input:focus::placeholder, textarea:focus::placeholder{opacity:.4}

/* One login, two modes. Staff flip between building a plan and seeing what the client
   sees. A client never renders this: they are not staff, they hold one company, and there
   is nothing to switch to. */
.modes{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:3px;margin:10px 0 0;
  background:var(--line2,#eceae6);border-radius:9px}
.modes a{font:inherit;font-size:12.5px;font-weight:600;padding:7px 8px;border:0;
  border-radius:7px;background:transparent;color:var(--mut);cursor:pointer;
  text-align:center;text-decoration:none;display:block}
.modes a[aria-current="true"]{background:var(--card,#fff);color:var(--ink,#1c1b19);
  box-shadow:0 1px 2px rgba(0,0,0,.09)}
.modes a:not([aria-current="true"]):hover{color:var(--ink,#1c1b19)}
/* The display rules above outrank the browser's own rule for the hidden attribute, so a
   customer saw the staff tabs and an empty Client box. Hidden means hidden. */
.modes[hidden],.pick[hidden]{display:none}

/* A screen that is missing figures says which, and still draws itself. */
.capbar.awaiting{border-left:3px solid var(--warn,#c98a2e)}
.awaitlist{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.awaititem{display:inline-flex;flex-direction:column;gap:1px;padding:5px 9px;
  border:1px solid var(--line);border-radius:7px;background:var(--card);font-size:12px}
.awaititem small{color:var(--mut);font-size:10.5px}
.blankval{color:var(--mut);letter-spacing:.06em}

/* Target Accounts: a card with accounts behind it opens them. */
.card.click{cursor:pointer;transition:border-color .12s,box-shadow .12s}
.card.click:hover{border-color:var(--acc)}
.card.click:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.card.on{border-color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc)}
.card .seglink{cursor:pointer;color:inherit;text-decoration:underline;text-decoration-color:var(--line);
  text-underline-offset:2px}
.card .seglink:hover,.card .seglink.on{color:var(--acc);text-decoration-color:var(--acc)}
.cards + .grouphead,.cards + .gridbar{margin-top:16px}
/* Screening against reach: every account in exactly one box, and each box opens them. */
.tbl.grid.overlap{margin-bottom:16px}
.tbl.grid.overlap .tr{padding:8px 16px}
.tbl.grid.overlap .tr.tot{background:var(--bg)}
.gridcell{cursor:pointer;color:inherit;text-decoration:underline;text-decoration-color:var(--line);
  text-underline-offset:3px;font-variant-numeric:tabular-nums}
.gridcell:hover,.gridcell.on{color:var(--acc);text-decoration-color:var(--acc)}
.gridcell:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.tbl.grid.overlap + .grouphead{margin-top:16px}
.viewbar,.actbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 10px;
  padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.viewbar b{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut)}
.viewbar span:not(.sub){font-weight:600;flex:1;min-width:200px}
.actbar .pi input{padding:5px 9px;border:1px solid var(--line);border-radius:6px;
  background:var(--bg);font:inherit;font-size:12.5px;width:140px}
.actbar .pi.wide input{width:220px}
.editrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;
  padding:12px 14px;background:var(--panel);border-bottom:1px solid var(--line)}
.editrow label span{display:block;font-size:11.5px;color:var(--mut);font-weight:600;margin-bottom:3px}
.editrow input,.editrow select{width:100%;padding:6px 9px;border:1px solid var(--line);
  border-radius:6px;background:var(--bg);font:inherit;font-size:12.5px}
.editrow .rowbtn{grid-column:1/-1;display:flex;gap:8px}
.tr.acc a.site{color:inherit;text-decoration:none}
.tr.acc a.site:hover{color:var(--acc);text-decoration:underline}
/* Building's Target Accounts: three panels side by side (Preview B, September 30, 2026). */
.panels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}
.panel{border:1px solid var(--line);border-radius:9px;background:var(--panel);padding:14px 16px;
  display:flex;flex-direction:column;min-width:0}
.panel h2{font-size:14px;margin:0 0 8px}
.panel .kv{display:flex;justify-content:space-between;gap:10px;align-items:baseline;padding:6px 0;
  border-bottom:1px solid var(--line2, var(--line));font-size:13px}
.panel .kv > span{color:var(--mut)}
.panel .kv b,.panel .kv .gridcell{font-size:15px}
.panel .kv.big b,.panel .kv.big .gridcell b{font-size:22px}
.panel .note{font-size:12.5px;color:var(--mut)}
.panel .seglink{cursor:pointer;color:inherit;text-decoration:underline;text-decoration-color:var(--line);
  text-underline-offset:2px}
.panel .seglink:hover,.panel .seglink.on{color:var(--acc);text-decoration-color:var(--acc)}
.panel .spacer{flex:1;min-height:10px}
.panel .do{margin-top:auto;padding-top:10px;border-top:1px solid var(--line);font-size:12.5px;font-weight:550}
.panels + .grouphead,.panels + .tbl{margin-top:4px}
.grouphead + .tbl.grid{margin-bottom:16px}
/* The spend report: one row per tier, emails and phones side by side, each slice ticked on its own. */
.slice{display:inline-flex;gap:6px;align-items:center}
.slice input{margin:0}
/* A slice sent for approval or bought: its Buy checkbox locked, and its state in a column of its
   own, a small label over one short line (October 6, 2026). */
.slice.locked{opacity:.55;cursor:not-allowed}
.buystatus{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
.buynote{font-size:11.5px;line-height:1.3}
/* Approvals: a duplicate in one short line, its history behind a link (October 6, 2026). */
.duphist{margin:6px 0 0;padding:0;list-style:none}
.duphist li{display:flex;gap:8px;align-items:baseline;margin:3px 0;font-size:12px}
.contactsblk{margin-top:14px;padding-top:12px;border-top:1px solid var(--line2)}
.linkbtn{background:none;border:0;padding:0;color:var(--acc);font:inherit;cursor:pointer;text-decoration:underline}
.enr-step{border:1px solid var(--line);border-radius:9px;padding:12px 14px;margin-bottom:12px;background:var(--panel)}
.enr-step h3{font-size:13px;margin:0 0 6px}
.enr-step .btn:disabled{opacity:.45;cursor:not-allowed}
.enr-step .rowbtn{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px}
.enr-step .pi input{padding:5px 9px;border:1px solid var(--line);border-radius:6px;background:var(--bg);
  font:inherit;font-size:12.5px;width:160px}
/* Client View shows two of Building's three panels, Enrichment being ours. */
.panels.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:1000px){.panels,.panels.two{grid-template-columns:1fr}}
.tbl.cov + .note{margin-bottom:16px}
/* Contact coverage by tier, in both views. On a phone the percentages step aside and the
   cells tighten, so all seven columns stay on screen. */
@media(max-width:700px){
  .tbl.cov .pct{display:none}
  .tbl.cov .tr{padding:8px 10px;gap:6px;font-size:12.5px;
    grid-template-columns:44px 56px 54px repeat(4,minmax(34px,1fr)) !important}
  .tbl.cov .tr.th{font-size:9.5px;letter-spacing:0}
  .tbl.cov .tr.th > div{overflow-wrap:normal;hyphens:none}
}