/* ===========================================================================
   VMX FIELD APPROVAL AGENT
   The screen an approving executive opens. One thing needs him; he decides.
   Reasoning is supporting evidence underneath, never the headline.

   Palette unchanged. One navy accent, reserved for the decision.
   Status colours for status only. 18px body floor. Humanist sans throughout,
   tabular lining numerals; the audit list is the only monospace.
   =========================================================================== */
:root{
  --paper:#FAF8F5;
  --paper-2:#FFFFFF;
  --ink:#16161A;
  --ink-2:#3D3D44;
  --ink-3:#5E5E67;
  --rule:#E3DED4;
  --rule-2:#CFC8BA;

  /* THE accent. The decision, and nothing else. */
  --accent:#173A5E;
  --accent-ink:#0F2A45;
  --accent-wash:#EDF1F6;

  /* status only */
  --await:#8A5A00; --await-wash:#FBF0DC;
  --ok:#1E6B3A;    --ok-wash:#E6F2EA;
  --stop:#A32217;  --stop-wash:#FBEAE8;

  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --mono:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font:400 18px/1.6 var(--sans);
  font-variant-numeric:tabular-nums lining-nums;
  -webkit-font-smoothing:antialiased;
}
.page{max-width:1000px;margin:0 auto;padding:26px 32px 72px}

/* ---------------- masthead. Live indicator lives here, always visible. ---- */
.top{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-bottom:16px;border-bottom:2px solid var(--ink);flex-wrap:wrap;
}
.top .who{font-size:20px;font-weight:700;letter-spacing:-.01em}
.top .where{font-size:16px;color:var(--ink-2);margin-top:2px}
.status{display:flex;align-items:center;gap:10px;font-size:16px;color:var(--ink-2);font-weight:500}
.dot{width:10px;height:10px;border-radius:50%;background:var(--ink-3);flex:none}
.dot.ok{background:var(--ok)}
.dot.warn{background:var(--await)}

/* ---------------- the "1 of 1 awaiting you" line ------------------------- */
.awaiting{
  margin:30px 0 12px;font-size:17px;font-weight:600;color:var(--ink-2);
  display:flex;align-items:center;gap:10px;
}
.awaiting .count{
  background:var(--accent);color:#fff;border-radius:20px;
  padding:3px 11px;font-size:15px;font-weight:700;
}

/* =========================================================================
   THE DECISION. Full width. Owns the top of the screen.
   Only two things are set large: the amount, and the verdict.
   ========================================================================= */
.decision{
  border:2.5px solid var(--accent);border-radius:12px;background:var(--paper-2);
  box-shadow:0 2px 18px rgba(23,58,94,.10);overflow:hidden;
}
.decision-head{
  background:var(--accent);color:#fff;padding:14px 28px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  font-size:16px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.decision-head .ref{font-weight:500;letter-spacing:.04em;opacity:.8;text-transform:none;font-size:15px}
.decision-body{padding:30px 28px 28px}

/* the ask: item stays deliberately quiet so the amount carries */
.ask{display:flex;align-items:baseline;justify-content:space-between;gap:28px;flex-wrap:wrap}
.ask .what{font-size:20px;font-weight:400;color:var(--ink-2);line-height:1.4}
.ask .what b{font-weight:600;color:var(--ink)}
.amount{font-size:58px;font-weight:700;letter-spacing:-.03em;line-height:1;white-space:nowrap}

.verdict-block{
  background:var(--accent-wash);border-left:7px solid var(--accent);
  border-radius:0 10px 10px 0;padding:24px 26px;margin:26px 0 24px;
}
.verdict-block .label{
  display:block;font-size:15px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-ink);margin-bottom:10px;
}
.verdict-block .say{font-size:30px;font-weight:600;line-height:1.3;letter-spacing:-.018em}

.acts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.acts button{
  padding:26px 10px;border-radius:10px;border:2.5px solid var(--accent);
  background:var(--paper-2);color:var(--accent-ink);cursor:pointer;
  font:700 22px/1.1 var(--sans);letter-spacing:.03em;transition:.12s;
}
.acts button:hover:not(:disabled){background:var(--accent-wash)}
.acts button.primary{background:var(--accent);color:#fff}
.acts button.primary:hover:not(:disabled){background:var(--accent-ink)}
.acts button:disabled{opacity:.38;cursor:not-allowed}
.acts button .sub{display:block;font-size:15px;font-weight:600;opacity:.75;margin-top:8px;letter-spacing:0}

.outcome{margin-top:22px;padding:16px 20px;border-radius:10px;font-size:18px;font-weight:600;display:none}
.outcome.show{display:block;background:var(--ok-wash);color:var(--ok);border:1px solid #B9D9C6}
.outcome.no{background:var(--stop-wash);color:var(--stop);border:1px solid #E8BDB8}

/* ---------------- evidence: subordinate, buyer's language ---------------- */
.why{margin:34px 0 0}
.why h2{
  font-size:15px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);padding-bottom:10px;border-bottom:1px solid var(--rule);margin-bottom:4px;
}
.ev{padding:18px 0;border-bottom:1px solid var(--rule)}
.ev:last-of-type{border-bottom:none}
.ev .h{font-size:19px;font-weight:600;line-height:1.35}
.ev .d{font-size:17px;color:var(--ink-2);margin-top:4px;line-height:1.55}

/* the technical trail, folded away */
details.trail{margin-top:14px;border-top:1px solid var(--rule);padding-top:14px}
details.trail summary{
  cursor:pointer;font-size:17px;font-weight:600;color:var(--ink-2);
  list-style:none;display:flex;align-items:center;gap:9px;
}
details.trail summary::-webkit-details-marker{display:none}
details.trail summary::before{content:'+';font-weight:700;color:var(--ink-3);font-size:19px;line-height:1}
details.trail[open] summary::before{content:'\\2212'}
.trail-body{padding:18px 0 4px}
.tstep{display:flex;gap:14px;padding:11px 0;border-bottom:1px solid var(--rule)}
.tstep:last-child{border-bottom:none}
.tstep .n{
  flex:none;width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--paper);
  display:grid;place-items:center;font-size:14px;font-weight:700;
}
.tstep.halt .n{background:var(--await)}
.tstep .tt{font-size:17px;font-weight:600}
.tstep .td{font-size:16px;color:var(--ink-2);white-space:pre-wrap;margin-top:2px}
/* the audit list is the ONE place monospace earns its keep */
.audit{margin-top:18px;font:500 15px/1.85 var(--mono);color:var(--ink-2);max-height:230px;overflow-y:auto}
.audit div{padding:3px 0;border-bottom:1px solid var(--rule)}
.audit .ts{color:var(--ink-3)}
.audit .who{font-weight:700}

/* ---------------- decided today: settled receipts ----------------------- */
.settled{margin-top:44px}
.settled h2{
  font-size:15px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);padding-bottom:10px;border-bottom:1px solid var(--rule);margin-bottom:2px;
}
.receipt{
  display:flex;align-items:center;gap:18px;padding:17px 2px;
  border-bottom:1px solid var(--rule);flex-wrap:wrap;
}
.receipt:last-child{border-bottom:none}
.receipt .item{font-size:18px;font-weight:600;flex:1;min-width:220px}
.receipt .item span{display:block;font-size:16px;font-weight:400;color:var(--ink-3);margin-top:2px}
.receipt .amt{font-size:19px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.receipt .saved{font-size:18px;font-weight:700;color:var(--ok);white-space:nowrap}
.receipt a{color:var(--ink-2);font-size:16px;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}

/* status pills: status only */
.pill{font-size:14px;font-weight:700;letter-spacing:.08em;padding:6px 12px;
  border-radius:20px;text-transform:uppercase;white-space:nowrap}
.pill.ok{background:var(--ok-wash);color:var(--ok)}
.pill.await{background:var(--await-wash);color:var(--await)}
.pill.stop{background:var(--stop-wash);color:var(--stop)}

/* ---------------- resting state: on duty, not empty --------------------- */
.resting{text-align:center;padding:96px 20px 84px}
.resting .head{font-size:38px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.resting .where{font-size:19px;color:var(--ink-2);margin-top:14px}
.resting .watching{
  display:inline-flex;align-items:center;gap:11px;margin-top:30px;
  padding:12px 20px;border:1px solid var(--rule-2);border-radius:24px;
  font-size:17px;font-weight:500;color:var(--ink-2);background:var(--paper-2);
}
.resting .last{
  margin-top:34px;padding-top:22px;border-top:1px solid var(--rule);
  font-size:17px;color:var(--ink-2);max-width:620px;margin-left:auto;margin-right:auto;
}
.resting .last b{color:var(--ink);font-weight:600}

/* a held/clarification notice, when something needs the sender not him */
.notice{
  margin-top:26px;padding:20px 24px;border-radius:10px;
  background:var(--await-wash);border:1px solid #E6D2A8;
}
.notice .h{font-size:19px;font-weight:700;color:var(--await)}
.notice .d{font-size:17px;color:var(--ink-2);margin-top:6px}

/* ---------------- footer: replay controls, clearly not chrome ----------- */
.foot{margin-top:66px;padding-top:20px;border-top:1px solid var(--rule)}
.foot .cap{font-size:15px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.foot .links{margin-top:12px;display:flex;gap:26px;flex-wrap:wrap}
.foot .links a{
  color:var(--ink-2);font-size:17px;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rule-2);
}
.foot .links a:hover{color:var(--ink);text-decoration-color:var(--ink-2)}
.foot .links a.busy{opacity:.4;pointer-events:none}
.foot .tag{margin-top:22px;font-size:16px;color:var(--ink-3);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

@media(max-width:720px){
  .amount{font-size:44px}
  .verdict-block .say{font-size:24px}
  .acts{grid-template-columns:1fr}
}