/* Suite look of CxLEVER tools - taken unchanged from the Software Country Log answer page
   (LeadGen Engine/client-sites/softwarecountry/site/log-answer.html, 30.10.2026), the same block as in the
   Intake and the dashboard. Shared by all Lean Forms pages; edit here only. */
:root{
  color-scheme:light;
  --bg:#F4F4F1; --soft:#FFFFFF; --tile:#F1F1EC; --fg:#2E2E2E;
  --muted:rgba(46,46,46,.58); --border:rgba(46,46,46,.16); --grid:rgba(46,46,46,.10);
  --track:#E4E4DE; --skel1:#ECECE7; --skel2:#F6F6F2;
  --accent:#EAFB0E; --accent-ink:#2E2E2E; --on-accent:#2E2E2E; --good:#1B7F3B; --bad:#B3261E; --li:#1F5FA8;
  --radius:10px; --font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#2E2E2E; --soft:#2D2D2D; --tile:#333; --fg:#D0D0D0;
  --muted:rgba(208,208,208,.6); --border:rgba(208,208,208,.18); --grid:rgba(208,208,208,.10);
  --track:#3a3a3a; --skel1:#333; --skel2:#3a3a3a;
  --accent:#EAFB0E; --accent-ink:#EAFB0E; --on-accent:#2E2E2E; --good:#7fe0a8; --bad:#ff7b7b; --li:#7fb3ff;
}
html,body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:14px}
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:12px 18px;background:var(--bg);border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:10px}
.icon-btn{background:transparent;border:1px solid transparent;border-radius:8px;cursor:pointer;padding:6px 9px;color:var(--fg);display:flex;align-items:center;gap:6px;font-family:var(--font);font-size:12.5px;font-weight:600}
.icon-btn:hover,.icon-btn.on{border-color:var(--accent-ink);color:var(--accent-ink)}
.icon-btn[hidden]{display:none!important}
a.icon-btn{text-decoration:none}
.icon-btn svg{stroke:var(--accent-ink)}
/* ── Suite header and page head (06.10.2026) ─────────────────────────────────────────────────────────────────────────
   The SAME block, character for character, in CxLEVER Intake (input-mask.html) and in the LeadGen Engine Performance
   dashboard (cxlever-leadgen-performance.html). Tim, 05.10.2026: "make the headers of both ... in exactly the same style
   and similar structure ... the titles ... on the same level ... the same spacings". Change one, copy it to the other.
   Left: the CxLEVER badge, the app name in the accent ink, the client in muted grey. Right: the page's own tools, then
   the three suite places in the same order on both pages (Intake | Dashboard | Log answer, the page you are on as a lime
   pill), then day/night. Labels give way to icons step by step when the window gets narrow, never the buttons. */
.suite-head{position:sticky;top:0;z-index:40;display:block;padding:0;background:var(--bg);border-bottom:1px solid var(--border);backdrop-filter:none}
/* 08.10.2026 (Tim: "why still not on the same line?"): every word in the row stands on ONE baseline - the CxLEVER
   wordmark (the bottom of the logo image is its baseline), the app name, the client and every button label. Before,
   each box was centred on its own, so the bigger wordmark sat 4-6 px lower than the labels. The row aligns on the
   baseline; every button carries an invisible text strut (::before), so a button showing only its icon keeps the same
   baseline; the separators are centred. The logo's top padding hangs into the row padding (margin-top:-4px), so the
   buttons keep their place and the row keeps its height (59 px); 14 px above, 11 px below centre the whole group. */
.suite-row{display:flex;align-items:baseline;gap:2px;max-width:none;margin:0;padding:14px 18px 11px;min-height:59px;box-sizing:border-box}
.suite-brand{display:flex;align-items:baseline;gap:12px;min-width:0;flex:0 1 auto;margin:0 auto 0 0}
.suite-brand .mark{display:inline-flex;align-items:flex-end;flex:none;background:#2E2E2E;border-radius:7px;padding:4px 9px;margin-top:-4px;cursor:pointer}
.suite-brand .brand-logo{display:block;height:20px;width:auto}
.suite-name{margin:0;padding:0;font-family:var(--font);font-size:16px;font-weight:700;line-height:1.2;letter-spacing:0;color:var(--accent-ink);white-space:nowrap;cursor:pointer}
.suite-client{min-width:0;font-size:13px;font-weight:500;line-height:1.2;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.suite-tools,.suite-apps{display:flex;align-items:baseline;gap:2px;flex:none}
.suite-sep{flex:none;align-self:center;width:1px;height:22px;margin:0 8px;background:var(--border)}
.suite-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;box-sizing:border-box;height:34px;min-height:34px;min-width:0;margin:0;padding:0 10px;
  border:1px solid transparent;border-radius:8px;background:transparent;box-shadow:none;color:var(--fg);font-family:var(--font);font-size:13px;font-weight:600;line-height:1;
  letter-spacing:0;text-decoration:none;white-space:nowrap;cursor:pointer}
.suite-btn:hover,.suite-btn.on{background:transparent;border-color:var(--accent-ink);color:var(--accent-ink)}
.suite-btn::before{content:"\200b";flex:none;width:0;margin-right:-6px;overflow:hidden}
.suite-btn svg{display:block;flex:none;width:18px;height:18px;fill:none;stroke:var(--accent-ink)}
.suite-btn[hidden],.suite-apps[hidden],.suite-sep[hidden]{display:none!important}
.suite-btn.icon-only{width:34px;padding:0}
.suite-btn.current,.suite-btn.current:hover{background:var(--accent);border-color:var(--on-accent);color:var(--on-accent);cursor:default}
.suite-btn.current svg{stroke:var(--on-accent)}
.suite-head .role-badge{margin:0 6px 0 0}
/* labels give way to icons only when the row does not fit (suiteFit() sets fit1..fit3): first the page's own tools,
   then the client and the labels of the suite places, then the app name; a phone also gets the smaller logo */
.suite-row.fit1 .suite-tools .suite-btn .lbl{display:none}.suite-row.fit1 .suite-tools .suite-btn{width:34px;padding:0}
.suite-row.fit2 .suite-client{display:none}.suite-row.fit2 .suite-apps .suite-btn .lbl{display:none}.suite-row.fit2 .suite-apps .suite-btn{width:34px;padding:0}
.suite-row.fit3 .suite-name{display:none}.suite-row.fit3 .suite-apps .suite-btn.current{display:none}
@media(max-width:600px){.suite-row{padding:10px 12px;min-height:52px}.suite-sep{margin:0 3px}.suite-brand .brand-logo{height:16px}.suite-brand .mark{padding:4px 6px}}
/* the page head under it: the title 36 px below the header line on both pages, the lead line in the same grey and size */
.view-title{margin:16px 0 14px;padding:0;font-family:var(--font);font-size:20px;font-weight:800;line-height:1.3;letter-spacing:-.2px;color:var(--accent-ink)}
.lead,.clientline{margin:0 0 16px;max-width:none;font-size:13px;line-height:1.6;color:var(--muted)}
.lead b,.clientline b{color:var(--fg);font-weight:700}
/* ── end of the suite block ── */
.footer{padding:18px 0 8px;border-top:1px solid var(--border);margin-top:22px;text-align:center;font-size:12px;color:var(--muted);line-height:1.7}.footer .ver{display:block;font-size:11px;margin-top:4px}.footer a{font-weight:650}.heart{color:var(--accent-ink)}
/* 02.10.2026: heart and "overtools" in the footer in the corporate lime (the thin dark outline of that day was replaced on 05.10.2026, below) */
.footer a,.footer .heart{color:var(--accent)}
/* 05.10.2026 (Tim): the outlined lime letters looked bad on the light background. The lime is now a surface, like the
   lime CxL square: "overtools" is ink on a lime pill, the heart a drawn lime heart with a crisp ink outline on light
   (none on dark). Same as CxLEVER Intake 2.9.7. */
.footer a{display:inline-block;background:var(--accent);color:var(--on-accent);font-weight:700;text-decoration:none;border-radius:6px;padding:0 7px 1px;margin-left:2px;line-height:1.55}
.footer a:hover{text-decoration:underline}
.footer .heart{display:inline-block;width:12px;height:12px;vertical-align:-1px;margin:0 1px}
.footer .heart svg{display:block;width:100%;height:100%}
.footer .heart path{fill:var(--accent);stroke:var(--fg);stroke-width:1.6;stroke-linejoin:round}
html[data-theme="dark"] .footer .heart path{stroke:none}
html:not([data-theme="dark"]) .footer a{box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}   /* the dashboard's thin edge on the lime pill */