/* ============================================================================
   ENGINE ROOM — shared UI design system  (v1, 2026-06-08)
   The Engine Room Financial Group · brand: navy #101820 + gold #C89040 + silver.
   Drop-in stylesheet for every Engine Room operator tool (RCAP, UHC, …). The app
   is LIGHT (white cards, dark text) for data legibility, with a NAVY header band
   carrying the logo and GOLD as the primary action/accent color.

   Usage: copy this file + engine-room-logo.png into the tool's ui/ folder and
     <link rel="stylesheet" href="engine-room.css">
   Then build the standard shell markup (see the app standard doc). Tool-specific
   tweaks go in a small inline <style> AFTER this link — don't fork this file.

   Fonts are native/zero-install (no web-font downloads): Segoe UI for UI, Georgia
   (a serif nod to the logo wordmark) for the brand title + big stat numerals.
   ============================================================================ */

:root {
  /* brand */
  --navy:        #101820;   /* header band, dark surfaces, heading ink */
  --navy-2:      #161b26;   /* slightly lifted navy */
  --gold:        #c89040;   /* PRIMARY accent / action */
  --gold-deep:   #a6701f;   /* hover / pressed */
  --gold-light:  #f8c868;   /* highlights, focus glow */
  --gold-soft:   #f6ecd9;   /* gold tint background */
  --silver:      #c0c8d0;   /* secondary metallic accent */

  /* neutrals / surfaces */
  --bg:          #eef1f4;
  --surface:     #ffffff;
  --surface-2:   #f7f9fb;
  --ink:         #1b2733;
  --ink-soft:    #5b6b7b;
  --ink-faint:   #8896a4;
  --line:        #dde3ea;
  --line-strong: #c7d0da;

  /* semantic (kept distinct from brand gold for finding legibility) */
  --red:#b42318; --red-soft:#fdecea; --amber:#b54708; --amber-soft:#fdf2e6; --green:#067647; --green-soft:#e7f4ec;

  --shadow:0 1px 2px rgba(16,24,32,.06), 0 8px 28px rgba(16,24,32,.10);
  --radius:14px; --radius-sm:9px;
  --font-ui:"Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: Georgia, "Times New Roman", serif;
  font-synthesis:none;
}

* { box-sizing:border-box; }
html, body { height:100%; }
body {
  margin:0; font-family:var(--font-ui); color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; font-size:15px; line-height:1.5;
}
.er-app { min-height:100%; display:flex; flex-direction:column; align-items:center; padding:24px 20px 48px; }
.er-shell { width:100%; max-width:820px; }

/* ---------- brand header (navy band) ---------- */
header.er-brand {
  display:flex; align-items:center; gap:16px; margin-bottom:20px; padding:16px 22px;
  background:linear-gradient(160deg, var(--navy), var(--navy-2));
  border-radius:var(--radius); box-shadow:var(--shadow);
}
header.er-brand .er-logo { height:40px; width:auto; flex:none; display:block; }
header.er-brand .er-divider { width:1px; height:34px; background:rgba(255,255,255,.16); flex:none; }
header.er-brand .er-titles { display:flex; flex-direction:column; min-width:0; }
header.er-brand .er-tool { font-size:16px; font-weight:650; color:#fff; letter-spacing:-.2px; line-height:1.2; }
header.er-brand .er-sub { font-size:12.5px; color:var(--gold-light); margin-top:2px; font-weight:500; }

/* ---------- stepper ---------- */
.er-stepper { display:flex; align-items:center; gap:0; margin:0 6px 22px; }
.er-step { display:flex; align-items:center; gap:10px; flex:none; }
.er-step .dot { width:27px; height:27px; border-radius:50%; flex:none; display:grid; place-items:center; font-size:13px; font-weight:650;
  background:var(--surface); border:2px solid var(--line-strong); color:var(--ink-faint); transition:all .25s ease; }
.er-step .lbl { font-size:13px; font-weight:600; color:var(--ink-faint); white-space:nowrap; transition:color .25s; }
.er-step.active .dot { background:var(--gold); border-color:var(--gold); color:var(--navy); box-shadow:0 0 0 4px var(--gold-soft); }
.er-step.active .lbl { color:var(--ink); }
.er-step.done .dot { background:var(--gold-soft); border-color:var(--gold); color:var(--gold-deep); }
.er-step.done .lbl { color:var(--ink-soft); }
.er-stepper .bar { flex:1 1 auto; min-width:24px; height:2px; background:var(--line-strong); margin:0 14px; border-radius:2px; transition:background .25s; }
.er-stepper .bar.filled { background:var(--gold); }

/* ---------- card ---------- */
.er-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:26px 28px; }
.er-screen-title { font-size:16px; font-weight:650; margin:0 0 4px; }
.er-screen-sub { color:var(--ink-soft); font-size:13.5px; margin:0 0 22px; }
label.er-fieldlabel { display:block; font-size:13px; font-weight:600; color:var(--ink-soft); margin-bottom:7px; }

/* ---------- select ---------- */
.er-select-wrap { position:relative; }
select.er-select { width:100%; appearance:none; font:inherit; font-size:15px; color:var(--ink); padding:13px 40px 13px 14px;
  border:1.5px solid var(--line-strong); border-radius:var(--radius-sm); background:var(--surface-2); cursor:pointer; transition:border-color .15s, box-shadow .15s; }
select.er-select:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft); }
.er-select-wrap::after { content:""; position:absolute; right:16px; top:50%; width:9px; height:9px;
  border-right:2px solid var(--ink-faint); border-bottom:2px solid var(--ink-faint); transform:translateY(-65%) rotate(45deg); pointer-events:none; }
.er-hint { font-size:12.5px; color:var(--ink-faint); margin-top:7px; font-variant-numeric:tabular-nums; }
.er-hint code, code.er-code { background:var(--surface-2); padding:1px 6px; border-radius:5px; border:1px solid var(--line); font-size:12px; }

/* ---------- input checks ---------- */
.er-checks { margin-top:20px; }
.er-checks h3 { font-size:13px; font-weight:600; color:var(--ink-soft); margin:0 0 10px; }
.er-check { display:flex; align-items:center; gap:11px; padding:12px 14px; border-radius:var(--radius-sm); background:var(--surface-2); border:1px solid var(--line); margin-bottom:9px; }
.er-check .ico { width:22px; height:22px; border-radius:50%; flex:none; display:grid; place-items:center; font-size:13px; font-weight:700; }
.er-check.ok  .ico { background:var(--green-soft); color:var(--green); }
.er-check.bad .ico { background:var(--red-soft);   color:var(--red); }
.er-check.warn .ico{ background:var(--amber-soft); color:var(--amber); }
.er-check .txt { font-size:14px; } .er-check .txt small { display:block; color:var(--ink-faint); font-size:12px; }

/* ---------- buttons ---------- */
.er-actions { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:26px; }
.er-actions.end { justify-content:flex-end; }
button { font:inherit; cursor:pointer; border:none; border-radius:var(--radius-sm); transition:background .15s, box-shadow .15s, transform .05s, opacity .15s; }
button:active { transform:translateY(1px); }
.er-btn-primary { background:var(--gold); color:var(--navy); font-weight:700; font-size:15px; padding:13px 28px; box-shadow:0 4px 14px rgba(200,144,64,.32); }
.er-btn-primary:hover { background:var(--gold-deep); color:#fff; }
.er-btn-primary:disabled { background:var(--line-strong); color:#fff; box-shadow:none; cursor:not-allowed; }
.er-btn-primary .arr { margin-left:8px; }
.er-btn-ghost { background:transparent; color:var(--ink-soft); font-weight:600; padding:12px 18px; }
.er-btn-ghost:hover { background:var(--surface-2); color:var(--ink); }
.er-btn-soft { background:var(--surface); color:var(--ink); font-weight:600; padding:10px 16px; border:1.5px solid var(--line-strong); font-size:14px; }
.er-btn-soft:hover { border-color:var(--gold); color:var(--gold-deep); }
.er-btn-tiny { background:var(--surface-2); color:var(--ink-soft); font-weight:600; font-size:13px; padding:8px 13px; border:1px solid var(--line); }
.er-btn-tiny:hover { color:var(--ink); border-color:var(--line-strong); }
.er-btn-tiny.on { background:var(--gold-soft); color:var(--gold-deep); border-color:var(--gold); }

/* ---------- proof / data table ---------- */
.er-proof { border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; margin-bottom:18px; }
.er-proof .ph { display:flex; align-items:center; gap:10px; padding:12px 16px; font-weight:650; font-size:14px; }
.er-proof.pass .ph { background:var(--green-soft); color:var(--green); }
.er-proof.fail .ph { background:var(--red-soft); color:var(--red); }
table.er-table { width:100%; border-collapse:collapse; font-size:13.5px; }
table.er-table th, table.er-table td { padding:8px 16px; text-align:right; font-variant-numeric:tabular-nums; }
table.er-table th:first-child, table.er-table td:first-child { text-align:left; }
table.er-table thead th { font-size:12px; color:var(--ink-faint); font-weight:600; border-bottom:1px solid var(--line); }
table.er-table tbody td { border-bottom:1px solid var(--surface-2); }
table.er-table td.delta.warn { color:var(--amber); font-weight:650; }
table.er-table td.delta.bad  { color:var(--red);   font-weight:700; }

/* ---------- summary band ---------- */
.er-summary { display:flex; gap:22px; flex-wrap:wrap; padding:16px 18px; margin-bottom:22px;
  background:linear-gradient(180deg, var(--gold-soft), #fbf6ec); border:1px solid #ecdcbc; border-radius:var(--radius-sm); }
.er-summary .stat { display:flex; flex-direction:column; }
.er-summary .stat .n { font-family:var(--font-display); font-size:23px; font-weight:700; color:var(--navy); font-variant-numeric:tabular-nums; line-height:1.1; }
.er-summary .stat .k { font-size:12px; color:var(--ink-soft); font-weight:600; margin-top:2px; }

/* ---------- findings ---------- */
.er-section-label { font-size:13px; font-weight:700; color:var(--ink); margin:18px 0 12px; display:flex; align-items:center; gap:8px; }
.er-section-label .count { font-size:12px; padding:1px 9px; border-radius:20px; font-weight:700; }
.er-section-label .count.hard { background:var(--red-soft); color:var(--red); }
.er-section-label .count.soft { background:var(--amber-soft); color:var(--amber); }
.er-section-label .count.info { background:var(--surface-2); color:var(--ink-soft); }
.er-finding { border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px 16px; margin-bottom:11px; background:var(--surface); }
.er-finding.hard { border-left:4px solid var(--red); }
.er-finding.soft { border-left:4px solid var(--amber); }
.er-finding.info { border-left:4px solid var(--line-strong); background:var(--surface-2); }
.er-finding.resolved { border-left:4px solid var(--green); opacity:.78; }
.er-finding-head { display:flex; align-items:flex-start; gap:10px; }
.er-finding-head .tag { font-size:15px; line-height:1.3; flex:none; }
.er-finding-head .title { font-weight:650; font-size:14.5px; }
.er-finding .meta { font-size:12.5px; color:var(--ink-soft); margin-top:3px; }
.er-finding .proposal { font-size:12.5px; color:var(--gold-deep); margin-top:6px; background:var(--gold-soft); border-radius:6px; padding:6px 10px; display:inline-block; }
.er-finding-actions { display:flex; gap:9px; align-items:center; margin-top:12px; }
.er-finding-actions .spacer { flex:1; }
.er-finding-actions .state { font-size:12.5px; font-weight:650; }
.er-finding-actions .state.apply { color:var(--gold-deep); }
.er-finding-actions .state.accept { color:var(--green); }
.er-all-good { display:flex; align-items:center; gap:10px; padding:14px 16px; border-radius:var(--radius-sm); background:var(--green-soft); border:1px solid #bfe3cd; color:var(--green); font-weight:600; font-size:14px; }

/* ---------- success / done ---------- */
.er-hero { text-align:center; padding:8px 0 18px; }
.er-hero .big { width:60px; height:60px; margin:0 auto 14px; border-radius:50%; background:var(--green-soft); display:grid; place-items:center; font-size:30px; color:var(--green); box-shadow:0 0 0 6px #f0f9f3; }
.er-hero h2 { margin:0; font-size:19px; font-weight:700; }
.er-hero .where { color:var(--ink-soft); font-size:14px; margin-top:4px; }
.er-deliverable { display:flex; align-items:center; gap:12px; padding:13px 15px; border:1px solid var(--line); border-radius:var(--radius-sm); margin-bottom:9px; background:var(--surface-2); }
.er-deliverable .di { width:30px; height:30px; border-radius:8px; flex:none; display:grid; place-items:center; background:var(--gold-soft); color:var(--gold-deep); font-size:15px; }
.er-deliverable .dn { font-weight:600; font-size:14px; }
.er-deliverable .dd { font-size:12.5px; color:var(--ink-faint); }
.er-warn-box { display:flex; gap:12px; padding:14px 16px; border-radius:var(--radius-sm); background:var(--amber-soft); border:1px solid #f3dbbe; font-size:13.5px; color:#6b3a08; margin:6px 0 16px; }
.er-create-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.er-create-row .lbl { font-size:13px; color:var(--ink-soft); }

/* ---------- toast ---------- */
#er-toast { position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px); background:var(--navy); color:#fff; padding:13px 18px;
  border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.28); font-size:14px; max-width:560px; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:50; display:flex; align-items:center; gap:14px; }
#er-toast.show { opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }
#er-toast.err { background:#5b1a14; }
#er-toast button { background:rgba(255,255,255,.16); color:#fff; font-size:12.5px; padding:6px 11px; font-weight:600; }
#er-toast button:hover { background:rgba(255,255,255,.28); }

/* ---------- misc ---------- */
.er-spinner { width:16px; height:16px; border:2.5px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; display:inline-block; animation:er-spin .7s linear infinite; vertical-align:-3px; margin-right:8px; }
@keyframes er-spin { to { transform:rotate(360deg); } }
.er-hidden { display:none !important; }
.er-center-load { text-align:center; padding:40px 0; color:var(--ink-soft); }
.er-center-load .er-spinner { border-color:var(--line-strong); border-top-color:var(--gold); width:28px; height:28px; border-width:3px; }
footer.er-note { text-align:center; font-size:12px; color:var(--ink-faint); margin-top:20px; }