/* =====================================================================
IQ Suite tool kit (iq-kit.css)
One template for the product tool pages and their review screens:
ReconcileIQ /tool + /results, LedgerIQ /ledgerIQ, CodeIQ /CodeIQ-preview,
then the CodeIQ app and PrepIQ. The base is the IQ Books editorial
language (cream canvas, white panels, warm hairlines, 2px radius, ink
type, Fraunces / DM Sans / JetBrains Mono); each product only swaps the
brand hue through [data-brand].
Opt in:
plus
LAST in , followed by the one-line kill switch.
Roll back: ?kit=off (sticky per browser, ?kit=on undoes it) disables
this sheet before first paint. Git tag ui-kit-baseline-20260925
is the pre-kit state of every page.
Specificity: every rule is prefixed with .iq-kit:is(body,#iqk#iqk)
The :is() argument #iqk#iqk weighs two ids and never matches anything,
while `body` makes the :is() match, so each kit rule outranks the legacy
page CSS (single-id selectors at most) with no !important. !important
appears only where it answers a legacy !important or an inline style
written by page JS. No @layer: unlayered legacy CSS beats every layer.
Units are px on purpose: tool.html and CodeIQ-preview set
:root{font-size:80%}, ledgerIQ does not, so rem would render one
template at two sizes.
Never put transform / filter / backdrop-filter / will-change on body,
main or any page container: it becomes the containing block for every
position:fixed modal inside it. Never size overlays with vh: zoom.css
renders vh 15% short. Use inset:0.
===================================================================== */
/* ---------- 1. Tokens (tool pages .iq-kit, the CodeIQ app .iq-kit-app, PrepIQ .iq-kit-wps) ---------- */
body:is(.iq-kit, .iq-kit-app, .iq-kit-wps) {
--k-canvas: #faf8f5;
--k-panel: #ffffff;
--k-band: #f7f4ee;
--k-band-2: #f1ede5;
--k-line: #e4dfd5;
--k-line-strong: #c9c2b5;
--k-line-soft: #efeae1;
--k-ink: #1a1a1a;
--k-ink-soft: #3d3a34;
--k-muted: #6b6459;
--k-faint: #8a8377;
--k-ok: #2d7953;
--k-ok-wash: #e8f3ec;
--k-warn: #9a5b12;
--k-warn-wash: #fbf1e1;
--k-bad: #b0413e;
--k-bad-wash: #f9e9e7;
--k-serif: 'Fraunces', Georgia, serif;
--k-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--k-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
--k-r: 2px;
--k-pop: 0 18px 48px rgba(26, 22, 15, 0.16), 0 2px 6px rgba(26, 22, 15, 0.06);
--k-ease: cubic-bezier(0.2, 0.8, 0.3, 1);
--k-bar: 60px;
/* brand: ReconcileIQ is the default */
--brand: #5b6eae;
--brand-deep: #3d4d7a;
--brand-ink: #4d6099;
--brand-wash: #eef0f8;
--brand-line: #c9d0e6;
--brand-hover: #33416a;
}
body:is(.iq-kit, .iq-kit-app, .iq-kit-wps)[data-brand="ledgeriq"] {
--brand: #4a9080; --brand-deep: #2d5a50; --brand-ink: #387064;
--brand-wash: #e8f3ef; --brand-line: #bcd9d1; --brand-hover: #244a42;
}
body:is(.iq-kit, .iq-kit-app, .iq-kit-wps)[data-brand="codeiq"] {
--brand: #c4576a; --brand-deep: #9a4054; --brand-ink: #b84f62;
--brand-wash: #fbecee; --brand-line: #eac4cb; --brand-hover: #823546;
}
body:is(.iq-kit, .iq-kit-app, .iq-kit-wps)[data-brand="prepiq"] {
--brand: #b98a3c; --brand-deep: #7e5a22; --brand-ink: #7e5a22;
--brand-wash: #f5edda; --brand-line: #e3d2ad; --brand-hover: #5f4218;
}
/* ---------- 2. Page base ---------- */
.iq-kit:is(body,#iqk#iqk) {
background: var(--k-canvas);
color: var(--k-ink);
font-family: var(--k-sans);
font-size: 15px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
.iq-kit:is(body,#iqk#iqk) :focus-visible {
outline: 2px solid var(--brand);
outline-offset: 2px;
}
.iq-kit:is(body,#iqk#iqk) ::selection { background: var(--brand-wash); }
/* ---------- 3. Primitives ---------- */
/* Buttons: one shape (2px), three weights. */
.iq-kit:is(body,#iqk#iqk) .k-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 38px;
padding: 0 16px;
border: 1px solid var(--k-line-strong);
border-radius: var(--k-r);
background: var(--k-panel);
color: var(--k-ink);
font-family: var(--k-sans);
font-size: 14px;
font-weight: 500;
line-height: 1;
letter-spacing: 0;
text-transform: none;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
box-shadow: none;
transform: none;
transition: background 0.14s var(--k-ease), border-color 0.14s var(--k-ease), color 0.14s var(--k-ease);
}
.iq-kit:is(body,#iqk#iqk) .k-btn:hover {
background: var(--k-band);
border-color: var(--k-ink-soft);
color: var(--k-ink);
transform: none;
box-shadow: none;
}
.iq-kit:is(body,#iqk#iqk) .k-btn:active { background: var(--k-band-2); }
.iq-kit:is(body,#iqk#iqk) .k-btn:disabled,
.iq-kit:is(body,#iqk#iqk) .k-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.iq-kit:is(body,#iqk#iqk) .k-btn svg,
.iq-kit:is(body,#iqk#iqk) .k-btn i { width: 16px; height: 16px; flex-shrink: 0; }
.iq-kit:is(body,#iqk#iqk) .k-btn::before,
.iq-kit:is(body,#iqk#iqk) .k-btn::after { content: none; display: none; }
.iq-kit:is(body,#iqk#iqk) .k-btn > span:empty { display: none; }
.iq-kit:is(body,#iqk#iqk) .k-btn--primary {
background: var(--brand-deep);
border-color: var(--brand-deep);
color: #fff;
}
.iq-kit:is(body,#iqk#iqk) .k-btn--primary:hover {
background: var(--brand-hover);
border-color: var(--brand-hover);
color: #fff;
}
.iq-kit:is(body,#iqk#iqk) .k-btn--quiet {
border-color: transparent;
background: transparent;
color: var(--k-ink-soft);
}
.iq-kit:is(body,#iqk#iqk) .k-btn--quiet:hover {
background: var(--k-band);
border-color: transparent;
}
.iq-kit:is(body,#iqk#iqk) .k-btn--sm { height: 32px; padding: 0 12px; font-size: 13px; }
.iq-kit:is(body,#iqk#iqk) .k-eyebrow {
display: block;
font-family: var(--k-mono);
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--k-muted);
}
.iq-kit:is(body,#iqk#iqk) .k-tag {
display: inline-flex;
align-items: center;
height: 20px;
padding: 0 7px;
border-radius: var(--k-r);
background: var(--brand-wash);
color: var(--brand-deep);
font-family: var(--k-mono);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.iq-kit:is(body,#iqk#iqk) .k-wordmark {
font-family: var(--k-serif);
font-weight: 500;
letter-spacing: -0.01em;
color: var(--k-ink);
}
.iq-kit:is(body,#iqk#iqk) .k-wordmark em {
font-style: italic;
color: var(--brand);
}
/* ---------- 4. Top bar ---------- */
.iq-kit:is(body,#iqk#iqk):has(> .k-topbar) { padding-top: var(--k-bar); }
.iq-kit:is(body,#iqk#iqk) .k-topbar {
position: fixed;
top: 0; left: 0; right: 0;
width: auto;
height: var(--k-bar);
display: flex;
align-items: center;
gap: 24px;
padding: 0 24px 0 76px;
background: var(--k-panel);
color: var(--k-ink);
border-bottom: 1px solid var(--k-line);
box-shadow: none;
overflow: visible;
z-index: 10000;
}
.iq-kit:is(body,#iqk#iqk) .k-topbar::before,
.iq-kit:is(body,#iqk#iqk) .k-topbar::after { content: none; display: none; }
.iq-kit:is(body,#iqk#iqk) .k-topbar .brand { margin: 0; font-size: inherit; }
.iq-kit:is(body,#iqk#iqk) .k-topbar .brand a {
display: inline-flex;
align-items: baseline;
font-size: 21px;
line-height: 1;
text-decoration: none;
padding: 0;
background: none;
}
.iq-kit:is(body,#iqk#iqk) .k-topbar nav.top-nav {
display: flex;
align-items: center;
gap: 4px;
margin: 0 0 0 auto;
padding: 0;
flex: 1 1 auto;
justify-content: flex-end;
}
.iq-kit:is(body,#iqk#iqk) .k-topbar .nav-links,
.iq-kit:is(body,#iqk#iqk) .k-topbar .nav-right-items {
display: flex;
align-items: center;
gap: 4px;
margin: 0;
}
.iq-kit:is(body,#iqk#iqk) .k-topbar .nav-right-items {
margin-left: 8px;
padding-left: 12px;
border-left: 1px solid var(--k-line);
}
.iq-kit:is(body,#iqk#iqk) .k-topbar nav.top-nav a:not(.k-btn),
.iq-kit:is(body,#iqk#iqk) .k-topbar nav.top-nav .nav-right-items a {
display: inline-flex;
align-items: center;
height: 32px;
padding: 0 10px;
margin: 0;
border: 0;
border-radius: var(--k-r);
background: transparent;
color: var(--k-ink-soft);
font-family: var(--k-sans);
font-size: 14px;
font-weight: 500;
text-decoration: none;
box-shadow: none;
transform: none;
}
.iq-kit:is(body,#iqk#iqk) .k-topbar nav.top-nav a:not(.k-btn):hover,
.iq-kit:is(body,#iqk#iqk) .k-topbar nav.top-nav .nav-right-items a:hover {
background: var(--k-band);
color: var(--k-ink);
}
.iq-kit:is(body,#iqk#iqk) .k-topbar nav.top-nav a.k-btn { margin: 0 0 0 4px; }
/* page JS shows these with an inline display:block; keep them flex so labels centre */
.iq-kit:is(body,#iqk#iqk) .k-topbar a.k-btn:not([style*="none"]) { display: inline-flex !important; }
.iq-kit:is(body,#iqk#iqk) .k-topbar #userInfo {
align-items: center;
gap: 2px;
margin: 0 4px;
}
.iq-kit:is(body,#iqk#iqk) .k-topbar #userInfo[style*="block"],
.iq-kit:is(body,#iqk#iqk) .k-topbar #userInfo[style*="flex"] { display: inline-flex !important; }
.iq-kit:is(body,#iqk#iqk) .k-topbar #userGreeting {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0 8px 0 0;
color: var(--k-ink);
font-size: 14px;
font-weight: 500;
background: none;
}
.iq-kit:is(body,#iqk#iqk) .k-topbar #userSettingsIcon { width: 32px; justify-content: center; padding: 0; }
.iq-kit:is(body,#iqk#iqk) .k-topbar #userSettingsIcon svg { width: 18px; height: 18px; color: var(--k-muted); }
.iq-kit:is(body,#iqk#iqk) .k-topbar .mobile-menu-toggle {
color: var(--k-ink-soft);
background: none;
border: 0;
margin: 0;
}
/* Language picker: Windows cannot draw flag emoji, so the kit shows the
language code instead (language-selector.js renders both). */
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .lang-toggle {
display: inline-flex;
align-items: center;
gap: 4px;
height: 32px;
padding: 0 8px;
border: 1px solid transparent;
border-radius: var(--k-r);
background: transparent;
box-shadow: none;
color: var(--k-ink-soft);
}
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .lang-toggle:hover { background: var(--k-band); border-color: transparent; }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .lang-toggle .lang-flag { display: none; }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .lang-toggle .lang-code {
display: inline;
font-family: var(--k-mono);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.06em;
}
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .lang-dropdown {
border: 1px solid var(--k-line);
border-radius: var(--k-r);
box-shadow: var(--k-pop);
background: var(--k-panel);
}
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .lang-option { border-radius: var(--k-r); font-family: var(--k-sans); }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .lang-option:hover { background: var(--k-band); }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .lang-option.active { background: var(--brand-wash); color: var(--brand-deep); }
/* ---------- 5. Side drawer ---------- */
.iq-kit:is(body,#iqk#iqk) .sidebar-toggle {
top: calc(var(--k-bar) / 2 - 17px);
left: 20px;
width: 34px;
height: 34px;
border: 1px solid var(--k-line);
border-radius: var(--k-r);
background: var(--k-panel);
box-shadow: none;
z-index: 10001;
}
.iq-kit:is(body,#iqk#iqk) .sidebar-toggle:hover { background: var(--k-band); border-color: var(--k-line-strong); }
.iq-kit:is(body,#iqk#iqk) .sidebar-toggle svg { width: 17px; height: 17px; color: var(--k-ink-soft); }
.iq-kit:is(body,#iqk#iqk) aside.sidebar {
top: var(--k-bar);
bottom: 0;
height: auto;
width: 272px;
left: -290px;
padding: 24px 16px;
background: var(--k-panel);
border-right: 1px solid var(--k-line);
box-shadow: none;
}
.iq-kit:is(body,#iqk#iqk) aside.sidebar.active { left: 0; box-shadow: var(--k-pop); }
.iq-kit:is(body,#iqk#iqk) aside.sidebar .logo-section {
padding: 0 12px 18px;
margin: 0 0 12px;
border-bottom: 1px solid var(--k-line);
}
.iq-kit:is(body,#iqk#iqk) aside.sidebar .logo-title { margin: 0; font-size: 19px; }
.iq-kit:is(body,#iqk#iqk) aside.sidebar .brand-mark { font-family: var(--k-serif); font-weight: 500; color: var(--k-ink); }
.iq-kit:is(body,#iqk#iqk) aside.sidebar .brand-mark em { font-style: italic; color: var(--brand); }
.iq-kit:is(body,#iqk#iqk) aside.sidebar .nav-list { list-style: none; margin: 0; padding: 0; gap: 1px; }
.iq-kit:is(body,#iqk#iqk) aside.sidebar .nav-link {
padding: 9px 12px;
border-radius: var(--k-r);
color: var(--k-ink-soft);
font-size: 14.5px;
font-weight: 500;
background: transparent;
}
.iq-kit:is(body,#iqk#iqk) aside.sidebar .nav-link:hover { background: var(--k-band); color: var(--k-ink); }
.iq-kit:is(body,#iqk#iqk) aside.sidebar .support-link {
margin-top: 16px;
justify-content: center;
border: 1px solid var(--k-line-strong);
background: var(--k-panel);
color: var(--k-ink);
}
.iq-kit:is(body,#iqk#iqk) aside.sidebar .support-link:hover { background: var(--k-band); }
.iq-kit:is(body,#iqk#iqk) #sidebarOverlay {
background: rgba(26, 22, 15, 0.28);
backdrop-filter: none;
}
/* ---------- 6. Tool page template ---------- */
.iq-kit:is(body,#iqk#iqk) main.main-content {
position: relative; /* anchors .k-utility on every tool page */
padding: 28px 24px 96px;
background: var(--k-canvas);
min-height: 0;
}
.iq-kit:is(body,#iqk#iqk) .tool-container { max-width: 880px; margin: 0 auto; }
/* 6a. Utility row: product switcher centred, page tools at the side */
.iq-kit:is(body,#iqk#iqk) .k-utility {
position: absolute;
top: 33px; /* centred on the product switcher row */
left: 24px;
margin: 0;
z-index: 5;
}
.iq-kit:is(body,#iqk#iqk) .k-utility .k-btn { box-shadow: none; }
.iq-kit:is(body,#iqk#iqk) .k-switcher-wrap { display: flex; justify-content: center; margin: 0 0 40px; }
.iq-kit:is(body,#iqk#iqk) .k-switcher {
display: inline-flex;
gap: 2px;
padding: 3px;
border: 1px solid var(--k-line);
border-radius: var(--k-r);
background: var(--k-band);
box-shadow: none;
}
.iq-kit:is(body,#iqk#iqk) .k-switcher button {
height: 34px;
padding: 0 18px;
border: 1px solid transparent;
border-radius: var(--k-r);
background: transparent;
color: var(--k-muted);
font-family: var(--k-serif);
font-size: 15px;
font-weight: 500;
letter-spacing: -0.005em;
box-shadow: none;
transform: none;
cursor: pointer;
transition: background 0.14s var(--k-ease), color 0.14s var(--k-ease);
}
.iq-kit:is(body,#iqk#iqk) .k-switcher button em { font-style: italic; }
.iq-kit:is(body,#iqk#iqk) .k-switcher .reconcileiq-tab em { color: #5b6eae; }
.iq-kit:is(body,#iqk#iqk) .k-switcher .ledgeriq-tab em { color: #4a9080; }
.iq-kit:is(body,#iqk#iqk) .k-switcher .codeiq-tab em { color: #c4576a; }
.iq-kit:is(body,#iqk#iqk) .k-switcher button:hover { background: var(--k-panel); color: var(--k-ink); }
.iq-kit:is(body,#iqk#iqk) .k-switcher button.active {
background: var(--k-panel);
border-color: var(--k-line);
color: var(--k-ink);
box-shadow: 0 1px 0 rgba(26, 22, 15, 0.04);
}
/* 6b. Hero */
.iq-kit:is(body,#iqk#iqk) .k-hero { text-align: center; margin: 0 0 28px; padding: 0 0 32px; border-bottom: 1px solid var(--k-line); }
.iq-kit:is(body,#iqk#iqk) .k-hero .k-eyebrow { margin: 0 0 14px; }
.iq-kit:is(body,#iqk#iqk) .k-hero .header-title { margin: 0; line-height: 1; }
.iq-kit:is(body,#iqk#iqk) .k-hero .header-title .brand-mark {
/* .header-image caps this at 280px (it used to be an ![]()
): at 64px the
text overflowed the box to the right and the mark sat off centre */
display: inline-block;
width: auto;
max-width: none;
margin: 0;
font-family: var(--k-serif);
font-size: 64px;
font-weight: 400;
letter-spacing: -0.025em;
color: var(--k-ink);
line-height: 1;
}
.iq-kit:is(body,#iqk#iqk) .k-hero .header-title .brand-mark em { font-style: italic; color: var(--brand); }
.iq-kit:is(body,#iqk#iqk) .k-hero .tier-display {
margin: 18px auto 0;
height: 24px;
padding: 0 10px;
border: 1px solid var(--k-line);
border-radius: var(--k-r);
background: var(--k-panel);
box-shadow: none;
font-family: var(--k-mono);
font-size: 11px;
letter-spacing: 0.12em;
color: var(--k-ink-soft);
}
.iq-kit:is(body,#iqk#iqk) .k-hero .tier-display::before { box-shadow: none; }
.iq-kit:is(body,#iqk#iqk) .k-hero .header-description {
max-width: 560px;
margin: 18px auto 0;
font-family: var(--k-serif);
font-style: italic;
font-size: 19px;
font-weight: 400;
line-height: 1.45;
color: var(--k-ink-soft);
}
.iq-kit:is(body,#iqk#iqk) .k-hero .header-guarantee {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 14px 0 0;
padding: 0;
border: 0;
background: none;
color: var(--k-muted);
font-size: 13.5px;
}
.iq-kit:is(body,#iqk#iqk) .k-hero .header-guarantee svg { width: 16px; height: 16px; color: var(--k-ok); }
.iq-kit:is(body,#iqk#iqk) .k-hero .header-actions { display: flex; justify-content: center; gap: 8px; margin: 22px 0 0; }
/* a product whose mark is an image asset (CodeIQ): same slot, same height as the text marks */
.iq-kit:is(body,#iqk#iqk) .k-hero .k-mark { display: flex; justify-content: center; margin: 0; }
.iq-kit:is(body,#iqk#iqk) .k-hero .k-mark img { display: block; width: auto; max-width: none; height: 64px; margin: 0; }
.iq-kit:is(body,#iqk#iqk) .k-hero h1.k-eyebrow { margin: 0 0 18px; font-family: var(--k-mono); font-size: 11.5px; font-weight: 500; line-height: 1.5; letter-spacing: 0.16em; color: var(--k-muted); }
.iq-kit:is(body,#iqk#iqk) .k-panel-title { margin: 0 0 10px; font-family: var(--k-serif); font-size: 26px; font-weight: 400; letter-spacing: -0.015em; line-height: 1.2; color: var(--k-ink); text-align: left; }
.iq-kit:is(body,#iqk#iqk) .k-panel-text { margin: 0 0 24px; max-width: none; color: var(--k-ink-soft); font-size: 15px; line-height: 1.65; text-align: left; }
.iq-kit:is(body,#iqk#iqk) a.k-cta { text-decoration: none; }
.iq-kit:is(body,#iqk#iqk) a.k-cta:hover { color: #fff; }
/* 6c. Notes (referral and similar one-liners) */
.iq-kit:is(body,#iqk#iqk) .k-note {
margin: 0 0 16px;
padding: 0;
border: 1px solid var(--k-line);
border-radius: var(--k-r);
background: var(--k-band);
box-shadow: none;
}
.iq-kit:is(body,#iqk#iqk) .k-note a {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 16px;
color: var(--k-ink-soft);
font-size: 13.5px;
font-weight: 500;
text-decoration: none;
background: none;
}
.iq-kit:is(body,#iqk#iqk) .k-note a:hover { color: var(--brand-deep); }
.iq-kit:is(body,#iqk#iqk) .k-note svg { width: 15px; height: 15px; color: var(--brand-ink); }
/* 6d. The work panel */
.iq-kit:is(body,#iqk#iqk) .k-panel {
position: relative;
margin: 0;
padding: 28px 32px 32px;
border: 1px solid var(--k-line);
border-radius: var(--k-r);
background: var(--k-panel);
box-shadow: 0 1px 0 rgba(26, 22, 15, 0.03);
}
.iq-kit:is(body,#iqk#iqk) .k-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin: 0 0 18px;
}
/* View History rides on the credit meter's label row, top right */
.iq-kit:is(body,#iqk#iqk) .k-panel .view-history-tab {
position: absolute;
top: 20px;
right: 24px;
margin: 0;
transform: none;
z-index: 2;
}
.iq-kit:is(body,#iqk#iqk) .k-panel .view-history-tab svg { width: 15px; height: 15px; }
/* 6e. Credit meter */
.iq-kit:is(body,#iqk#iqk) .k-meter {
margin: 0 0 8px;
padding: 0 0 22px;
border: 0;
border-bottom: 1px solid var(--k-line-soft);
border-radius: 0;
background: none;
box-shadow: none;
}
.iq-kit:is(body,#iqk#iqk) .k-meter .credits-progress-container {
display: flex;
flex-direction: column-reverse;
gap: 8px;
margin: 0 0 16px;
padding: 0;
height: auto;
background: none;
border: 0;
position: relative;
}
.iq-kit:is(body,#iqk#iqk) .k-meter .credits-progress-container::before {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 3px;
background: var(--k-line-soft);
}
.iq-kit:is(body,#iqk#iqk) .k-meter .credits-progress-bar {
position: relative;
height: 3px;
min-width: 2px;
border-radius: 0;
background: var(--brand);
box-shadow: none;
z-index: 1;
}
.iq-kit:is(body,#iqk#iqk) .k-meter .credits-progress-info {
position: static;
display: flex;
justify-content: flex-start;
align-items: baseline;
gap: 14px;
min-height: 24px;
padding-right: 140px;
transform: none;
}
.iq-kit:is(body,#iqk#iqk) .k-meter .credits-progress-info::before {
content: 'Credits';
font-family: var(--k-mono);
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--k-muted);
}
.iq-kit:is(body,#iqk#iqk) #creditsProgressText {
font-family: var(--k-mono);
font-size: 12px;
letter-spacing: 0.02em;
text-transform: none;
color: var(--k-ink-soft);
background: none;
text-shadow: none;
}
.iq-kit:is(body,#iqk#iqk) .k-meter .credit-counts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
margin: 0;
border: 0;
}
.iq-kit:is(body,#iqk#iqk) .k-meter .credit-item {
display: flex;
flex-direction: column;
gap: 4px;
margin: 0;
padding: 0 20px 0 0;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
}
.iq-kit:is(body,#iqk#iqk) .k-meter .credit-item + .credit-item {
padding: 0 0 0 20px;
border-left: 1px solid var(--k-line-soft);
}
.iq-kit:is(body,#iqk#iqk) .k-meter .credit-label {
font-family: var(--k-sans);
font-size: 12.5px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: var(--k-muted);
}
.iq-kit:is(body,#iqk#iqk) .k-meter .credit-value {
font-family: var(--k-sans);
font-size: 14px;
color: var(--k-muted);
}
.iq-kit:is(body,#iqk#iqk) .k-meter .credit-value > span,
.iq-kit:is(body,#iqk#iqk) #monthlyCredits,
.iq-kit:is(body,#iqk#iqk) #bonusCredits,
.iq-kit:is(body,#iqk#iqk) #creditsUsed {
font-family: var(--k-mono);
font-size: 15px;
font-weight: 500;
color: var(--k-ink);
background: none;
}
.iq-kit:is(body,#iqk#iqk) #creditsUsed { font-size: 13px; color: var(--k-ink-soft); }
.iq-kit:is(body,#iqk#iqk) .k-meter .low-credits,
.iq-kit:is(body,#iqk#iqk) .k-meter .low-credits span { color: var(--k-bad); }
.iq-kit:is(body,#iqk#iqk) .k-meter .credit-upsell { margin: 14px 0 0; padding: 0; border: 0; background: none; text-align: left; }
.iq-kit:is(body,#iqk#iqk) .k-meter .credit-upsell-link {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0;
border: 0;
background: none;
color: var(--brand-ink);
font-size: 13.5px;
font-weight: 500;
text-decoration: none;
}
.iq-kit:is(body,#iqk#iqk) .k-meter .credit-upsell-link:hover { text-decoration: underline; }
.iq-kit:is(body,#iqk#iqk) .k-meter .credit-upsell-link svg { width: 14px; height: 14px; }
/* 6f. Upload rows */
.iq-kit:is(body,#iqk#iqk) .k-panel .file-upload-section { padding: 0; margin: 0; border: 0; background: none; box-shadow: none; }
.iq-kit:is(body,#iqk#iqk) .k-panel .file-input-container { margin: 0 0 14px; padding: 0; border: 0; background: none; }
.iq-kit:is(body,#iqk#iqk) .k-drop {
display: grid;
grid-template-columns: 40px minmax(0, 1fr) auto;
grid-template-areas: "icon title btn" "icon hint btn";
column-gap: 16px;
row-gap: 2px;
align-items: center;
min-height: 72px;
margin: 0;
padding: 14px 16px 14px 16px;
border: 1px solid var(--k-line);
border-left-width: 1px;
border-radius: var(--k-r);
background: var(--k-panel);
box-shadow: none;
cursor: pointer;
transform: none;
transition: border-color 0.14s var(--k-ease), background 0.14s var(--k-ease);
}
.iq-kit:is(body,#iqk#iqk) .k-drop::before,
.iq-kit:is(body,#iqk#iqk) .k-drop::after { content: none; display: none; }
.iq-kit:is(body,#iqk#iqk) .k-drop:hover { border-color: var(--brand-line); background: #fdfcfa; transform: none; box-shadow: none; }
.iq-kit:is(body,#iqk#iqk) .k-drop.drag-over {
border-color: var(--brand);
border-style: dashed;
background: var(--brand-wash);
}
.iq-kit:is(body,#iqk#iqk) .k-drop .file-icon {
grid-area: icon;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
margin: 0;
border: 1px solid var(--k-line);
border-radius: var(--k-r);
background: var(--k-band);
color: var(--brand-ink);
}
.iq-kit:is(body,#iqk#iqk) .k-drop .file-icon svg { width: 18px; height: 18px; color: var(--brand-ink); }
.iq-kit:is(body,#iqk#iqk) .k-drop .file-text {
grid-area: title;
align-self: end;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--k-ink);
font-family: var(--k-sans);
font-size: 15px;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
}
.iq-kit:is(body,#iqk#iqk) .k-drop .file-disclosure {
grid-area: hint;
align-self: start;
display: block;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--k-muted);
font-family: var(--k-sans);
font-size: 13px;
letter-spacing: 0;
text-transform: none;
}
.iq-kit:is(body,#iqk#iqk) .k-drop .file-button {
grid-area: btn;
display: inline-flex;
align-items: center;
height: 34px;
padding: 0 14px;
border: 1px solid var(--k-line-strong);
border-radius: var(--k-r);
background: var(--k-panel);
color: var(--k-ink);
font-family: var(--k-sans);
font-size: 13.5px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
box-shadow: none;
}
.iq-kit:is(body,#iqk#iqk) .k-drop:hover .file-button { border-color: var(--k-ink-soft); background: var(--k-band); }
.iq-kit:is(body,#iqk#iqk) .k-panel .file-name {
display: block;
margin: 6px 0 0 73px;
padding: 0;
color: var(--k-faint);
font-family: var(--k-mono);
font-size: 12px;
letter-spacing: 0;
background: none;
border: 0;
}
/* PDF converter, opened from its quiet link */
.iq-kit:is(body,#iqk#iqk) .pdf-toggle-link {
display: inline-flex;
align-items: center;
gap: 8px;
height: 32px;
margin: 0 0 12px;
padding: 0 10px 0 8px;
border: 1px solid transparent;
border-radius: var(--k-r);
background: transparent;
color: var(--brand-ink);
font-size: 13.5px;
font-weight: 500;
text-decoration: none;
box-shadow: none;
}
.iq-kit:is(body,#iqk#iqk) .pdf-toggle-link:hover { background: var(--brand-wash); }
.iq-kit:is(body,#iqk#iqk) .pdf-toggle-link svg { width: 16px; height: 16px; }
.iq-kit:is(body,#iqk#iqk) .pdf-converter-section {
margin: 0 0 16px;
padding: 16px;
border: 1px solid var(--k-line);
border-radius: var(--k-r);
background: var(--k-band);
}
.iq-kit:is(body,#iqk#iqk) .pdf-converter-section .credit-cost-notice {
margin: 0 0 12px;
padding: 0;
border: 0;
background: none;
color: var(--k-muted);
font-size: 13px;
}
.iq-kit:is(body,#iqk#iqk) .pdf-converter-section .credit-cost-notice-inner { display: flex; align-items: center; gap: 8px; padding: 0; background: none; border: 0; }
.iq-kit:is(body,#iqk#iqk) .pdf-converter-section .credit-cost-notice svg { width: 15px; height: 15px; color: var(--k-faint); flex-shrink: 0; }
.iq-kit:is(body,#iqk#iqk) .pdf-converter-section .credit-cost-notice strong { color: var(--k-ink); }
.iq-kit:is(body,#iqk#iqk) .pdf-upload-area {
padding: 28px 16px;
border: 1px dashed var(--k-line-strong);
border-radius: var(--k-r);
background: var(--k-panel);
box-shadow: none;
transform: none;
}
.iq-kit:is(body,#iqk#iqk) .pdf-upload-area:hover,
.iq-kit:is(body,#iqk#iqk) .pdf-upload-area.dragover { border-color: var(--brand); background: var(--brand-wash); transform: none; }
.iq-kit:is(body,#iqk#iqk) .pdf-upload-icon,
.iq-kit:is(body,#iqk#iqk) .pdf-download-icon,
.iq-kit:is(body,#iqk#iqk) .pdf-use-icon { color: var(--brand-ink); width: 24px; height: 24px; }
.iq-kit:is(body,#iqk#iqk) .pdf-upload-text,
.iq-kit:is(body,#iqk#iqk) .pdf-download-text,
.iq-kit:is(body,#iqk#iqk) .pdf-use-text { color: var(--k-ink); font-size: 14.5px; font-weight: 600; margin: 8px 0 2px; }
.iq-kit:is(body,#iqk#iqk) .pdf-upload-subtext,
.iq-kit:is(body,#iqk#iqk) .pdf-download-subtext,
.iq-kit:is(body,#iqk#iqk) .pdf-use-subtext { color: var(--k-muted); font-size: 12.5px; margin: 0; }
.iq-kit:is(body,#iqk#iqk) .pdf-compartment { border-radius: var(--k-r); background: none; transform: none; box-shadow: none; }
.iq-kit:is(body,#iqk#iqk) .pdf-compartment:hover { background: var(--k-band); transform: none; }
.iq-kit:is(body,#iqk#iqk) .pdf-compartment-divider { background: var(--k-line); }
.iq-kit:is(body,#iqk#iqk) .pdf-actions { margin: 12px 0 0; display: flex; justify-content: flex-end; }
.iq-kit:is(body,#iqk#iqk) .pdf-btn {
display: inline-flex;
align-items: center;
gap: 8px;
height: 36px;
padding: 0 16px;
border: 1px solid var(--brand-deep);
border-radius: var(--k-r);
background: var(--brand-deep);
color: #fff;
font-family: var(--k-sans);
font-size: 14px;
font-weight: 500;
box-shadow: none;
transform: none;
text-transform: none;
letter-spacing: 0;
}
.iq-kit:is(body,#iqk#iqk) .pdf-btn:hover:not(:disabled) { background: var(--brand-hover); transform: none; box-shadow: none; }
.iq-kit:is(body,#iqk#iqk) .pdf-btn:disabled { background: var(--k-band-2); border-color: var(--k-line); color: var(--k-faint); opacity: 1; }
.iq-kit:is(body,#iqk#iqk) .pdf-btn svg { width: 15px; height: 15px; }
.iq-kit:is(body,#iqk#iqk) .pdf-progress-bar { height: 3px; border-radius: 0; background: var(--k-line-soft); }
.iq-kit:is(body,#iqk#iqk) .pdf-progress-fill { border-radius: 0; background: var(--brand); }
.iq-kit:is(body,#iqk#iqk) .pdf-progress-text { font-family: var(--k-mono); font-size: 12px; color: var(--k-muted); }
.iq-kit:is(body,#iqk#iqk) .pdf-file-info,
.iq-kit:is(body,#iqk#iqk) .pdf-success { margin: 10px 0 0; padding: 10px 12px; border: 1px solid var(--k-line); border-radius: var(--k-r); background: var(--k-panel); color: var(--k-ink-soft); font-size: 13px; }
.iq-kit:is(body,#iqk#iqk) .pdf-error { margin: 10px 0 0; padding: 10px 12px; border: 1px solid #ecc8c4; border-radius: var(--k-r); background: var(--k-bad-wash); color: var(--k-bad); font-size: 13px; }
.iq-kit:is(body,#iqk#iqk) .pdf-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 12px 0 0; border: 1px solid var(--k-line); border-radius: var(--k-r); background: var(--k-panel); }
.iq-kit:is(body,#iqk#iqk) .pdf-stat { padding: 10px 12px; border: 0; background: none; box-shadow: none; text-align: left; }
.iq-kit:is(body,#iqk#iqk) .pdf-stat + .pdf-stat { border-left: 1px solid var(--k-line-soft); }
.iq-kit:is(body,#iqk#iqk) .pdf-stat-number { font-family: var(--k-mono); font-size: 15px; font-weight: 500; color: var(--k-ink); }
.iq-kit:is(body,#iqk#iqk) .pdf-stat-label { font-size: 12px; color: var(--k-muted); text-transform: none; letter-spacing: 0; }
/* Multi-PDF queue (bulk-pdf-handler.js). Its own Convert button replaces the
single-file one, so the disabled legacy button is hidden while the queue shows. */
.iq-kit:is(body,#iqk#iqk) .pdf-converter-section:has(#bulkPdfActions[style*="flex"]) .pdf-actions,
.iq-kit:is(body,#iqk#iqk) .pdf-converter-section:has(.pdf-preview-item) .pdf-actions { display: none; }
/* conversion result */
.iq-kit:is(body,#iqk#iqk) .conversion-complete h3 { font-family: var(--k-serif); font-size: 28px; font-weight: 400; letter-spacing: -0.015em; color: var(--k-ink); }
.iq-kit:is(body,#iqk#iqk) .conversion-complete svg { color: var(--k-ok); }
.iq-kit:is(body,#iqk#iqk) .pdf-success-compartments { gap: 8px; border: 0; background: none; }
.iq-kit:is(body,#iqk#iqk) .pdf-success-compartments .pdf-compartment {
padding: 16px;
border: 1px solid var(--k-line-strong);
border-radius: var(--k-r);
background: var(--k-panel);
box-shadow: none;
transform: none;
}
.iq-kit:is(body,#iqk#iqk) .pdf-success-compartments .pdf-use-compartment { border-color: var(--brand-deep); background: var(--brand-deep); }
/* bulk-pdf-handler.js writes these colours inline, hence !important */
.iq-kit:is(body,#iqk#iqk) .pdf-success-compartments .pdf-use-compartment :is(p, svg, i) { color: #fff !important; }
.iq-kit:is(body,#iqk#iqk) .pdf-success-compartments .pdf-download-compartment p { color: var(--k-ink) !important; }
.iq-kit:is(body,#iqk#iqk) .pdf-success-compartments .pdf-download-compartment p + p { color: var(--k-muted) !important; }
.iq-kit:is(body,#iqk#iqk) .pdf-success-compartments .pdf-download-compartment :is(svg, i) { color: var(--brand-ink) !important; }
.iq-kit:is(body,#iqk#iqk) .pdf-success-compartments .pdf-download-compartment:hover { background: var(--k-band); border-color: var(--k-ink-soft); }
.iq-kit:is(body,#iqk#iqk) .pdf-success-compartments .pdf-use-compartment:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.iq-kit:is(body,#iqk#iqk) .pdf-success-compartments .pdf-compartment-divider { display: none; }
.iq-kit:is(body,#iqk#iqk) .pdf-preview-grid { gap: 10px; }
.iq-kit:is(body,#iqk#iqk) .pdf-preview-item {
border: 1px solid var(--k-line);
border-radius: var(--k-r);
background: var(--k-panel);
box-shadow: none;
transform: none;
}
.iq-kit:is(body,#iqk#iqk) .pdf-preview-item:hover { border-color: var(--k-line-strong); transform: none; box-shadow: none; }
.iq-kit:is(body,#iqk#iqk) .pdf-preview-item .pdf-name { color: var(--k-ink); font-size: 12.5px; font-weight: 500; }
.iq-kit:is(body,#iqk#iqk) .pdf-preview-item .pdf-size,
.iq-kit:is(body,#iqk#iqk) .pdf-preview-item .pdf-status { color: var(--k-muted); font-family: var(--k-mono); font-size: 11px; }
.iq-kit:is(body,#iqk#iqk) .pdf-remove-btn { border-radius: var(--k-r); background: var(--k-panel); border: 1px solid var(--k-line); color: var(--k-muted); box-shadow: none; }
.iq-kit:is(body,#iqk#iqk) .pdf-remove-btn:hover { color: var(--k-bad); border-color: var(--k-bad); background: var(--k-bad-wash); }
.iq-kit:is(body,#iqk#iqk) .bulk-pdf-actions { gap: 8px; }
.iq-kit:is(body,#iqk#iqk) :is(.pdf-clear-btn, .pdf-convert-btn) {
display: inline-flex;
align-items: center;
gap: 8px;
height: 36px;
padding: 0 14px;
border: 1px solid var(--k-line-strong);
border-radius: var(--k-r);
background: var(--k-panel);
color: var(--k-ink);
font-family: var(--k-sans);
font-size: 13.5px;
font-weight: 500;
box-shadow: none;
transform: none;
}
.iq-kit:is(body,#iqk#iqk) :is(.pdf-clear-btn, .pdf-convert-btn) svg { width: 15px; height: 15px; }
.iq-kit:is(body,#iqk#iqk) .pdf-clear-btn:hover { background: var(--k-band); border-color: var(--k-ink-soft); transform: none; }
.iq-kit:is(body,#iqk#iqk) .pdf-convert-btn { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }
.iq-kit:is(body,#iqk#iqk) .pdf-convert-btn:hover:not(:disabled) { background: var(--brand-hover); border-color: var(--brand-hover); transform: none; box-shadow: none; }
.iq-kit:is(body,#iqk#iqk) .bulk-progress-container { border: 1px solid var(--k-line); border-radius: var(--k-r); background: var(--k-panel); box-shadow: none; }
.iq-kit:is(body,#iqk#iqk) .bulk-progress-container .progress-bar { height: 3px; border-radius: 0; background: var(--k-line-soft); }
.iq-kit:is(body,#iqk#iqk) .bulk-progress-container .progress-fill { border-radius: 0; background: var(--brand); }
.iq-kit:is(body,#iqk#iqk) .bulk-progress-container :is(.progress-title, .progress-count, .current-file) { font-family: var(--k-mono); font-size: 12px; color: var(--k-muted); }
.iq-kit:is(body,#iqk#iqk) .pdf-converter-section .credit-cost-notice span { color: var(--k-muted); }
/* Platform connections strip (built by integration-manager.js) */
.iq-kit:is(body,#iqk#iqk) #integrationsManagerWrapper { margin: 8px 0 22px !important; }
.iq-kit:is(body,#iqk#iqk) #viewConnectionsContainer { margin: 0 0 12px !important; }
.iq-kit:is(body,#iqk#iqk) .view-connections-btn {
display: inline-flex;
align-items: center;
gap: 12px;
height: 40px;
padding: 0 10px 0 14px;
border: 1px solid var(--k-line);
border-radius: var(--k-r);
background: var(--k-panel);
box-shadow: none;
transform: none;
color: var(--k-ink-soft);
font-family: var(--k-sans);
font-size: 13.5px;
font-weight: 500;
}
.iq-kit:is(body,#iqk#iqk) .view-connections-btn:hover { border-color: var(--k-line-strong); background: var(--k-band); transform: none; box-shadow: none; }
.iq-kit:is(body,#iqk#iqk) .view-connections-btn .btn-text { font-size: 13.5px; font-weight: 500; color: var(--k-ink-soft); letter-spacing: 0; }
.iq-kit:is(body,#iqk#iqk) .view-connections-btn .mini-logos { display: flex; align-items: center; gap: 4px; padding: 0 10px; border-left: 1px solid var(--k-line-soft); border-right: 1px solid var(--k-line-soft); }
.iq-kit:is(body,#iqk#iqk) .view-connections-btn .mini-logo-wrapper {
width: 22px;
height: 22px;
padding: 2px;
border: 0;
border-radius: var(--k-r);
background: none;
box-shadow: none;
}
.iq-kit:is(body,#iqk#iqk) .view-connections-btn .mini-logo-wrapper img { width: 18px; height: 18px; object-fit: contain; }
/* integration-manager.js can leave the collapsed list at display:flex + visibility:hidden,
which keeps an empty 36px band under the button; collapse it properly */
.iq-kit:is(body,#iqk#iqk) #integrationsManagerWrapper > div[style*="visibility: hidden"] { display: none !important; }
.iq-kit:is(body,#iqk#iqk) #integrationsManagerWrapper > div:not(#viewConnectionsContainer) {
background: var(--k-band) !important;
border: 1px solid var(--k-line) !important;
border-radius: var(--k-r) !important;
}
/* the platform cards inside the strip (each integration script styles its own) */
.iq-kit:is(body,#iqk#iqk) #integrationsManagerWrapper [class$="-connect-btn"] {
border: 1px solid var(--k-line) !important;
border-radius: var(--k-r) !important;
background: var(--k-panel) !important;
box-shadow: none !important;
transform: none !important;
font-family: var(--k-sans) !important;
}
.iq-kit:is(body,#iqk#iqk) #integrationsManagerWrapper [class$="-connect-btn"]:hover { border-color: var(--k-line-strong) !important; background: var(--k-band) !important; }
/* 6g. Segmented choice (mode selector) */
.iq-kit:is(body,#iqk#iqk) .k-seg {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
gap: 2px;
margin: 0 0 14px;
padding: 3px;
border: 1px solid var(--k-line);
border-radius: var(--k-r);
background: var(--k-band);
box-shadow: none;
}
.iq-kit:is(body,#iqk#iqk) .k-seg::before,
.iq-kit:is(body,#iqk#iqk) .k-seg::after { content: none; display: none; }
.iq-kit:is(body,#iqk#iqk) .k-seg .mode-option {
display: flex;
align-items: center;
justify-content: center;
height: 36px;
padding: 0 12px;
border: 1px solid transparent;
border-radius: var(--k-r);
background: transparent;
color: var(--k-muted);
box-shadow: none;
transform: none;
cursor: pointer;
}
.iq-kit:is(body,#iqk#iqk) .k-seg .mode-option:hover { color: var(--k-ink); background: rgba(255, 255, 255, 0.6); }
.iq-kit:is(body,#iqk#iqk) .k-seg .mode-option.active {
background: var(--k-panel);
border-color: var(--k-line);
color: var(--k-ink);
box-shadow: 0 1px 0 rgba(26, 22, 15, 0.04);
}
.iq-kit:is(body,#iqk#iqk) .k-seg .mode-indicator { display: none; }
.iq-kit:is(body,#iqk#iqk) .k-seg .mode-label {
display: inline;
color: inherit;
font-family: var(--k-sans);
font-size: 13.5px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
}
/* Invoice mode explanation */
.iq-kit:is(body,#iqk#iqk) .explanation-banner {
margin: 0 0 14px;
padding: 14px 16px;
border: 1px solid var(--k-line);
border-left: 2px solid var(--brand);
border-radius: var(--k-r);
background: var(--k-band);
box-shadow: none;
color: var(--k-ink-soft);
}
.iq-kit:is(body,#iqk#iqk) .explanation-banner h4 { margin: 0 0 6px; font-family: var(--k-serif); font-size: 17px; font-weight: 500; color: var(--k-ink); }
.iq-kit:is(body,#iqk#iqk) .explanation-banner p { font-size: 13.5px; color: var(--k-ink-soft); }
.iq-kit:is(body,#iqk#iqk) .explanation-banner .banner-icon { color: var(--brand-ink); background: none; }
.iq-kit:is(body,#iqk#iqk) .explanation-banner .criteria-item { font-size: 13px; background: var(--k-panel); border: 1px solid var(--k-line); border-radius: var(--k-r); color: var(--k-ink-soft); }
.iq-kit:is(body,#iqk#iqk) .explanation-banner .banner-close { background: none; border: 0; color: var(--k-muted); border-radius: var(--k-r); }
/* 6h. The main action */
.iq-kit:is(body,#iqk#iqk) .k-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
height: 52px;
margin: 0;
padding: 0 24px;
border: 1px solid var(--brand-deep);
border-radius: var(--k-r);
background: var(--brand-deep);
color: #fff;
font-family: var(--k-sans);
font-size: 15.5px;
font-weight: 600;
letter-spacing: 0.005em;
text-transform: none;
box-shadow: none;
transform: none;
cursor: pointer;
transition: background 0.14s var(--k-ease);
}
.iq-kit:is(body,#iqk#iqk) .k-cta::before,
.iq-kit:is(body,#iqk#iqk) .k-cta::after { content: none; display: none; }
.iq-kit:is(body,#iqk#iqk) .k-cta:hover:not(:disabled) { background: var(--brand-hover); border-color: var(--brand-hover); transform: none; box-shadow: none; }
.iq-kit:is(body,#iqk#iqk) .k-cta:disabled { opacity: 0.55; cursor: progress; }
.iq-kit:is(body,#iqk#iqk) .k-cta svg { width: 18px; height: 18px; }
.iq-kit:is(body,#iqk#iqk) .k-cta span { font: inherit; letter-spacing: inherit; text-transform: none; color: inherit; }
/* 6i. "or" + sample run */
.iq-kit:is(body,#iqk#iqk) .sample-run-cta { gap: 10px; margin: 20px 0 0; }
.iq-kit:is(body,#iqk#iqk) .sample-run-cta__or {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
color: var(--k-faint);
font-family: var(--k-mono);
font-size: 11px;
letter-spacing: 0.16em;
}
.iq-kit:is(body,#iqk#iqk) .sample-run-cta__or::before,
.iq-kit:is(body,#iqk#iqk) .sample-run-cta__or::after { content: ''; flex: 1; height: 1px; background: var(--k-line-soft); }
.iq-kit:is(body,#iqk#iqk) #sampleRunButton {
height: 38px;
padding: 0 8px 0 14px;
gap: 10px;
border: 1px solid var(--k-line-strong);
border-radius: var(--k-r);
background: var(--k-panel);
color: var(--k-ink);
font-size: 14px;
font-weight: 500;
transform: none;
}
.iq-kit:is(body,#iqk#iqk) #sampleRunButton:hover { background: var(--k-band); border-color: var(--k-ink-soft); transform: none; }
.iq-kit:is(body,#iqk#iqk) #sampleRunButton svg { width: 16px; height: 16px; color: var(--brand-ink); }
.iq-kit:is(body,#iqk#iqk) .sample-run-cta__free {
height: 22px;
padding: 0 7px;
margin: 0;
border-radius: var(--k-r);
background: var(--brand-wash);
color: var(--brand-deep);
font-family: var(--k-mono);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.08em;
}
.iq-kit:is(body,#iqk#iqk) .sample-run-cta__hint { max-width: 440px; color: var(--k-muted); font-size: 12.5px; line-height: 1.5; }
.iq-kit:is(body,#iqk#iqk) .sample-run-cta__hint strong { color: var(--k-ink-soft); font-weight: 600; }
.iq-kit:is(body,#iqk#iqk) .sample-run-banner {
gap: 12px;
margin: 0 0 16px;
padding: 12px 14px 12px 16px;
border: 1px solid var(--brand-line);
border-left: 2px solid var(--brand);
border-radius: var(--k-r);
background: var(--brand-wash);
color: var(--k-ink-soft);
font-size: 13.5px;
}
.iq-kit:is(body,#iqk#iqk) .sample-run-banner strong { color: var(--k-ink); }
.iq-kit:is(body,#iqk#iqk) .sample-run-banner__dot { display: none; }
.iq-kit:is(body,#iqk#iqk) .sample-run-banner__btn {
height: 32px;
padding: 0 12px;
border: 1px solid var(--brand-deep);
border-radius: var(--k-r);
background: var(--brand-deep);
color: #fff;
font-size: 13px;
font-weight: 500;
}
.iq-kit:is(body,#iqk#iqk) .sample-run-banner__btn:hover { background: var(--brand-hover); }
/* 6j. Progress + errors */
.iq-kit:is(body,#iqk#iqk) #progressContainer { margin: 20px 0 0; padding: 0; background: none; border: 0; }
.iq-kit:is(body,#iqk#iqk) #progressContainer .progress-track { height: 3px; border-radius: 0; background: var(--k-line-soft); overflow: hidden; }
.iq-kit:is(body,#iqk#iqk) #progressContainer .progress-fill { height: 3px; border-radius: 0; background: var(--brand); box-shadow: none; }
.iq-kit:is(body,#iqk#iqk) #progressContainer .progress-label {
margin: 10px 0 0;
color: var(--k-muted);
font-family: var(--k-mono);
font-size: 11.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
text-align: center;
}
.iq-kit:is(body,#iqk#iqk) #error,
.iq-kit:is(body,#iqk#iqk) .k-alert {
margin: 16px 0 0;
padding: 12px 14px;
border: 1px solid #ecc8c4;
border-left: 2px solid var(--k-bad);
border-radius: var(--k-r);
background: var(--k-bad-wash);
color: #7d2d2a;
font-size: 13.5px;
box-shadow: none;
}
/* 6k. Result card after a run (built by ui.js) */
.iq-kit:is(body,#iqk#iqk) #results .success-container {
max-width: none;
margin: 16px 0 0;
padding: 28px 32px;
border: 1px solid var(--k-line);
border-radius: var(--k-r);
background: var(--k-panel);
box-shadow: 0 1px 0 rgba(26, 22, 15, 0.03);
text-align: center;
}
.iq-kit:is(body,#iqk#iqk) #results .success-message {
margin: 0 0 20px;
padding: 0;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
}
.iq-kit:is(body,#iqk#iqk) #results .success-icon { width: 36px !important; height: 36px !important; color: var(--k-ok) !important; margin: 0 auto 12px !important; }
.iq-kit:is(body,#iqk#iqk) #results .success-message h2 {
margin: 0 0 6px;
font-family: var(--k-serif);
font-size: 28px;
font-weight: 400;
letter-spacing: -0.015em;
color: var(--k-ink);
}
.iq-kit:is(body,#iqk#iqk) #results .success-message p { margin: 0; color: var(--k-muted); font-size: 14.5px; }
.iq-kit:is(body,#iqk#iqk) #results .success-message p strong { color: var(--k-ok); font-family: var(--k-mono); font-weight: 500; }
.iq-kit:is(body,#iqk#iqk) #results .success-message p[style] { color: var(--k-ok) !important; }
.iq-kit:is(body,#iqk#iqk) #results .results-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; }
.iq-kit:is(body,#iqk#iqk) #results .view-results-btn,
.iq-kit:is(body,#iqk#iqk) #results .download-summary-btn {
display: inline-flex;
align-items: center;
height: 40px;
padding: 0 18px;
border: 1px solid var(--k-line-strong);
border-radius: var(--k-r);
background: var(--k-panel);
color: var(--k-ink);
font-family: var(--k-sans);
font-size: 14px;
font-weight: 500;
box-shadow: none;
transform: none;
cursor: pointer;
}
.iq-kit:is(body,#iqk#iqk) #results .view-results-btn { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }
.iq-kit:is(body,#iqk#iqk) #results .view-results-btn:hover { background: var(--brand-hover); }
.iq-kit:is(body,#iqk#iqk) #results .download-summary-btn:hover { background: var(--k-band); border-color: var(--k-ink-soft); }
.iq-kit:is(body,#iqk#iqk) #results .premium-notification { margin: 10px 0 0; font-size: 13px; color: var(--k-muted); }
/* 6l. LedgerIQ tool page: cost line, sample run, progress, open-analysis button */
.iq-kit:is(body,#iqk#iqk) .k-panel > .credit-cost-notice { margin: 0 0 14px; padding: 0; border: 0; background: none; box-shadow: none; }
.iq-kit:is(body,#iqk#iqk) .k-panel > .credit-cost-notice .credit-cost-inner {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
padding: 0;
border: 0;
background: none;
color: var(--k-muted);
font-size: 13px;
}
.iq-kit:is(body,#iqk#iqk) .k-panel > .credit-cost-notice svg { width: 15px; height: 15px; color: var(--k-faint); flex-shrink: 0; }
.iq-kit:is(body,#iqk#iqk) .k-panel > .credit-cost-notice strong { color: var(--k-ink); }
.iq-kit:is(body,#iqk#iqk) .k-panel .file-input-container + .k-cta { margin-top: 20px; }
.iq-kit:is(body,#iqk#iqk) .ledgeriq-sample-cta { gap: 10px; margin: 20px 0 0; }
.iq-kit:is(body,#iqk#iqk) .ledgeriq-sample-cta__or {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
color: var(--k-faint);
font-family: var(--k-mono);
font-size: 11px;
letter-spacing: 0.16em;
}
.iq-kit:is(body,#iqk#iqk) .ledgeriq-sample-cta__or::before,
.iq-kit:is(body,#iqk#iqk) .ledgeriq-sample-cta__or::after { content: ''; flex: 1; height: 1px; background: var(--k-line-soft); }
.iq-kit:is(body,#iqk#iqk) #ledgeriqSampleButton {
height: 38px;
padding: 0 8px 0 14px;
gap: 10px;
border: 1px solid var(--k-line-strong);
border-radius: var(--k-r);
background: var(--k-panel);
color: var(--k-ink);
font-size: 14px;
font-weight: 500;
transform: none;
}
.iq-kit:is(body,#iqk#iqk) #ledgeriqSampleButton:hover { background: var(--k-band); border-color: var(--k-ink-soft); transform: none; }
.iq-kit:is(body,#iqk#iqk) #ledgeriqSampleButton svg { width: 16px; height: 16px; color: var(--brand-ink); }
.iq-kit:is(body,#iqk#iqk) .ledgeriq-sample-cta__free {
height: 22px;
padding: 0 7px;
margin: 0;
border-radius: var(--k-r);
background: var(--brand-wash);
color: var(--brand-deep);
font-family: var(--k-mono);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.08em;
}
.iq-kit:is(body,#iqk#iqk) .ledgeriq-sample-cta__hint { max-width: 460px; color: var(--k-muted); font-size: 12.5px; line-height: 1.5; }
.iq-kit:is(body,#iqk#iqk) .ledgeriq-sample-cta__hint strong { color: var(--k-ink-soft); font-weight: 600; }
.iq-kit:is(body,#iqk#iqk) #progressContainer.progress-container {
position: relative;
height: auto;
margin: 20px 0 0;
padding: 0 0 26px;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
overflow: visible;
}
.iq-kit:is(body,#iqk#iqk) #progressContainer.progress-container::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--k-line-soft); }
.iq-kit:is(body,#iqk#iqk) #progressContainer.progress-container #progressBar { position: relative; height: 3px; border-radius: 0; background: var(--brand); box-shadow: none; z-index: 1; }
.iq-kit:is(body,#iqk#iqk) #progressContainer.progress-container #progressText {
position: absolute;
left: 0; right: 0; top: 12px;
color: var(--k-muted);
font-family: var(--k-mono);
font-size: 11.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
text-align: center;
background: none;
text-shadow: none;
}
/* no display here: legacy CSS hides it until an analysis exists and page JS shows it */
.iq-kit:is(body,#iqk#iqk) #viewAnalysisButton {
height: 42px;
line-height: 40px;
margin: 16px 0 0;
padding: 0 20px;
border: 1px solid var(--brand-deep);
border-radius: var(--k-r);
background: var(--brand-deep);
color: #fff;
font-family: var(--k-sans);
font-size: 14.5px;
font-weight: 500;
box-shadow: none;
transform: none;
}
.iq-kit:is(body,#iqk#iqk) #viewAnalysisButton:hover { background: var(--brand-hover); transform: none; box-shadow: none; }
/* sample-data banner (inline-styled by ledgeriq-sample.js), same as ReconcileIQ's */
.iq-kit:is(body,#iqk#iqk) #ledgeriqSampleBanner {
max-width: 100% !important;
width: 100%;
box-sizing: border-box;
padding: 12px 14px 12px 16px !important;
border: 1px solid var(--brand-line) !important;
border-left: 2px solid var(--brand) !important;
border-radius: var(--k-r) !important;
background: var(--brand-wash) !important;
color: var(--k-ink-soft) !important;
}
.iq-kit:is(body,#iqk#iqk) #ledgeriqSampleBanner > span:first-child { display: none; }
.iq-kit:is(body,#iqk#iqk) #ledgeriqSampleBanner strong { color: var(--k-ink); }
/* LedgerIQ "Analysis Complete" dialog (#ledgerReadyModal) */
.iq-kit:is(body,#iqk#iqk) .lrm-overlay { z-index: 10050; background: rgba(26, 22, 15, 0.42); backdrop-filter: none; -webkit-backdrop-filter: none; }
.iq-kit:is(body,#iqk#iqk) .lrm-card {
max-width: 460px;
border: 1px solid var(--k-line);
border-radius: var(--k-r);
background: var(--k-panel);
box-shadow: var(--k-pop);
animation: kRise 0.2s var(--k-ease);
}
.iq-kit:is(body,#iqk#iqk) .lrm-header { gap: 12px; padding: 18px 24px 16px; border-bottom: 1px solid var(--k-line-soft); background: var(--k-panel); }
.iq-kit:is(body,#iqk#iqk) .lrm-check { width: 32px; height: 32px; border: 0; border-radius: var(--k-r); background: var(--k-ok-wash); color: var(--k-ok); animation: none; }
.iq-kit:is(body,#iqk#iqk) .lrm-check svg { width: 18px; height: 18px; }
.iq-kit:is(body,#iqk#iqk) .lrm-header-label { color: var(--k-muted); font-family: var(--k-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.iq-kit:is(body,#iqk#iqk) .lrm-platform-badge { border-radius: var(--k-r); font-family: var(--k-mono); font-size: 11px; font-weight: 500; }
.iq-kit:is(body,#iqk#iqk) .lrm-identity { padding: 20px 24px 0; }
.iq-kit:is(body,#iqk#iqk) .lrm-company { font-family: var(--k-serif); font-size: 28px; font-weight: 400; letter-spacing: -0.015em; color: var(--k-ink); }
.iq-kit:is(body,#iqk#iqk) .lrm-period { color: var(--k-muted); font-family: var(--k-mono); font-size: 12px; }
.iq-kit:is(body,#iqk#iqk) .lrm-stats { margin: 18px 24px; border: 1px solid var(--k-line); border-radius: var(--k-r); background: var(--k-panel); }
.iq-kit:is(body,#iqk#iqk) .lrm-stat { padding: 12px 14px; border-right: 1px solid var(--k-line-soft); text-align: left; }
.iq-kit:is(body,#iqk#iqk) .lrm-stat-value { font-family: var(--k-mono); font-size: 18px; font-weight: 500; color: var(--k-ink); }
.iq-kit:is(body,#iqk#iqk) .lrm-stat-label { margin-top: 2px; color: var(--k-muted); font-family: var(--k-sans); font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.iq-kit:is(body,#iqk#iqk) .lrm-cta {
width: calc(100% - 48px);
height: 46px;
margin: 0 24px 8px;
padding: 0 18px;
border: 1px solid var(--brand-deep);
border-radius: var(--k-r);
background: var(--brand-deep);
color: #fff;
font-family: var(--k-sans);
font-size: 15px;
font-weight: 600;
box-shadow: none;
transform: none;
}
.iq-kit:is(body,#iqk#iqk) .lrm-cta:hover { background: var(--brand-hover); box-shadow: none; transform: none; }
.iq-kit:is(body,#iqk#iqk) .lrm-dismiss {
display: block;
width: calc(100% - 48px);
margin: 0 24px 18px;
padding: 8px;
border: 0;
border-radius: var(--k-r);
background: transparent;
color: var(--k-muted);
font-family: var(--k-sans);
font-size: 13px;
}
.iq-kit:is(body,#iqk#iqk) .lrm-dismiss:hover { background: var(--k-band); color: var(--k-ink); }
/* ---------- 7. Modals (shell shared by every kit page) ---------- */
.iq-kit:is(body,#iqk#iqk) .modal,
.iq-kit:is(body,#iqk#iqk) .login-required-modal,
.iq-kit:is(body,#iqk#iqk) .validation-modal-overlay {
background: rgba(26, 22, 15, 0.42);
backdrop-filter: none;
}
.iq-kit:is(body,#iqk#iqk) .modal .modal-content,
.iq-kit:is(body,#iqk#iqk) .login-required-content,
.iq-kit:is(body,#iqk#iqk) .validation-modal {
border: 1px solid var(--k-line);
border-radius: var(--k-r);
background: var(--k-panel);
color: var(--k-ink-soft);
box-shadow: var(--k-pop);
font-family: var(--k-sans);
}
.iq-kit:is(body,#iqk#iqk) .modal .modal-content h2,
.iq-kit:is(body,#iqk#iqk) .user-modal h2,
.iq-kit:is(body,#iqk#iqk) .login-required-title,
.iq-kit:is(body,#iqk#iqk) .validation-modal h2,
.iq-kit:is(body,#iqk#iqk) .validation-modal h3 {
font-family: var(--k-serif);
font-weight: 400;
letter-spacing: -0.01em;
color: var(--k-ink);
background: none;
-webkit-text-fill-color: currentColor;
}
.iq-kit:is(body,#iqk#iqk) .modal .modal-content input,
.iq-kit:is(body,#iqk#iqk) .modal .modal-content select,
.iq-kit:is(body,#iqk#iqk) .user-modal input,
.iq-kit:is(body,#iqk#iqk) .user-modal select {
height: 38px;
padding: 0 10px;
border: 1px solid var(--k-line-strong);
border-radius: var(--k-r);
background: var(--k-panel);
color: var(--k-ink);
font-family: var(--k-sans);
font-size: 14px;
box-shadow: none;
}
.iq-kit:is(body,#iqk#iqk) .modal .modal-content input:focus,
.iq-kit:is(body,#iqk#iqk) .user-modal input:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px var(--brand-wash); }
.iq-kit:is(body,#iqk#iqk) .login-required-icon { background: var(--brand-wash); color: var(--brand-deep); border-radius: var(--k-r); box-shadow: none; }
.iq-kit:is(body,#iqk#iqk) .login-required-btn-primary {
border: 1px solid var(--brand-deep);
border-radius: var(--k-r);
background: var(--brand-deep);
color: #fff;
box-shadow: none;
transform: none;
}
.iq-kit:is(body,#iqk#iqk) .login-required-btn-primary:hover { background: var(--brand-hover); transform: none; box-shadow: none; }
.iq-kit:is(body,#iqk#iqk) .login-required-btn-secondary {
border: 1px solid var(--k-line-strong);
border-radius: var(--k-r);
background: var(--k-panel);
color: var(--k-ink);
box-shadow: none;
}
.iq-kit:is(body,#iqk#iqk) .login-required-register-link { color: var(--brand-ink); }
/* plain .modal dialogs (register, payment): title, labels, actions */
.iq-kit:is(body,#iqk#iqk) .modal .modal-content > h2 { margin: 0 0 16px; font-size: 24px; line-height: 1.2; }
.iq-kit:is(body,#iqk#iqk) .modal .modal-form label { display: block; margin: 12px 0 6px; color: var(--k-ink-soft); font-size: 13px; font-weight: 500; }
.iq-kit:is(body,#iqk#iqk) .modal .modal-form input { width: 100%; box-sizing: border-box; }
.iq-kit:is(body,#iqk#iqk) .modal .form-actions { display: flex; gap: 8px; margin: 20px 0 0; }
.iq-kit:is(body,#iqk#iqk) .modal .form-actions button {
height: 40px;
padding: 0 16px;
border: 1px solid var(--k-line-strong);
border-radius: var(--k-r);
background: var(--k-panel);
color: var(--k-ink);
font-family: var(--k-sans);
font-size: 14px;
font-weight: 500;
box-shadow: none;
}
.iq-kit:is(body,#iqk#iqk) .modal .form-actions button[type="submit"] { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }
.iq-kit:is(body,#iqk#iqk) .modal .modal-form > button[type="submit"] {
height: 40px;
margin: 18px 0 0;
padding: 0 18px;
border: 1px solid var(--brand-deep);
border-radius: var(--k-r);
background: var(--brand-deep);
color: #fff;
font-family: var(--k-sans);
font-size: 14px;
font-weight: 500;
box-shadow: none;
}
.iq-kit:is(body,#iqk#iqk) .modal .modal-form > button[type="submit"]:hover { background: var(--brand-hover); }
.iq-kit:is(body,#iqk#iqk) .modal .form-actions button[type="submit"]:hover { background: var(--brand-hover); }
.iq-kit:is(body,#iqk#iqk) .modal .form-actions button:not([type="submit"]):hover { background: var(--k-band); border-color: var(--k-ink-soft); }
/* Login-required + PDF verification dialogs share .login-required-*. Page JS shows
them with display:block, and an entry animation leaves the content's centring
transform at identity, so it hung off the bottom under the header. Centre with flex. */
@keyframes kRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.iq-kit:is(body,#iqk#iqk) .login-required-modal { z-index: 10050; }
.iq-kit:is(body,#iqk#iqk) .login-required-modal[style*="block"],
.iq-kit:is(body,#iqk#iqk) .login-required-modal[style*="flex"] {
display: flex !important;
align-items: center;
justify-content: center;
padding: 16px;
background: none;
}
.iq-kit:is(body,#iqk#iqk) .login-required-backdrop { position: absolute; inset: 0; background: rgba(26, 22, 15, 0.42); backdrop-filter: none; }
.iq-kit:is(body,#iqk#iqk) .login-required-content {
position: relative;
top: auto;
left: auto;
width: min(460px, 100%);
max-height: calc(100% - 32px);
margin: 0;
padding: 28px 28px 22px;
overflow-y: auto;
transform: none;
animation: kRise 0.2s var(--k-ease);
}
.iq-kit:is(body,#iqk#iqk) .login-required-close {
top: 14px;
right: 14px;
width: 32px;
height: 32px;
border-radius: var(--k-r);
background: transparent;
color: var(--k-muted);
}
.iq-kit:is(body,#iqk#iqk) .login-required-close:hover { background: var(--k-band); color: var(--k-ink); }
.iq-kit:is(body,#iqk#iqk) .login-required-header { text-align: left; margin: 0 0 16px; }
.iq-kit:is(body,#iqk#iqk) .login-required-icon { width: 40px; height: 40px; margin: 0 0 12px; }
.iq-kit:is(body,#iqk#iqk) .login-required-icon svg { width: 20px; height: 20px; }
.iq-kit:is(body,#iqk#iqk) .login-required-title { margin: 0 0 6px; font-size: 26px; line-height: 1.2; }
.iq-kit:is(body,#iqk#iqk) .login-required-message { margin: 0; color: var(--k-ink-soft); font-size: 14px; }
.iq-kit:is(body,#iqk#iqk) .pdf-verify-warning {
margin: 0 0 14px;
padding: 10px 12px;
border: 1px solid #e8cfa6;
border-left: 2px solid var(--k-warn);
border-radius: var(--k-r);
background: var(--k-warn-wash);
color: #6f4310;
font-size: 13px;
}
.iq-kit:is(body,#iqk#iqk) .pdf-verify-warning p { margin: 0; color: inherit; }
.iq-kit:is(body,#iqk#iqk) .pdf-verify-checkbox { margin: 0 0 16px; font-size: 13.5px; color: var(--k-ink-soft); text-align: left; }
.iq-kit:is(body,#iqk#iqk) .pdf-verify-checkbox input { accent-color: var(--brand-deep); }
.iq-kit:is(body,#iqk#iqk) .login-required-actions { display: flex; gap: 8px; }
.iq-kit:is(body,#iqk#iqk) .login-required-actions > button { flex: 1; height: 42px; padding: 0 12px; font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.iq-kit:is(body,#iqk#iqk) .login-required-btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
.iq-kit:is(body,#iqk#iqk) .login-required-footer { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--k-line-soft); color: var(--k-muted); font-size: 12.5px; }
/* Column mapping modal (mapping.js + mapping.css; the CodeIQ app reuses the same classes) */
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .mapping-modal-overlay { background: rgba(26, 22, 15, 0.42); backdrop-filter: none; }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .mapping-modal-container {
border: 1px solid var(--k-line);
border-radius: var(--k-r);
background: var(--k-panel);
box-shadow: var(--k-pop);
font-family: var(--k-sans);
color: var(--k-ink-soft);
}
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .mapping-modal-header {
padding: 16px 64px 12px 24px;
border-bottom: 1px solid var(--k-line-soft);
background: var(--k-panel);
color: var(--k-ink);
text-align: left;
}
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .mapping-modal-header h2 {
margin: 0 0 2px;
font-family: var(--k-serif);
font-size: 22px;
font-weight: 400;
letter-spacing: -0.01em;
color: var(--k-ink);
}
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .mapping-modal-header p { margin: 0; font-size: 13.5px; color: var(--k-muted); }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .mapping-close-modal {
top: 16px;
right: 16px;
width: 32px;
height: 32px;
border: 1px solid transparent;
border-radius: var(--k-r);
background: transparent;
color: var(--k-muted);
box-shadow: none;
}
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .mapping-close-modal:hover { background: var(--k-band); color: var(--k-ink); transform: none; }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .mapping-modal-body { padding: 16px 24px 12px; }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .mapping-instruction {
margin: 0 0 12px;
padding: 9px 12px;
border: 0;
border-left: 2px solid var(--brand);
border-radius: 0;
background: var(--k-band);
color: var(--k-ink-soft);
font-size: 13px;
text-align: left;
}
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .mapping-stage-switcher { gap: 8px; margin: 0 0 12px; }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .mapping-stage-tab {
padding: 8px 12px;
border: 1px solid var(--k-line);
border-radius: var(--k-r);
background: var(--k-panel);
color: var(--k-muted);
box-shadow: none;
}
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .mapping-stage-tab.is-active { border-color: var(--brand); color: var(--k-ink); box-shadow: inset 0 -2px 0 var(--brand); }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .mapping-stage-tab.is-disabled { background: var(--k-band); }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .mapping-stage-tab .stage-pill {
border: 1px solid var(--k-line);
border-radius: var(--k-r);
background: var(--k-band);
color: var(--k-muted);
font-family: var(--k-mono);
font-size: 11px;
}
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .mapping-stage-tab.is-active .stage-pill { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .mapping-stage-tab .stage-title { font-size: 14px; font-weight: 600; color: inherit; }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .mapping-stage-tab .stage-status {
font-family: var(--k-mono);
font-size: 10.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--k-faint);
}
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .mapping-stage-viewport { border: 1px solid var(--k-line); border-radius: var(--k-r); background: var(--k-panel); }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .mapping-section { border: 0; border-radius: 0; background: var(--k-panel); box-shadow: none; }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .mapping-section h3 {
margin: 0 0 12px;
font-family: var(--k-serif);
font-size: 18px;
font-weight: 500;
color: var(--k-ink);
text-align: left;
}
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .credit-card-option,
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .mapping-options-row .date-format-selector,
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .date-format-selector {
border: 1px solid var(--k-line);
border-radius: var(--k-r);
background: var(--k-band);
box-shadow: none;
color: var(--k-ink-soft);
}
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .credit-card-option { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .credit-card-option input[type="checkbox"] { margin: 2px 0 0; flex-shrink: 0; }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .credit-card-option label { display: block; flex: 1 1 auto; color: var(--k-ink); font-size: 13.5px; font-weight: 600; line-height: 1.35; }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .credit-card-option .help-text { display: block; margin-top: 2px; color: var(--k-muted); font-size: 12.5px; font-weight: 400; }
/* CodeIQ's mapping sheet puts RiQ on a pink-to-white gradient band */
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .mapping-modal-avatar { background: var(--k-panel); border-bottom: 1px solid var(--k-line-soft); padding: 6px 0; }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .mapping-modal-avatar img { filter: none; animation: none; }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .credit-card-option input[type="checkbox"],
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .date-format-radio input[type="radio"] { accent-color: var(--brand-deep); }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .date-format-label { color: var(--k-ink); font-size: 13px; font-weight: 600; }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .date-format-radio { border-radius: var(--k-r); color: var(--k-ink-soft); font-family: var(--k-mono); font-size: 12px; }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .date-format-radio:hover { background: var(--k-panel); }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .date-format-radio input[type="radio"]:checked + span { color: var(--brand-deep); font-weight: 600; }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .date-format-detected { color: var(--k-muted); font-style: normal; font-size: 12px; }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .date-format-detected.format-confident { color: var(--k-ok); }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .date-format-detected.format-ambiguous { color: var(--k-warn); }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .ai-verify-card { border-radius: var(--k-r); box-shadow: none; }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .ai-verify-verified { border-color: #c4dfcd; background: var(--k-ok-wash); }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .ai-verify-corrected,
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .ai-verify-warning { border-color: #e8cfa6; background: var(--k-warn-wash); }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .ai-verify-verified .ai-verify-title,
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .ai-verify-verified .ai-verify-icon { color: var(--k-ok); }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .ai-verify-verified .ai-verify-body { color: #2f5a40; }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .ai-verify-corrected .ai-verify-title,
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .ai-verify-warning .ai-verify-title,
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .ai-verify-corrected .ai-verify-icon,
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .ai-verify-warning .ai-verify-icon { color: var(--k-warn); }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .ai-verify-swap-btn { border-radius: var(--k-r); box-shadow: none; }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .ai-verify-dismiss { border-radius: var(--k-r); }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .mapping-toggle-buttons { gap: 6px; }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .mapping-toggle-button {
height: 30px;
padding: 0 11px;
border: 1px solid var(--k-line-strong);
border-radius: var(--k-r);
background: var(--k-panel);
color: var(--k-ink-soft);
font-family: var(--k-sans);
font-size: 13px;
font-weight: 500;
box-shadow: none;
transform: none;
}
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .mapping-toggle-button:hover { background: var(--k-band); border-color: var(--k-ink-soft); transform: none; }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .mapping-toggle-button.active { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .mapping-toggle-button.required-missing { border-color: var(--k-bad); color: var(--k-bad); background: var(--k-bad-wash); animation: none; }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .data-quality-banner { border-radius: var(--k-r); box-shadow: none; font-size: 13px; }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .data-quality-banner.quality-good { border-color: #c4dfcd; background: var(--k-ok-wash); color: #2f5a40; }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .data-quality-banner.quality-warn { border-color: #e8cfa6; background: var(--k-warn-wash); color: #6f4310; }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .data-quality-banner.quality-bad { border-color: #ecc8c4; background: var(--k-bad-wash); color: #7d2d2a; }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .data-quality-banner .dq-summary,
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .data-quality-banner .dq-count { color: inherit; }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .mapping-table-wrapper,
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .mapping-table-container { border-color: var(--k-line); border-radius: var(--k-r); box-shadow: none; }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) #mappingModal th {
background: var(--k-band);
border: 0;
border-bottom: 1px solid var(--k-line);
border-right: 1px solid var(--k-line-soft);
color: var(--k-muted);
font-family: var(--k-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
}
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) #mappingModal td,
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .mapping-sample-rows td {
border: 0;
border-bottom: 1px solid var(--k-line-soft);
border-right: 1px solid var(--k-line-soft);
background: var(--k-panel);
color: var(--k-ink);
font-family: var(--k-mono);
font-size: 12.5px;
text-transform: none;
}
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .mapping-column-overlay {
border: 1.5px solid var(--brand);
border-radius: var(--k-r);
background-color: color-mix(in srgb, var(--brand) 7%, transparent);
box-shadow: none;
}
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .mapping-column-overlay:hover { border-color: var(--brand-deep); background-color: color-mix(in srgb, var(--brand) 12%, transparent); box-shadow: none; }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .mapping-column-overlay::after {
padding: 3px 8px;
border-radius: var(--k-r);
background: var(--brand-deep);
color: #fff;
box-shadow: none;
font-family: var(--k-sans);
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0;
}
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .mapping-drop-target {
background-color: color-mix(in srgb, var(--brand) 12%, transparent) !important;
border-color: var(--brand) !important;
box-shadow: 0 0 0 3px var(--brand-wash) !important;
}
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .mapping-footer { padding: 10px 24px 14px; border-top: 1px solid var(--k-line-soft); background: var(--k-canvas); gap: 10px; }
/* quality read-out on one line: score, both sides, status */
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .mapping-quality-indicator[style*="block"] { display: flex !important; }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .mapping-quality-indicator {
flex-wrap: wrap;
align-items: center;
gap: 8px 20px;
padding: 8px 14px;
border: 1px solid var(--k-line);
border-radius: var(--k-r);
background: var(--k-panel);
box-shadow: none;
}
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .mapping-quality-indicator.high { border-left: 2px solid var(--k-ok); }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .mapping-quality-indicator.medium { border-left: 2px solid var(--k-warn); }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .mapping-quality-indicator.low { border-left: 2px solid var(--k-bad); }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .quality-header { display: contents; }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .quality-score { display: inline-flex; align-items: baseline; gap: 8px; margin: 0; color: var(--k-muted); font-size: 13px; }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .quality-status { order: 3; margin-left: auto; }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .quality-details { display: flex; gap: 8px; margin: 0; flex-wrap: wrap; }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .quality-score strong { font-family: var(--k-mono); font-size: 15px; font-weight: 500; color: var(--k-ink); }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .quality-score.high strong { color: var(--k-ok); }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .quality-status { color: var(--k-muted); font-size: 12.5px; }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .quality-panel {
display: inline-flex;
align-items: baseline;
gap: 6px;
padding: 3px 8px;
border: 1px solid var(--k-line-soft);
border-radius: var(--k-r);
background: var(--k-band);
box-shadow: none;
transform: none;
}
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .quality-panel:hover { transform: none; box-shadow: none; }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .panel-label,
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .panel-quality { display: inline; margin: 0; }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .panel-label { color: var(--k-ink-soft); font-size: 12px; font-weight: 600; }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .panel-quality { color: var(--k-muted); font-family: var(--k-mono); font-size: 11.5px; }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .mapping-cta-row { flex-direction: row; justify-content: center; align-items: center; gap: 8px; }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .mapping-cta-row .mapping-cta-btn { flex: 0 1 560px; }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .mapping-cta-btn {
height: 44px;
padding: 0 22px;
border: 1px solid var(--brand-deep);
border-radius: var(--k-r);
background: var(--brand-deep);
color: #fff;
font-family: var(--k-sans);
font-size: 14.5px;
font-weight: 600;
box-shadow: none;
transform: none;
}
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .mapping-cta-btn:hover:not(:disabled) { background: var(--brand-hover); border-color: var(--brand-hover); transform: none; box-shadow: none; }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .mapping-cta-btn:disabled { opacity: 0.5; }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .mapping-cta-back {
align-self: auto;
height: 44px;
padding: 0 16px;
border: 1px solid var(--k-line-strong);
border-radius: var(--k-r);
background: var(--k-panel);
color: var(--k-ink);
box-shadow: none;
}
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .mapping-cta-back:hover { background: var(--k-band); border-color: var(--k-ink-soft); }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .mapping-error-message { border-radius: var(--k-r); border-color: #ecc8c4; background: var(--k-bad-wash); color: #7d2d2a; font-size: 13px; }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .mapping-error-message:empty { display: none; }
/* Account panel (userAccount.js): a dropdown under the gear, not an overlay */
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .user-modal {
top: calc(var(--k-bar) + 8px);
right: 16px;
width: 340px;
padding: 20px;
border: 1px solid var(--k-line);
border-radius: var(--k-r);
background: var(--k-panel);
box-shadow: var(--k-pop);
color: var(--k-ink-soft);
font-family: var(--k-sans);
font-size: 13.5px;
z-index: 10020;
}
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .user-modal h3 { font-family: var(--k-serif); font-size: 18px; font-weight: 500; color: var(--k-ink); }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .user-modal p { color: var(--k-ink-soft); font-size: 13px; }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .user-modal p strong { color: var(--k-muted); font-weight: 500; }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .user-modal hr { border: 0; border-top: 1px solid var(--k-line-soft); }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .user-modal .user-links a { color: var(--brand-ink); }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .user-modal .user-enterprise-options a,
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .user-modal .user-enterprise-options button {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
margin: 0 0 6px;
padding: 8px 10px;
border: 1px solid var(--k-line-strong);
border-radius: var(--k-r);
background: var(--k-panel);
color: var(--k-ink);
font-size: 13px;
font-weight: 500;
text-decoration: none;
box-shadow: none;
}
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .user-modal .user-enterprise-options a:hover,
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .user-modal .user-enterprise-options button:hover { background: var(--k-band); border-color: var(--k-ink-soft); }
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .user-modal .close-modal,
:is(.iq-kit, .iq-kit-app):is(body,#iqk#iqk) .user-modal .user-modal-close { border-radius: var(--k-r); }
/* Guided tour (tour.js) */
.iq-kit:is(body,#iqk#iqk) .tour-overlay { background: rgba(26, 22, 15, 0.5); }
.iq-kit:is(body,#iqk#iqk) .tour-spotlight {
border-radius: var(--k-r);
box-shadow: 0 0 0 9999px rgba(26, 22, 15, 0.55), 0 0 0 2px var(--brand);
}
.iq-kit:is(body,#iqk#iqk) .tour-modal {
padding: 24px 24px 20px;
border: 1px solid var(--k-line);
border-radius: var(--k-r);
background: var(--k-panel);
box-shadow: var(--k-pop);
backdrop-filter: none;
-webkit-backdrop-filter: none;
transition: opacity 0.2s var(--k-ease), transform 0.2s var(--k-ease);
}
.iq-kit:is(body,#iqk#iqk) .tour-riq-avatar {
position: static;
display: inline-block;
margin: 0 0 4px;
padding: 0;
border-radius: 50%;
background: none;
box-shadow: none;
}
.iq-kit:is(body,#iqk#iqk) .tour-riq-avatar img {
width: 44px;
height: 44px;
padding: 0;
border: 1px solid var(--k-line);
background: var(--k-canvas);
}
.iq-kit:is(body,#iqk#iqk) .tour-content { margin-top: 8px; }
.iq-kit:is(body,#iqk#iqk) .tour-content h3 {
margin: 0 0 8px;
font-family: var(--k-serif);
font-size: 24px;
font-weight: 400;
letter-spacing: -0.01em;
line-height: 1.2;
color: var(--k-ink);
}
.iq-kit:is(body,#iqk#iqk) .tour-content p { margin: 0 0 12px; color: var(--k-ink-soft); font-size: 14.5px; line-height: 1.55; }
.iq-kit:is(body,#iqk#iqk) .tour-progress { height: 3px; margin-top: 12px; border-radius: 0; background: var(--k-line-soft); }
.iq-kit:is(body,#iqk#iqk) .tour-progress-bar { border-radius: 0; background: var(--brand); }
.iq-kit:is(body,#iqk#iqk) .tour-progress-bar::after { content: none; display: none; }
.iq-kit:is(body,#iqk#iqk) .tour-buttons { margin-top: 18px; gap: 8px; }
.iq-kit:is(body,#iqk#iqk) .tour-btn {
height: 38px;
padding: 0 16px;
border: 1px solid var(--k-line-strong);
border-radius: var(--k-r);
background: var(--k-panel);
color: var(--k-ink);
font-family: var(--k-sans);
font-size: 14px;
font-weight: 500;
box-shadow: none;
transform: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.iq-kit:is(body,#iqk#iqk) .tour-btn:hover { background: var(--k-band); border-color: var(--k-ink-soft); transform: none; }
.iq-kit:is(body,#iqk#iqk) .tour-btn-primary { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }
.iq-kit:is(body,#iqk#iqk) .tour-btn-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: #fff; box-shadow: none; }
.iq-kit:is(body,#iqk#iqk) .tour-close {
top: 14px;
right: 14px;
border-radius: var(--k-r);
background: transparent;
color: var(--k-muted);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.iq-kit:is(body,#iqk#iqk) .tour-close:hover { background: var(--k-band); color: var(--k-ink); transform: none; }
.iq-kit:is(body,#iqk#iqk) .tour-highlight { border-radius: var(--k-r); }
/* "Tour" button: the nine-stage onboarding (js/reconcileiq-onboarding.js) */
/* centred on the page (the 50px offset was for a sidebar the page no longer pins open);
deliberately no backdrop: the tour has always left the page usable behind it */
.iq-kit:is(body,#iqk#iqk) #reconcileiq-onboarding-container { left: 0; }
.iq-kit:is(body,#iqk#iqk) #reconcileiq-onboarding-container .riq-tour-modal {
max-width: 980px;
max-height: calc(100% - 40px);
border: 1px solid var(--k-line);
border-radius: var(--k-r);
background: var(--k-panel);
box-shadow: var(--k-pop);
font-family: var(--k-sans);
color: var(--k-ink-soft);
}
.iq-kit:is(body,#iqk#iqk) #reconcileiq-onboarding-container .riq-tour-progress { height: 3px; background: var(--k-line-soft); }
.iq-kit:is(body,#iqk#iqk) #reconcileiq-onboarding-container .riq-tour-progress-fill { background: var(--brand); }
.iq-kit:is(body,#iqk#iqk) #reconcileiq-onboarding-container .riq-tour-progress-fill::after { content: none; display: none; }
.iq-kit:is(body,#iqk#iqk) #reconcileiq-onboarding-container .riq-stage-indicators { padding: 14px; background: var(--k-panel); border-bottom: 1px solid var(--k-line-soft); }
.iq-kit:is(body,#iqk#iqk) #reconcileiq-onboarding-container .riq-stage-dot { width: 8px; height: 8px; background: var(--k-line); box-shadow: none; transform: none; }
.iq-kit:is(body,#iqk#iqk) #reconcileiq-onboarding-container .riq-stage-dot.completed { background: var(--brand-line); }
.iq-kit:is(body,#iqk#iqk) #reconcileiq-onboarding-container .riq-stage-dot.active { background: var(--brand); box-shadow: none; transform: none; }
.iq-kit:is(body,#iqk#iqk) #reconcileiq-onboarding-container .riq-tour-content { padding: 28px 36px; }
.iq-kit:is(body,#iqk#iqk) #reconcileiq-onboarding-container .riq-speech h1 {
margin: 0 0 8px;
font-family: var(--k-serif);
font-size: 28px;
font-weight: 400;
letter-spacing: -0.015em;
color: var(--k-ink);
background: none;
-webkit-text-fill-color: currentColor;
}
.iq-kit:is(body,#iqk#iqk) #reconcileiq-onboarding-container .riq-speech p { color: var(--k-ink-soft); font-size: 15px; }
.iq-kit:is(body,#iqk#iqk) #reconcileiq-onboarding-container .riq-avatar { background: none; box-shadow: none; }
.iq-kit:is(body,#iqk#iqk) #reconcileiq-onboarding-container .riq-section-header h2 { font-family: var(--k-serif); font-weight: 400; color: var(--k-ink); background: none; -webkit-text-fill-color: currentColor; }
.iq-kit:is(body,#iqk#iqk) #reconcileiq-onboarding-container .riq-section-icon { border-radius: var(--k-r); background: var(--brand-wash); color: var(--brand-deep); box-shadow: none; }
.iq-kit:is(body,#iqk#iqk) #reconcileiq-onboarding-container .riq-info-box { border: 1px solid var(--k-line); border-left: 2px solid var(--brand); border-radius: var(--k-r); background: var(--k-band); }
.iq-kit:is(body,#iqk#iqk) #reconcileiq-onboarding-container .riq-info-box .icon { color: var(--brand-ink); }
.iq-kit:is(body,#iqk#iqk) #reconcileiq-onboarding-container .riq-warning-box { border: 1px solid #e8cfa6; border-left: 2px solid var(--k-warn); border-radius: var(--k-r); background: var(--k-warn-wash); }
.iq-kit:is(body,#iqk#iqk) #reconcileiq-onboarding-container .riq-warning-box.critical { border-color: #ecc8c4; border-left-color: var(--k-bad); background: var(--k-bad-wash); }
.iq-kit:is(body,#iqk#iqk) #reconcileiq-onboarding-container .riq-warning-box.success { border-color: #c4dfcd; border-left-color: var(--k-ok); background: var(--k-ok-wash); }
.iq-kit:is(body,#iqk#iqk) #reconcileiq-onboarding-container :is(.riq-method-card, .riq-excel-wrapper, .riq-mapping-column, .riq-matching-item, .riq-batch-item, .riq-verification-panel, .riq-checklist) {
border-radius: var(--k-r);
box-shadow: none;
transform: none;
}
.iq-kit:is(body,#iqk#iqk) #reconcileiq-onboarding-container .riq-method-card { border: 1px solid var(--k-line); background: var(--k-panel); }
.iq-kit:is(body,#iqk#iqk) #reconcileiq-onboarding-container .riq-method-card:hover { border-color: var(--k-line-strong); transform: none; box-shadow: none; }
.iq-kit:is(body,#iqk#iqk) #reconcileiq-onboarding-container .riq-method-card h3 { font-family: var(--k-serif); font-weight: 500; color: var(--k-ink); }
.iq-kit:is(body,#iqk#iqk) #reconcileiq-onboarding-container .riq-method-card .icon { border-radius: var(--k-r); background: var(--brand-wash); color: var(--brand-deep); box-shadow: none; }
.iq-kit:is(body,#iqk#iqk) #reconcileiq-onboarding-container .riq-checklist-check { border-radius: var(--k-r); background: var(--brand-deep); box-shadow: none; }
.iq-kit:is(body,#iqk#iqk) #reconcileiq-onboarding-container .riq-verification-panel-header { border-radius: 0; background: var(--k-band); color: var(--k-ink); font-family: var(--k-mono); letter-spacing: 0.08em; }
.iq-kit:is(body,#iqk#iqk) #reconcileiq-onboarding-container .riq-verification-panel.pdf .riq-verification-panel-header { background: var(--k-bad-wash); color: var(--k-bad); border-bottom: 1px solid #ecc8c4; }
.iq-kit:is(body,#iqk#iqk) #reconcileiq-onboarding-container .riq-verification-panel.csv .riq-verification-panel-header { background: var(--k-ok-wash); color: var(--k-ok); border-bottom: 1px solid #c4dfcd; }
.iq-kit:is(body,#iqk#iqk) #reconcileiq-onboarding-container .riq-verification-panel { border: 1px solid var(--k-line); }
.iq-kit:is(body,#iqk#iqk) #reconcileiq-onboarding-container .riq-tour-footer { padding: 14px 36px; border-top: 1px solid var(--k-line-soft); background: var(--k-canvas); }
.iq-kit:is(body,#iqk#iqk) #reconcileiq-onboarding-container .riq-stage-label { color: var(--k-muted); font-family: var(--k-mono); font-size: 12px; letter-spacing: 0.04em; }
.iq-kit:is(body,#iqk#iqk) #reconcileiq-onboarding-container .riq-stage-label span { color: var(--k-ink); font-weight: 500; }
.iq-kit:is(body,#iqk#iqk) #reconcileiq-onboarding-container .riq-btn { height: 40px; padding: 0 18px; border-radius: var(--k-r); font-family: var(--k-sans); font-size: 14px; font-weight: 500; box-shadow: none; transform: none; }
.iq-kit:is(body,#iqk#iqk) #reconcileiq-onboarding-container .riq-btn-primary { border: 1px solid var(--brand-deep); background: var(--brand-deep); color: #fff; }
.iq-kit:is(body,#iqk#iqk) #reconcileiq-onboarding-container .riq-btn-primary:hover { background: var(--brand-hover); box-shadow: none; transform: none; }
.iq-kit:is(body,#iqk#iqk) #reconcileiq-onboarding-container .riq-btn-primary svg, .iq-kit:is(body,#iqk#iqk) #reconcileiq-onboarding-container .riq-btn-primary:hover svg { stroke: #fff; transform: none; }
.iq-kit:is(body,#iqk#iqk) #reconcileiq-onboarding-container .riq-btn-success { border: 1px solid var(--k-ok); background: var(--k-ok); color: #fff; }
.iq-kit:is(body,#iqk#iqk) #reconcileiq-onboarding-container .riq-btn-success:hover { background: #24643f; box-shadow: none; transform: none; }
.iq-kit:is(body,#iqk#iqk) #reconcileiq-onboarding-container .riq-btn-success svg { stroke: #fff; }
/* LedgerIQ tour: the card is drawn inside its iframe (ledgeriq-onboarding-tour.html
carries its own kit block), so the parent frame is just a clear holder on a kit backdrop */
.iq-kit:is(body,#iqk#iqk) #ledgeriq-onboarding-container { left: 0; background: rgba(26, 22, 15, 0.42); backdrop-filter: none; }
.iq-kit:is(body,#iqk#iqk) #ledgeriq-onboarding-container .liq-tour-modal { background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.iq-kit:is(body,#iqk#iqk) #ledgeriq-onboarding-container iframe { border-radius: 0; background: transparent; }
/* ---------- 7b. Review screen (results.html) ---------- */
.iq-kit:is(body,#iqk#iqk) .results-container { max-width: 1200px; padding: 40px 24px 96px; }
.iq-kit:is(body,#iqk#iqk) .results-header {
align-items: flex-end;
gap: 24px;
margin: 0 0 20px;
padding: 24px 28px 22px;
border: 1px solid var(--k-line);
border-radius: var(--k-r);
background: var(--k-panel);
box-shadow: none;
}
.iq-kit:is(body,#iqk#iqk) .results-header::before { content: none; display: none; }
/* title block first, full width; the page actions sit under it */
.iq-kit:is(body,#iqk#iqk) .results-header { display: grid; grid-template-columns: auto 1fr auto; column-gap: 8px; row-gap: 18px; align-items: center; }
.iq-kit:is(body,#iqk#iqk) .results-header .header-meta { order: 0; grid-column: 1 / -1; align-items: flex-start; text-align: left; }
.iq-kit:is(body,#iqk#iqk) .header-left-actions { gap: 8px; flex-wrap: wrap; order: 1; grid-column: 1; }
.iq-kit:is(body,#iqk#iqk) .results-header .help-button { order: 2; grid-column: 3; justify-self: end; }
.iq-kit:is(body,#iqk#iqk) .results-header h1 { display: flex; align-items: center; gap: 8px; max-width: 100%; }
.iq-kit:is(body,#iqk#iqk) #currentReconciliationName { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iq-kit:is(body,#iqk#iqk) .results-header .header-eyebrow {
font-family: var(--k-mono);
font-size: 11.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--k-muted);
}
.iq-kit:is(body,#iqk#iqk) .results-header h1 {
margin: 6px 0 4px;
font-family: var(--k-serif);
font-size: 30px;
font-weight: 400;
letter-spacing: -0.015em;
line-height: 1.15;
color: var(--k-ink);
}
.iq-kit:is(body,#iqk#iqk) #processedTime {
font-family: var(--k-mono);
font-size: 11.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--k-muted);
}
/* one button language across the review screen */
.iq-kit:is(body,#iqk#iqk) .results-container :is(.back-button, .action-button, .help-button, .export-button, .clear-button),
.iq-kit:is(body,#iqk#iqk) .history-sidebar .action-button,
.iq-kit:is(body,#iqk#iqk) .modal :is(.action-button, .close-button-bottom),
.iq-kit:is(body,#iqk#iqk) .instructions.modal-container .action-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 36px;
padding: 0 14px;
border: 1px solid var(--k-line-strong);
border-radius: var(--k-r);
background: var(--k-panel);
color: var(--k-ink);
font-family: var(--k-sans);
font-size: 13.5px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
box-shadow: none;
transform: none;
cursor: pointer;
}
.iq-kit:is(body,#iqk#iqk) .results-container :is(.back-button, .action-button, .help-button, .export-button, .clear-button):hover,
.iq-kit:is(body,#iqk#iqk) .history-sidebar .action-button:hover,
.iq-kit:is(body,#iqk#iqk) .modal :is(.action-button, .close-button-bottom):hover,
.iq-kit:is(body,#iqk#iqk) .instructions.modal-container .action-button:hover {
background: var(--k-band);
border-color: var(--k-ink-soft);
color: var(--k-ink);
transform: none;
box-shadow: none;
}
.iq-kit:is(body,#iqk#iqk) .results-container :is(.back-button, .export-button.primary, .action-button.primary),
.iq-kit:is(body,#iqk#iqk) .modal .action-button.primary,
.iq-kit:is(body,#iqk#iqk) .instructions.modal-container .action-button.primary {
background: var(--brand-deep);
border-color: var(--brand-deep);
color: #fff;
}
.iq-kit:is(body,#iqk#iqk) .results-container :is(.back-button, .export-button.primary, .action-button.primary):hover,
.iq-kit:is(body,#iqk#iqk) .modal .action-button.primary:hover,
.iq-kit:is(body,#iqk#iqk) .instructions.modal-container .action-button.primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: #fff; }
.iq-kit:is(body,#iqk#iqk) .instructions.modal-container .action-button:disabled { opacity: 0.45; cursor: default; }
.iq-kit:is(body,#iqk#iqk) .results-container .action-button.positive,
.iq-kit:is(body,#iqk#iqk) .modal .action-button.positive { border-color: #b7d6c1; color: var(--k-ok); }
.iq-kit:is(body,#iqk#iqk) .results-container .action-button.positive:hover,
.iq-kit:is(body,#iqk#iqk) .modal .action-button.positive:hover { background: var(--k-ok-wash); border-color: var(--k-ok); color: var(--k-ok); }
.iq-kit:is(body,#iqk#iqk) :is(.results-container, .history-sidebar) .action-button.danger { border-color: #e2b9b5; color: var(--k-bad); }
.iq-kit:is(body,#iqk#iqk) :is(.results-container, .history-sidebar) .action-button.danger:hover { background: var(--k-bad-wash); border-color: var(--k-bad); color: var(--k-bad); }
.iq-kit:is(body,#iqk#iqk) .results-container .help-button { border-color: transparent; background: transparent; color: var(--k-ink-soft); }
.iq-kit:is(body,#iqk#iqk) .results-container .help-button:hover { background: var(--k-band); border-color: transparent; }
.iq-kit:is(body,#iqk#iqk) .results-container :is(.back-button, .action-button, .help-button, .export-button) svg { width: 16px; height: 16px; margin: 0; }
.iq-kit:is(body,#iqk#iqk) :is(.results-container, .history-sidebar) .small { height: 30px; padding: 0 10px; font-size: 12.5px; }
.iq-kit:is(body,#iqk#iqk) :is(.results-container, .history-sidebar, .modal) .link-button { border-radius: var(--k-r); color: var(--brand-ink); }
.iq-kit:is(body,#iqk#iqk) :is(.results-container, .history-sidebar, .modal) .link-button:hover { background: var(--k-band); color: var(--brand-deep); }
/* summary figures */
.iq-kit:is(body,#iqk#iqk) .summary-cards { gap: 0; margin: 0 0 20px; border: 1px solid var(--k-line); border-radius: var(--k-r); background: var(--k-panel); }
.iq-kit:is(body,#iqk#iqk) .summary-card {
display: block;
padding: 18px 22px 20px;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
transform: none;
}
.iq-kit:is(body,#iqk#iqk) .summary-card + .summary-card { border-left: 1px solid var(--k-line-soft); }
.iq-kit:is(body,#iqk#iqk) .summary-card::before,
.iq-kit:is(body,#iqk#iqk) .summary-card::after { content: none; display: none; }
.iq-kit:is(body,#iqk#iqk) .summary-card:hover { transform: none; box-shadow: none; }
.iq-kit:is(body,#iqk#iqk) .summary-card .card-icon { display: none; }
.iq-kit:is(body,#iqk#iqk) .summary-card h3 {
margin: 0 0 10px;
font-family: var(--k-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--k-muted);
}
.iq-kit:is(body,#iqk#iqk) .summary-card .card-value {
font-family: var(--k-serif);
font-size: 30px;
font-weight: 400;
letter-spacing: -0.015em;
line-height: 1.1;
color: var(--k-ink);
}
.iq-kit:is(body,#iqk#iqk) .summary-card.negative .card-value { color: var(--k-bad); }
.iq-kit:is(body,#iqk#iqk) .summary-card.positive .card-value { color: var(--k-ok); }
.iq-kit:is(body,#iqk#iqk) .summary-card .card-value.negative { color: var(--k-bad); }
.iq-kit:is(body,#iqk#iqk) .summary-card .card-value.positive { color: var(--k-ok); }
.iq-kit:is(body,#iqk#iqk) .summary-card .impact-label {
margin: 6px 0 0;
font-family: var(--k-mono);
font-size: 12px;
color: var(--k-muted);
}
.iq-kit:is(body,#iqk#iqk) .summary-card .impact-label.negative { color: var(--k-bad); }
.iq-kit:is(body,#iqk#iqk) .summary-card .impact-label.positive { color: var(--k-ok); }
/* tabs: underline, brand on the active one */
.iq-kit:is(body,#iqk#iqk) .tab-navigation {
display: flex;
flex-wrap: wrap;
gap: 0 4px;
margin: 0 0 20px;
padding: 0;
border: 0;
border-bottom: 1px solid var(--k-line);
border-radius: 0;
background: none;
box-shadow: none;
}
.iq-kit:is(body,#iqk#iqk) .tab-navigation .tab-button {
display: inline-flex;
align-items: center;
gap: 8px;
height: 44px;
margin: 0 0 -1px;
padding: 0 14px;
border: 0;
border-bottom: 2px solid transparent;
border-radius: 0;
background: none;
color: var(--k-muted);
font-family: var(--k-sans);
font-size: 14px;
font-weight: 500;
box-shadow: none;
transform: none;
flex: 0 0 auto;
}
.iq-kit:is(body,#iqk#iqk) .tab-navigation .tab-button:hover { color: var(--k-ink); background: none; }
.iq-kit:is(body,#iqk#iqk) .tab-navigation .tab-button.active,
.iq-kit:is(body,#iqk#iqk) .tab-navigation .tab-button.active:hover { color: var(--k-ink); background: none; border-bottom-color: var(--brand); box-shadow: none; }
.iq-kit:is(body,#iqk#iqk) .tab-navigation .tab-button .transaction-count {
min-width: 22px;
height: 20px;
padding: 0 6px;
border-radius: var(--k-r);
background: var(--k-band-2);
color: var(--k-ink-soft);
font-family: var(--k-mono);
font-size: 11px;
font-weight: 500;
line-height: 20px;
text-align: center;
}
.iq-kit:is(body,#iqk#iqk) .tab-navigation .tab-button.active .transaction-count { background: var(--brand-wash); color: var(--brand-deep); }
/* export rows */
.iq-kit:is(body,#iqk#iqk) .export-panel {
margin: 0 0 20px;
padding: 14px 16px;
border: 1px solid var(--k-line);
border-radius: var(--k-r);
background: var(--k-panel);
box-shadow: none;
}
.iq-kit:is(body,#iqk#iqk) .export-panel::before { content: none; display: none; }
.iq-kit:is(body,#iqk#iqk) .export-buttons { gap: 8px; }
.iq-kit:is(body,#iqk#iqk) #bottomExport { margin-top: 24px; background: var(--k-band); }
/* tables and their panels */
.iq-kit:is(body,#iqk#iqk) .table-controls { margin: 0 0 12px; gap: 10px; align-items: center; }
.iq-kit:is(body,#iqk#iqk) .table-controls label {
font-family: var(--k-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--k-muted);
}
.iq-kit:is(body,#iqk#iqk) .results-container :is(select, input[type="text"], input[type="search"], input[type="number"], input[type="date"]) {
height: 36px;
padding: 0 10px;
border: 1px solid var(--k-line-strong);
border-radius: var(--k-r);
background-color: var(--k-panel);
color: var(--k-ink);
font-family: var(--k-sans);
font-size: 13.5px;
box-shadow: none;
}
.iq-kit:is(body,#iqk#iqk) .results-container :is(select, input):focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px var(--brand-wash); }
.iq-kit:is(body,#iqk#iqk) .transactions-panel {
border: 1px solid var(--k-line);
border-radius: var(--k-r);
background: var(--k-panel);
box-shadow: none;
}
.iq-kit:is(body,#iqk#iqk) .transactions-panel::before { content: none; display: none; }
.iq-kit:is(body,#iqk#iqk) .transactions-panel .panel-header h2,
.iq-kit:is(body,#iqk#iqk) .transactions-panel .panel-header h3 {
font-family: var(--k-serif);
font-size: 22px;
font-weight: 400;
letter-spacing: -0.01em;
color: var(--k-ink);
}
.iq-kit:is(body,#iqk#iqk) .transactions-panel .header-description { color: var(--k-muted); font-size: 13.5px; }
.iq-kit:is(body,#iqk#iqk) .transactions-panel .summary-label {
font-family: var(--k-mono);
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--k-muted);
}
.iq-kit:is(body,#iqk#iqk) .transactions-panel .summary-value { font-family: var(--k-mono); font-size: 15px; font-weight: 500; color: var(--k-ink); }
.iq-kit:is(body,#iqk#iqk) .filter-section {
border: 1px solid var(--k-line-soft);
border-radius: var(--k-r);
background: var(--k-band);
box-shadow: none;
}
.iq-kit:is(body,#iqk#iqk) .filter-section label,
.iq-kit:is(body,#iqk#iqk) .filter-controls span { color: var(--k-muted); font-size: 13px; }
.iq-kit:is(body,#iqk#iqk) .table-container { border: 1px solid var(--k-line); border-radius: var(--k-r); background: var(--k-panel); box-shadow: none; }
.iq-kit:is(body,#iqk#iqk) .transactions-table { border-collapse: collapse; }
.iq-kit:is(body,#iqk#iqk) .transactions-table th {
height: 40px;
padding: 0 14px;
border: 0;
border-bottom: 1px solid var(--k-line);
background: var(--k-band);
color: var(--k-muted);
font-family: var(--k-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.iq-kit:is(body,#iqk#iqk) .transactions-table th.sortable:hover { color: var(--k-ink); background: var(--k-band-2); }
.iq-kit:is(body,#iqk#iqk) .transactions-table td {
padding: 12px 14px;
border: 0;
border-bottom: 1px solid var(--k-line-soft);
background: none;
color: var(--k-ink);
font-size: 14px;
}
.iq-kit:is(body,#iqk#iqk) .transactions-table tbody tr { background: var(--k-panel); }
.iq-kit:is(body,#iqk#iqk) .transactions-table tbody tr:nth-child(even) { background: #fcfbf8; }
.iq-kit:is(body,#iqk#iqk) .transactions-table tbody tr:hover { background: var(--k-band); }
.iq-kit:is(body,#iqk#iqk) .transactions-table tbody tr:last-child td { border-bottom: 0; }
.iq-kit:is(body,#iqk#iqk) .transactions-table .amount-cell { font-family: var(--k-mono); font-size: 13.5px; }
.iq-kit:is(body,#iqk#iqk) .transactions-table .amount-cell.negative { color: var(--k-bad); }
.iq-kit:is(body,#iqk#iqk) .transactions-table .amount-cell.positive { color: var(--k-ok); }
.iq-kit:is(body,#iqk#iqk) .transactions-table .likelihood-cell { font-family: var(--k-mono); font-size: 13px; color: var(--k-ink-soft); }
.iq-kit:is(body,#iqk#iqk) .transactions-table tbody tr td.actions-cell { background: inherit; }
.iq-kit:is(body,#iqk#iqk) .transactions-table .actions-cell button {
height: 30px;
padding: 0 10px;
border: 1px solid var(--k-line-strong);
border-radius: var(--k-r);
background: var(--k-panel);
color: var(--k-ink);
font-size: 12.5px;
font-weight: 500;
box-shadow: none;
}
.iq-kit:is(body,#iqk#iqk) .transactions-table .actions-cell button:hover { background: var(--k-band); border-color: var(--k-ink-soft); }
.iq-kit:is(body,#iqk#iqk) .panel-footer { border-top: 1px solid var(--k-line-soft); }
.iq-kit:is(body,#iqk#iqk) .pagination-info { font-family: var(--k-mono); font-size: 12px; color: var(--k-muted); }
.iq-kit:is(body,#iqk#iqk) .no-data,
.iq-kit:is(body,#iqk#iqk) .no-results-message { color: var(--k-muted); font-size: 14px; }
/* overview + patterns: every card the same flat panel */
.iq-kit:is(body,#iqk#iqk) :is(.insights-panel, .visualization-panel, .pattern-analysis-panel) { border: 0; background: none; box-shadow: none; padding: 0; }
.iq-kit:is(body,#iqk#iqk) :is(.insight-card, .chart-section, .pattern-section, .recommendation-card, .recommendation-item, .quick-stats) {
border: 1px solid var(--k-line);
border-radius: var(--k-r);
background: var(--k-panel);
box-shadow: none;
transform: none;
}
/* overview header: title, then the four counts as one ruled strip */
.iq-kit:is(body,#iqk#iqk) .insights-header { display: block; margin: 0 0 16px; }
.iq-kit:is(body,#iqk#iqk) .insights-stats { margin: 12px 0 0; padding: 0; border: 0; background: none; box-shadow: none; }
.iq-kit:is(body,#iqk#iqk) .quick-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 0; }
.iq-kit:is(body,#iqk#iqk) .quick-stats .stat-item { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 12px 16px; border: 0; border-radius: 0; background: none; box-shadow: none; }
.iq-kit:is(body,#iqk#iqk) .quick-stats .stat-item + .stat-item { border-left: 1px solid var(--k-line-soft); }
.iq-kit:is(body,#iqk#iqk) .distribution-chart .bar { background: var(--brand); border-radius: 0; box-shadow: none; }
/* matched pairs */
.iq-kit:is(body,#iqk#iqk) .matched-transactions-container { border: 1px solid var(--k-line); border-radius: var(--k-r); background: var(--k-panel); box-shadow: none; }
.iq-kit:is(body,#iqk#iqk) .matched-transactions-container > h3 { font-family: var(--k-serif); font-size: 22px; font-weight: 400; letter-spacing: -0.01em; color: var(--k-ink); }
.iq-kit:is(body,#iqk#iqk) .matched-pair { border: 1px solid var(--k-line); border-radius: var(--k-r); background: var(--k-panel); box-shadow: none; transform: none; }
.iq-kit:is(body,#iqk#iqk) .matched-pair:hover { border-color: var(--k-line-strong); transform: none; box-shadow: none; }
.iq-kit:is(body,#iqk#iqk) .matched-pair .transaction-header { font-family: var(--k-mono); font-size: 10.5px; letter-spacing: 0.14em; color: var(--k-muted); }
.iq-kit:is(body,#iqk#iqk) .matched-pair .transaction-date { font-family: var(--k-mono); font-size: 12px; color: var(--k-muted); }
.iq-kit:is(body,#iqk#iqk) .matched-pair .transaction-amount { font-family: var(--k-mono); }
.iq-kit:is(body,#iqk#iqk) .matched-pair .transaction-amount.negative { color: var(--k-bad); }
.iq-kit:is(body,#iqk#iqk) .matched-pair .transaction-amount.positive { color: var(--k-ok); }
.iq-kit:is(body,#iqk#iqk) .date-diff-badge { border-radius: var(--k-r); font-family: var(--k-mono); }
.iq-kit:is(body,#iqk#iqk) .date-diff-badge.exact-match { background: var(--k-ok-wash); color: var(--k-ok); }
.iq-kit:is(body,#iqk#iqk) .date-diff-badge.near-match { background: var(--k-warn-wash); color: var(--k-warn); }
.iq-kit:is(body,#iqk#iqk) .connection-line { background: var(--k-line); }
.iq-kit:is(body,#iqk#iqk) .expand-toggle {
height: 38px;
border: 1px solid var(--k-line-strong);
border-radius: var(--k-r);
background: var(--k-panel);
color: var(--k-ink);
font-family: var(--k-sans);
font-size: 13.5px;
font-weight: 500;
box-shadow: none;
transform: none;
}
.iq-kit:is(body,#iqk#iqk) .expand-toggle:hover { background: var(--k-band); border-color: var(--k-ink-soft); color: var(--k-ink); transform: none; }
.iq-kit:is(body,#iqk#iqk) .matched-info { border-top: 1px solid var(--k-line-soft); }
.iq-kit:is(body,#iqk#iqk) .matched-stats { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.iq-kit:is(body,#iqk#iqk) .matched-stats .stat-item {
display: inline-flex;
align-items: baseline;
gap: 6px;
padding: 0;
border: 0;
background: none;
font-family: var(--k-mono);
font-size: 13px;
color: var(--k-ink);
}
.iq-kit:is(body,#iqk#iqk) .matched-stats .stat-item strong {
font-family: var(--k-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--k-muted);
}
.iq-kit:is(body,#iqk#iqk) :is(.insight-card, .chart-section, .pattern-section, .recommendation-card):hover { transform: none; box-shadow: none; }
.iq-kit:is(body,#iqk#iqk) .insights-grid .insight-card,
.iq-kit:is(body,#iqk#iqk) .recommendation-card { padding: 16px 18px; }
.iq-kit:is(body,#iqk#iqk) .insight-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 8px; }
.iq-kit:is(body,#iqk#iqk) .insight-header :is(h3, h4, h5) { margin: 0; font-family: var(--k-serif); font-size: 17px; font-weight: 500; letter-spacing: -0.005em; color: var(--k-ink); }
.iq-kit:is(body,#iqk#iqk) .recommendation-card :is(h3, h4, h5) { font-family: var(--k-serif); font-size: 16px; font-weight: 500; color: var(--k-ink); }
.iq-kit:is(body,#iqk#iqk) .insights-section > :is(h3, h4) { font-family: var(--k-serif); font-size: 18px; font-weight: 400; }
.iq-kit:is(body,#iqk#iqk) .details-list-simple { color: var(--k-ink-soft); font-size: 13px; }
.iq-kit:is(body,#iqk#iqk) :is(.day-bar, .trend-bar, .bias-bar) { border-radius: 0; box-shadow: none; }
.iq-kit:is(body,#iqk#iqk) .timing-summary { border-radius: var(--k-r); background: var(--k-band); }
.iq-kit:is(body,#iqk#iqk) :is(.insights-header, .pattern-header, .chart-section) :is(h2, h3) {
font-family: var(--k-serif);
font-weight: 400;
letter-spacing: -0.01em;
color: var(--k-ink);
}
.iq-kit:is(body,#iqk#iqk) .stat-label { font-family: var(--k-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--k-muted); }
.iq-kit:is(body,#iqk#iqk) .stat-value { font-family: var(--k-mono); font-weight: 500; color: var(--k-ink); }
.iq-kit:is(body,#iqk#iqk) :is(.priority-badge, .severity-badge) { border-radius: var(--k-r); font-family: var(--k-mono); font-size: 10.5px; letter-spacing: 0.08em; }
/* history drawer */
.iq-kit:is(body,#iqk#iqk) .history-sidebar {
top: 0;
bottom: 0;
height: auto;
width: 380px;
background: var(--k-panel);
border-left: 1px solid var(--k-line);
box-shadow: none;
}
.iq-kit:is(body,#iqk#iqk) .history-sidebar.open { box-shadow: var(--k-pop); }
.iq-kit:is(body,#iqk#iqk) .history-sidebar .sidebar-header { padding: 20px 20px 14px; border-bottom: 1px solid var(--k-line); }
.iq-kit:is(body,#iqk#iqk) .history-sidebar .sidebar-header h3 { font-family: var(--k-serif); font-size: 22px; font-weight: 400; color: var(--k-ink); }
.iq-kit:is(body,#iqk#iqk) .history-sidebar .sidebar-content { padding: 12px 14px; }
.iq-kit:is(body,#iqk#iqk) .history-item {
align-items: center;
padding: 10px 12px;
border: 1px solid var(--k-line);
border-radius: var(--k-r);
background: var(--k-panel);
}
.iq-kit:is(body,#iqk#iqk) .history-item:hover { background: var(--k-band); border-color: var(--k-line-strong); }
.iq-kit:is(body,#iqk#iqk) .history-item.active { background: var(--brand-wash); border-color: var(--brand-line); box-shadow: inset 2px 0 0 var(--brand); }
.iq-kit:is(body,#iqk#iqk) .history-item .item-info { min-width: 0; overflow: hidden; }
.iq-kit:is(body,#iqk#iqk) .history-item .item-name { font-size: 13.5px; font-weight: 500; }
.iq-kit:is(body,#iqk#iqk) .history-item .item-date { font-family: var(--k-mono); font-size: 11px; color: var(--k-muted); }
.iq-kit:is(body,#iqk#iqk) .history-item .item-actions { flex-shrink: 0; }
.iq-kit:is(body,#iqk#iqk) .history-item .item-actions { gap: 2px; }
.iq-kit:is(body,#iqk#iqk) .history-item .item-actions button {
width: auto;
height: 28px;
padding: 0 8px;
font-size: 12.5px;
border: 1px solid transparent;
border-radius: var(--k-r);
background: transparent;
color: var(--k-muted);
}
.iq-kit:is(body,#iqk#iqk) .history-item .item-actions button:hover { background: var(--k-panel); border-color: var(--k-line); color: var(--k-ink); }
.iq-kit:is(body,#iqk#iqk) .history-sidebar .sidebar-footer { padding: 14px 20px; border-top: 1px solid var(--k-line); background: var(--k-canvas); }
.iq-kit:is(body,#iqk#iqk) .sidebar-overlay { background: rgba(26, 22, 15, 0.28); }
.iq-kit:is(body,#iqk#iqk) > #language-selector,
.iq-kit:is(body,#iqk#iqk) .results-container > #language-selector { top: 12px !important; right: 12px !important; }
.iq-kit:is(body,#iqk#iqk) #language-selector.light .lang-toggle { border-color: var(--k-line); background: var(--k-panel); }
/* batch-analysis toast (inline-styled in results.html): bottom centre, clear of RiQ */
.iq-kit:is(body,#iqk#iqk) #batchAnalysisToast {
left: 0 !important;
right: 0 !important;
bottom: 24px !important;
width: fit-content;
max-width: min(520px, calc(100% - 32px)) !important;
margin: 0 auto;
padding: 11px 16px !important;
border-radius: var(--k-r) !important;
background: var(--k-ink) !important;
color: #fff !important;
font-family: var(--k-sans);
font-size: 13.5px !important;
box-shadow: var(--k-pop) !important;
}
.iq-kit:is(body,#iqk#iqk) #batchAnalysisToast[style*="rgb(16, 185, 129)"] { background: var(--k-ok) !important; }
.iq-kit:is(body,#iqk#iqk) #batchAnalysisToast[style*="rgb(239, 68, 68)"] { background: var(--k-bad) !important; }
/* transaction detail modal (results/components/modal.js) */
.iq-kit:is(body,#iqk#iqk) .modal .modal-header { border-bottom: 1px solid var(--k-line-soft); background: var(--k-panel); }
.iq-kit:is(body,#iqk#iqk) .modal .modal-header :is(h2, h3) { font-family: var(--k-serif); font-weight: 400; color: var(--k-ink); }
.iq-kit:is(body,#iqk#iqk) .modal .modal-footer { border-top: 1px solid var(--k-line-soft); background: var(--k-canvas); }
.iq-kit:is(body,#iqk#iqk) .modal .close-button { border-radius: var(--k-r); background: transparent; color: var(--k-muted); box-shadow: none; }
.iq-kit:is(body,#iqk#iqk) .modal .close-button:hover { background: var(--k-band); color: var(--k-ink); }
.iq-kit:is(body,#iqk#iqk) .modal .detail-row { border-bottom: 1px solid var(--k-line-soft); }
.iq-kit:is(body,#iqk#iqk) .modal :is(.potential-match, .batch-match, .batch-component, .batch-summary) {
border: 1px solid var(--k-line);
border-radius: var(--k-r);
background: var(--k-panel);
box-shadow: none;
}
.iq-kit:is(body,#iqk#iqk) .modal :is(.match-confidence, .batch-match-confidence) { font-family: var(--k-mono); border-radius: var(--k-r); }
/* "How do I use this?" (results/components/instructions-modal.js) */
.iq-kit:is(body,#iqk#iqk) .instructions.modal-header { background: var(--k-panel); border-bottom: 1px solid var(--k-line-soft); color: var(--k-ink); }
.iq-kit:is(body,#iqk#iqk) .instructions.modal-title { font-family: var(--k-serif); font-weight: 400; color: var(--k-ink); }
.iq-kit:is(body,#iqk#iqk) .instructions.modal-close { border-radius: var(--k-r); background: transparent; color: var(--k-muted); }
.iq-kit:is(body,#iqk#iqk) .instructions.modal-close:hover { background: var(--k-band); color: var(--k-ink); }
.iq-kit:is(body,#iqk#iqk) .instructions.card { border: 1px solid var(--k-line); border-radius: var(--k-r); box-shadow: none; background: var(--k-panel); transform: none; }
.iq-kit:is(body,#iqk#iqk) .instructions.card-icon { border-radius: var(--k-r); background: var(--brand-wash); color: var(--brand-deep); }
.iq-kit:is(body,#iqk#iqk) .instructions.highlight-box,
.iq-kit:is(body,#iqk#iqk) .instructions.content-box { border-radius: var(--k-r); border-color: var(--k-line); background: var(--k-band); }
.iq-kit:is(body,#iqk#iqk) .instructions.progress-bar { flex-shrink: 0; height: 2px; margin: 0; border-radius: 0; background: var(--k-line-soft); }
.iq-kit:is(body,#iqk#iqk) .instructions.progress-value { border-radius: 0; background: var(--brand); }
.iq-kit:is(body,#iqk#iqk) .instructions.modal-footer { border-top: 1px solid var(--k-line-soft); background: var(--k-canvas); }
.iq-kit:is(body,#iqk#iqk) .instructions.modal-container { border: 1px solid var(--k-line); border-radius: var(--k-r); box-shadow: var(--k-pop); }
.iq-kit:is(body,#iqk#iqk) .instructions.tabs { display: flex; flex-shrink: 0; gap: 2px; height: auto; margin: 0; padding: 0 16px; border-bottom: 1px solid var(--k-line); background: var(--k-panel); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.iq-kit:is(body,#iqk#iqk) .instructions.tab-button {
height: 40px;
margin: 0 0 -1px;
padding: 0 10px;
border: 0;
border-bottom: 2px solid transparent;
border-radius: 0;
background: none;
color: var(--k-muted);
font-family: var(--k-sans);
font-size: 13.5px;
font-weight: 500;
white-space: nowrap;
}
.iq-kit:is(body,#iqk#iqk) .instructions.tab-button:hover { color: var(--k-ink); background: none; }
.iq-kit:is(body,#iqk#iqk) .instructions.tab-button.active { color: var(--k-ink); border-bottom-color: var(--brand); }
/* ReconcileIQ "Select Bank and Software" guide (#instructionsModal) */
.iq-kit:is(body,#iqk#iqk) #instructionsModal .modal-content { padding: 24px 28px 28px; }
.iq-kit:is(body,#iqk#iqk) .modal .close-btn {
top: 14px;
right: 14px;
width: 32px;
height: 32px;
padding: 0;
border: 1px solid transparent;
border-radius: var(--k-r);
background: transparent;
color: var(--k-muted);
box-shadow: none;
}
.iq-kit:is(body,#iqk#iqk) .modal .close-btn { position: absolute; display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; z-index: 2; }
.iq-kit:is(body,#iqk#iqk) .modal .modal-content > h2 { padding-right: 40px; }
.iq-kit:is(body,#iqk#iqk) .modal #instructionsContent h4 { margin: 0 0 10px; font-family: var(--k-sans); font-size: 14px; font-weight: 600; color: var(--k-ink); }
.iq-kit:is(body,#iqk#iqk) .modal #instructionsContent p { margin: 0 0 8px; color: var(--k-ink-soft); font-size: 14px; line-height: 1.55; }
.iq-kit:is(body,#iqk#iqk) .modal .close-btn:hover { background: var(--k-band); color: var(--k-ink); }
.iq-kit:is(body,#iqk#iqk) .modal .close-btn svg { width: 18px; height: 18px; }
.iq-kit:is(body,#iqk#iqk) .modal .modal-content { position: relative; }
.iq-kit:is(body,#iqk#iqk) #instructionsModal h2 { margin: 0 0 16px; font-size: 24px; }
.iq-kit:is(body,#iqk#iqk) #instructionsModal .explainer {
margin: 0 0 16px;
padding: 14px 16px;
border: 1px solid var(--k-line);
border-radius: var(--k-r);
background: var(--k-band);
color: var(--k-ink-soft);
font-size: 14px;
}
.iq-kit:is(body,#iqk#iqk) #instructionsModal .explainer h3 {
margin: 0 0 8px;
font-family: var(--k-serif);
font-size: 18px;
font-weight: 500;
color: var(--k-ink);
background: none;
-webkit-text-fill-color: currentColor;
}
.iq-kit:is(body,#iqk#iqk) #instructionsModal .explainer h4 { font-size: 13.5px; color: var(--k-ink); }
.iq-kit:is(body,#iqk#iqk) #instructionsModal summary { color: var(--brand-ink); font-weight: 500; cursor: pointer; }
.iq-kit:is(body,#iqk#iqk) #instructionsModal button:not(.close-btn) {
height: 38px;
padding: 0 14px;
border: 1px solid var(--brand-deep);
border-radius: var(--k-r);
background: var(--brand-deep);
color: #fff;
font-family: var(--k-sans);
font-size: 13.5px;
font-weight: 500;
box-shadow: none;
}
.iq-kit:is(body,#iqk#iqk) #instructionsModal button:not(.close-btn):hover { background: var(--brand-hover); }
.iq-kit:is(body,#iqk#iqk) #instructionsModal .instructions-content,
.iq-kit:is(body,#iqk#iqk) #instructionsModal pre {
border: 1px solid var(--k-line);
border-radius: var(--k-r);
background: var(--k-canvas);
color: var(--k-ink-soft);
font-family: var(--k-mono);
font-size: 12.5px;
}
/* ---------- 8a. Narrow header: page links fold into the menu button ---------- */
@media (max-width: 992px) {
.iq-kit:is(body,#iqk#iqk) .k-topbar .mobile-menu-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
border: 1px solid var(--k-line);
border-radius: var(--k-r);
}
.iq-kit:is(body,#iqk#iqk) .k-topbar .mobile-menu-toggle svg { width: 17px; height: 17px; }
.iq-kit:is(body,#iqk#iqk) .k-topbar .nav-links { display: none; }
.iq-kit:is(body,#iqk#iqk) .k-topbar .nav-links.active {
position: absolute;
top: calc(var(--k-bar) - 1px);
right: 12px;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 2px;
width: 240px;
padding: 8px;
border: 1px solid var(--k-line);
border-radius: var(--k-r);
background: var(--k-panel);
box-shadow: var(--k-pop);
animation: none;
z-index: 10010;
}
.iq-kit:is(body,#iqk#iqk) .k-topbar .nav-links.active a:not(.k-btn) { justify-content: flex-start; height: 36px; border: 0; }
.iq-kit:is(body,#iqk#iqk) .k-topbar .nav-links.active a.k-btn { margin: 4px 0 0; height: 36px; }
.iq-kit:is(body,#iqk#iqk) .k-topbar .nav-links.active #userInfo { margin: 0 0 4px; padding: 4px 6px 8px; border-bottom: 1px solid var(--k-line-soft); justify-content: space-between; }
}
/* ---------- 8. Phone ---------- */
@media (max-width: 768px) {
.iq-kit:is(body,#iqk#iqk) { --k-bar: 56px; }
.iq-kit:is(body,#iqk#iqk) .k-topbar { padding: 0 16px 0 62px; gap: 8px; }
.iq-kit:is(body,#iqk#iqk) .sidebar-toggle { left: 14px; }
.iq-kit:is(body,#iqk#iqk) .k-topbar .brand a { font-size: 19px; }
.iq-kit:is(body,#iqk#iqk) .k-topbar .nav-right-items { border-left: 0; padding-left: 0; margin-left: 0; }
.iq-kit:is(body,#iqk#iqk) .k-topbar nav.top-nav .nav-right-items a.help-link,
.iq-kit:is(body,#iqk#iqk) .k-topbar nav.top-nav .nav-right-items a.api-link { display: none; }
.iq-kit:is(body,#iqk#iqk) main.main-content { padding: 20px 16px 72px; }
.iq-kit:is(body,#iqk#iqk) .k-utility { position: static; margin: 0 0 16px; }
.iq-kit:is(body,#iqk#iqk) .k-switcher-wrap { margin: 0 0 28px; }
.iq-kit:is(body,#iqk#iqk) .k-switcher button { padding: 0 12px; font-size: 14px; }
.iq-kit:is(body,#iqk#iqk) .k-hero .header-title .brand-mark { font-size: 44px; }
.iq-kit:is(body,#iqk#iqk) .k-hero .k-mark img { height: 46px; }
.iq-kit:is(body,#iqk#iqk) .k-hero .header-description { font-size: 17px; }
.iq-kit:is(body,#iqk#iqk) .k-panel { padding: 20px 16px 24px; }
.iq-kit:is(body,#iqk#iqk) .k-meter .credit-counts { grid-template-columns: 1fr; row-gap: 12px; }
.iq-kit:is(body,#iqk#iqk) .k-panel .view-history-tab { position: static; display: flex; width: fit-content; margin: 0 0 12px auto; }
.iq-kit:is(body,#iqk#iqk) .k-meter .credits-progress-info { padding-right: 0; }
.iq-kit:is(body,#iqk#iqk) .k-meter .credit-item + .credit-item { padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--k-line-soft); }
.iq-kit:is(body,#iqk#iqk) .k-drop {
grid-template-columns: 36px minmax(0, 1fr);
grid-template-areas: "icon title" "icon hint" "btn btn";
row-gap: 4px;
}
.iq-kit:is(body,#iqk#iqk) .k-drop .file-icon { width: 36px; height: 36px; }
.iq-kit:is(body,#iqk#iqk) .k-drop .file-text,
.iq-kit:is(body,#iqk#iqk) .k-drop .file-disclosure { white-space: normal; }
.iq-kit:is(body,#iqk#iqk) .k-drop .file-button { justify-content: center; margin: 10px 0 0; }
.iq-kit:is(body,#iqk#iqk) .k-panel .file-name { margin-left: 0; }
.iq-kit:is(body,#iqk#iqk) .view-connections-btn .mini-logos { display: none; }
.iq-kit:is(body,#iqk#iqk) .k-seg { grid-auto-flow: row; }
.iq-kit:is(body,#iqk#iqk) .results-container { padding: 56px 16px 72px; }
.iq-kit:is(body,#iqk#iqk) .results-header { padding: 18px 16px; row-gap: 12px; }
.iq-kit:is(body,#iqk#iqk) .results-header h1 { font-size: 24px; }
.iq-kit:is(body,#iqk#iqk) .summary-cards { grid-template-columns: 1fr 1fr; }
.iq-kit:is(body,#iqk#iqk) .summary-card:nth-child(3) { border-left: 0; }
.iq-kit:is(body,#iqk#iqk) .summary-card:nth-child(n+3) { border-top: 1px solid var(--k-line-soft); }
.iq-kit:is(body,#iqk#iqk) .tab-navigation { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.iq-kit:is(body,#iqk#iqk) .tab-navigation .tab-button { flex: 0 0 auto; padding: 0 12px; font-size: 13.5px; }
.iq-kit:is(body,#iqk#iqk) .history-sidebar { width: 100%; }
/* the header copy carried a row-layout flex-basis into the stacked layout: 170px of blank */
.iq-kit:is(body,#iqk#iqk) .transactions-panel .header-content { flex: 0 0 auto; }
.iq-kit:is(body,#iqk#iqk) .filter-section :is(.filter-controls, .date-range, .amount-range) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; }
.iq-kit:is(body,#iqk#iqk) .filter-section :is(.date-range, .amount-range) input { flex: 1 1 0; min-width: 0; width: auto; }
.iq-kit:is(body,#iqk#iqk) .filter-section .search-box { width: 100%; }
}
/* =====================================================================
9. CodeIQ app (codeiq/index.html, )
The app already carries a complete editorial skin (codeiq-editorial.css,
token-driven, with contracts: never restyle .col-* widths). The kit
retones it rather than restructuring: warmer hairlines, 2px controls
instead of pills, one primary colour (CodeIQ coral-deep) instead of
black, flat dialogs with no blur or gradient headers. Only rules
prefixed .iq-kit-app apply here; the tool-page template does not.
===================================================================== */
body.iq-kit-app {
--ed-rule: #e4dfd5;
--ed-rule-soft: #efeae1;
--ed-rule-strong: #c9c2b5;
--ed-ink-3: #6b6459;
--ed-ink-4: #8a8377;
--ed-ivory: #f7f4ee;
}
/* one primary: coral-deep, 2px */
.iq-kit-app:is(body,#iqk#iqk) :is(.cc-btn-primary, .action-btn.primary, .action-btn.success, .client-context-save, .credits-bar-btn,
.codeiq-modal-btn-primary, .codeiq-button-primary, .review-guide-start-btn, .welcome-start-btn, .welcome-get-started-btn, .stmt-btn-primary, .lcr-btn-primary) {
background: var(--brand-deep);
border: 1px solid var(--brand-deep);
border-radius: var(--k-r);
color: #fff;
box-shadow: none;
transform: none;
background-image: none;
animation: none; /* the Post button pulsed a violet glow */
}
.iq-kit-app:is(body,#iqk#iqk) :is(.cc-btn-primary, .action-btn.primary, .action-btn.success, .client-context-save, .credits-bar-btn,
.codeiq-modal-btn-primary, .codeiq-button-primary, .review-guide-start-btn, .welcome-start-btn, .welcome-get-started-btn, .stmt-btn-primary, .lcr-btn-primary):hover:not(:disabled) {
background: var(--brand-hover);
border-color: var(--brand-hover);
color: #fff;
box-shadow: none;
transform: none;
}
.iq-kit-app:is(body,#iqk#iqk) .action-btn.primary.not-all-ready { background: var(--k-panel); border-color: var(--k-line-strong); color: var(--k-ink); }
/* controls that were pills become 2px, like every other control in the suite */
.iq-kit-app:is(body,#iqk#iqk) :is(.codeiq-tour-btn, .back-to-dashboard-btn, .user-menu-btn, .btn-analyse-riq, .pagination-btn, .pagination-current,
.cc-platform-indicator, .platform-badge, .codeiq-modal-close, .posting-center-count, .cc-command-badge,
.invoice-count-badge, .merchant-count-badge, .group-count-badge, .selection-counter, .stat-pill, .header-meta-chip,
.vat-filter-pill, .acct-insight-chip, .transfer-pair-status, .invoice-txn-match-pill, .stmt-ai-chip, .lcr-close) {
border-radius: var(--k-r);
}
.iq-kit-app:is(body,#iqk#iqk) .review-interface .back-btn { border-radius: var(--k-r); }
.iq-kit-app:is(body,#iqk#iqk) :is(.credits-bar-track, .credits-bar-fill, .upload-progress-bar, .upload-progress-fill, .tp-bar-track, .tp-bar-fill, .acct-card-bar, .acct-card-bar-fill, .vws-progress, .vws-progress-fill) { border-radius: 0; }
/* dialogs: one flat frame, no blur, no gradient headers */
.iq-kit-app:is(body,#iqk#iqk) :is(.codeiq-modal-overlay, .modal-overlay, .mapping-modal-overlay, .codeiq-validation-modal-overlay, .posting-completion-modal-overlay, .lcr-overlay) {
background: rgba(26, 22, 15, 0.42) !important;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.iq-kit-app:is(body,#iqk#iqk) .codeiq-modal { border-color: var(--k-line); box-shadow: var(--k-pop) !important; }
.iq-kit-app:is(body,#iqk#iqk) :is(.codeiq-modal, .codeiq-modal-overlay) .codeiq-modal-header {
background: var(--k-panel);
background-image: none;
color: var(--k-ink);
border-bottom: 1px solid var(--k-line-soft);
}
.iq-kit-app:is(body,#iqk#iqk) :is(.codeiq-modal, .codeiq-modal-overlay) .codeiq-modal-header :is(h1, h2, h3, .review-guide-title, .welcome-title, .codeiq-modal-title) {
color: var(--k-ink) !important;
background: none;
-webkit-text-fill-color: currentColor;
font-family: var(--k-serif) !important;
font-weight: 400 !important;
letter-spacing: -0.015em;
}
.iq-kit-app:is(body,#iqk#iqk) :is(.codeiq-modal, .codeiq-modal-overlay) .codeiq-modal-header :is(p, .review-guide-subtitle, .welcome-subtitle, [class*="subtitle"]) { color: var(--k-muted) !important; }
.iq-kit-app:is(body,#iqk#iqk) :is(.codeiq-modal, .codeiq-modal-overlay) .codeiq-modal-header :is([class*="header-icon"], [class*="modal-icon"]) { background: var(--brand-wash); color: var(--brand-deep); border-radius: var(--k-r); box-shadow: none; }
.iq-kit-app:is(body,#iqk#iqk) .codeiq-modal-footer { background: var(--k-canvas); border-top-color: var(--k-line-soft); }
.iq-kit-app:is(body,#iqk#iqk) .codeiq-modal-close { border-color: transparent; }
.iq-kit-app:is(body,#iqk#iqk) .codeiq-modal-close:hover { background: var(--k-band); border-color: transparent; }
/* Command Center header: with the real (wider) fonts loading, the title and buttons
wrapped inside a single row; let the row wrap instead of the words */
.iq-kit-app:is(body,#iqk#iqk) .cc-header { flex-wrap: wrap; row-gap: 18px; }
.iq-kit-app:is(body,#iqk#iqk) .cc-header-title { white-space: nowrap; }
.iq-kit-app:is(body,#iqk#iqk) .cc-header-actions { flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.iq-kit-app:is(body,#iqk#iqk) .cc-header-actions :is(.cc-btn-primary, .cc-btn-secondary) { white-space: nowrap; }
/* credits track collapsed to 0x0 in its flex row (legacy); give it a size */
.iq-kit-app:is(body,#iqk#iqk) .credits-bar-progress { flex-direction: row; align-items: center; }
.iq-kit-app:is(body,#iqk#iqk) .credits-bar-progress .credits-bar-track { display: block; flex: 1 1 auto; min-width: 200px; height: 3px; background: var(--k-line-soft); }
.iq-kit-app:is(body,#iqk#iqk) .credits-bar-progress .credits-bar-fill { height: 100%; background: var(--brand) !important; }
/* Past jobs: the amount column (78px incl. padding) was narrower than "-£2,880.00" in mono,
so figures ran into the account column */
.iq-kit-app:is(body,#iqk#iqk) .pj-txn-table :is(th, td):nth-child(3) { width: 112px; text-align: right; white-space: nowrap; }
.iq-kit-app:is(body,#iqk#iqk) .pj-txn-table td:nth-child(4) { padding-left: 16px; }
/* segmented filters: the active segment takes the product colour, not black */
.iq-kit-app:is(body,#iqk#iqk) .lcr-filter.is-active { background: var(--brand-deep); color: #fff; }
/* posting completion: flat header band */
.iq-kit-app:is(body,#iqk#iqk) .posting-modal-header { background: var(--k-panel); background-image: none; color: var(--k-ink); border-bottom: 1px solid var(--k-line-soft); }
.iq-kit-app:is(body,#iqk#iqk) .posting-modal-header .modal-title { color: var(--k-ink); font-family: var(--k-serif); font-weight: 400; }
.iq-kit-app:is(body,#iqk#iqk) .posting-modal-avatar { background: var(--k-band); background-image: none; border-bottom: 1px solid var(--k-line-soft); padding: 16px; }
.iq-kit-app:is(body,#iqk#iqk) .posting-modal-avatar img { width: 64px; height: 64px; }
.iq-kit-app:is(body,#iqk#iqk) .posting-completion-modal { border: 1px solid var(--k-line); border-radius: var(--k-r); box-shadow: var(--k-pop); }
.iq-kit-app:is(body,#iqk#iqk) .posting-modal-close { border-radius: var(--k-r); color: var(--k-muted); background: transparent; }
.iq-kit-app:is(body,#iqk#iqk) .posting-modal-close:hover { background: var(--k-band); color: var(--k-ink); }
.iq-kit-app:is(body,#iqk#iqk) .posting-completion-modal .stat-item { border-radius: var(--k-r); background: var(--k-panel); background-image: none; border: 1px solid var(--k-line); }
.iq-kit-app:is(body,#iqk#iqk) .posting-completion-modal .stat-item.success .stat-number { color: var(--k-ok); }
.iq-kit-app:is(body,#iqk#iqk) .posting-completion-modal .stat-item.failed .stat-number { color: var(--k-bad); }
/* welcome: the logo was whitened for the old gradient header */
.iq-kit-app:is(body,#iqk#iqk) .welcome-codeiq-logo { filter: none; }
.iq-kit-app:is(body,#iqk#iqk) :is(.review-guide-title, .welcome-logo-title) { font-size: 30px !important; line-height: 1.15; }
/* merchant explainer: header and step numbers are styled inline (MerchantExplainerModal.js) */
.iq-kit-app:is(body,#iqk#iqk) .codeiq-modal-header[style*="gradient"] { background: var(--k-panel) !important; border-bottom: 1px solid var(--k-line-soft); }
.iq-kit-app:is(body,#iqk#iqk) .codeiq-modal-header[style*="gradient"] h2 { color: var(--k-ink) !important; font-family: var(--k-serif); font-weight: 400 !important; font-size: 22px !important; }
.iq-kit-app:is(body,#iqk#iqk) .codeiq-modal-header[style*="gradient"] p { color: var(--k-muted) !important; }
.iq-kit-app:is(body,#iqk#iqk) .codeiq-modal-header[style*="gradient"] div[style*="rgba(255,255,255"] { background: var(--brand-wash) !important; border-radius: var(--k-r) !important; color: var(--brand-deep); }
.iq-kit-app:is(body,#iqk#iqk) .codeiq-modal-header[style*="gradient"] svg { stroke: var(--brand-deep); color: var(--brand-deep); }
.iq-kit-app:is(body,#iqk#iqk) .codeiq-modal-body div[style*="border-radius: 50%"][style*="linear-gradient"] { background: var(--brand-deep) !important; border-radius: var(--k-r) !important; }
.iq-kit-app:is(body,#iqk#iqk) :is(.guide-tip-card, .guide-section, .scenario-card, .welcome-section, .guide-benefits, .welcome-benefits) { border-radius: var(--k-r); box-shadow: none; }
/* Column mapping inside the app: codeiq-editorial.css forces ink pills with !important */
.iq-kit-app:is(body,#iqk#iqk) .mapping-toggle-button { border-radius: var(--k-r) !important; border-color: var(--k-line-strong) !important; }
.iq-kit-app:is(body,#iqk#iqk) :is(.mapping-toggle-button.active, .mapping-toggle-button.selected) { background: var(--brand-deep) !important; border-color: var(--brand-deep) !important; color: #fff !important; }
.iq-kit-app:is(body,#iqk#iqk) :is(.mapping-confirm-mapping, .codeiq-tc-modal #tc-accept-btn) { background: var(--brand-deep) !important; border: 1px solid var(--brand-deep) !important; border-radius: var(--k-r) !important; color: #fff !important; box-shadow: none !important; }
.iq-kit-app:is(body,#iqk#iqk) :is(.mapping-confirm-mapping, .codeiq-tc-modal #tc-accept-btn):hover { background: var(--brand-hover) !important; border-color: var(--brand-hover) !important; }
/* Phone: the tab strip and Command Center header ran 240px past the screen (predates the kit) */
@media (max-width: 640px) {
.iq-kit-app:is(body,#iqk#iqk) .tabs-container { overflow-x: auto; scrollbar-width: none; }
.iq-kit-app:is(body,#iqk#iqk) .cc-header { align-items: stretch; }
.iq-kit-app:is(body,#iqk#iqk) .cc-header-title { align-items: flex-start; align-self: stretch; text-align: left; max-width: 100%; margin-left: 0; }
.iq-kit-app:is(body,#iqk#iqk) .cc-header-actions { margin-left: 0; max-width: 100%; flex-wrap: wrap; justify-content: flex-start; }
.iq-kit-app:is(body,#iqk#iqk) .cc-platform-status { flex-wrap: wrap; max-width: 100%; }
/* the language picker is fixed top-right; keep the tab strip out from under it */
.iq-kit-app:is(body,#iqk#iqk) .tab-bar { padding-right: 64px; }
.iq-kit-app:is(body,#iqk#iqk) .credits-bar-progress { flex-wrap: wrap; row-gap: 8px; max-width: 100%; }
.iq-kit-app:is(body,#iqk#iqk) .credits-bar-progress .credits-bar-track { min-width: 0; flex-basis: 100%; }
}
/* =====================================================================
10. PrepIQ (WPS.html, )
Its own opt-in class, like the CodeIQ app: WPS.html uses generic names
(.modal, .hero, .brand, .btn, .bar) that the tool-page sections would
catch. The page's inline sheet already runs on tokens (--r, --line,
--cream, --ivory ...), so most of the move is remapping those on body;
the rules below take out what tokens cannot: gradients, glows, blur,
shadows, the dark notes box. Leave the boot sequence (.piqb-*) alone.
===================================================================== */
.iq-kit-wps:is(body,#iqk#iqk) {
--r: 2px; --r-sm: 2px;
--line: var(--k-line); --line-2: var(--k-line-strong);
--cream: var(--k-canvas); --ivory: var(--k-panel); --paper: var(--k-band);
--ink-4: var(--k-muted);
--ok: var(--k-ok); --ok-wash: var(--k-ok-wash);
--warn: var(--k-bad); --warn-wash: var(--k-bad-wash);
background: var(--k-canvas);
color: var(--k-ink);
}
.iq-kit-wps:is(body,#iqk#iqk) ::selection { background: var(--brand-wash); color: var(--k-ink); }
/* top bar */
.iq-kit-wps:is(body,#iqk#iqk) header.bar { background: var(--k-panel); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--k-line); }
.iq-kit-wps:is(body,#iqk#iqk) .topline { min-height: var(--k-bar); padding: 10px 0; gap: 16px; }
.iq-kit-wps:is(body,#iqk#iqk) .brand .mk { font-family: var(--k-serif); font-size: 21px; font-weight: 500; letter-spacing: -0.01em; color: var(--k-ink); }
.iq-kit-wps:is(body,#iqk#iqk) .brand .mk b { color: var(--brand); font-style: italic; font-weight: 500; }
.iq-kit-wps:is(body,#iqk#iqk) .brand .pill { border-bottom: 0; padding: 0; color: var(--k-muted); font-size: 10.5px; letter-spacing: 0.16em; }
.iq-kit-wps:is(body,#iqk#iqk) :is(.topnav-btn, .signout) {
min-height: 0; height: 34px; padding: 0 12px;
border: 1px solid var(--k-line-strong); border-radius: var(--k-r);
background: var(--k-panel); color: var(--k-ink-soft);
font: 500 13px var(--k-sans);
}
.iq-kit-wps:is(body,#iqk#iqk) :is(.topnav-btn, .signout):hover { background: var(--k-band); border-color: var(--k-ink-soft); color: var(--k-ink); }
.iq-kit-wps:is(body,#iqk#iqk) .acct-chip { min-height: 0; height: 34px; padding: 0 10px 0 4px; border: 1px solid var(--k-line); border-radius: var(--k-r); font: 500 13px var(--k-sans); color: var(--k-ink-soft); }
.iq-kit-wps:is(body,#iqk#iqk) .acct-chip:hover { background: var(--k-band); border-color: var(--k-line-strong); }
.iq-kit-wps:is(body,#iqk#iqk) .cb-track { height: 3px; border-radius: 0; background: var(--k-line-soft); }
.iq-kit-wps:is(body,#iqk#iqk) .cb-fill { border-radius: 0; background: var(--brand-deep); }
.iq-kit-wps:is(body,#iqk#iqk) .cb-fill.low { background: var(--k-bad); }
.iq-kit-wps:is(body,#iqk#iqk) .cb-text { font-size: 13px; color: var(--k-muted); }
.iq-kit-wps:is(body,#iqk#iqk) .cb-text b { color: var(--k-ink); }
/* masthead */
.iq-kit-wps:is(body,#iqk#iqk) .hero-eyebrow {
display: block; margin: 0 0 14px;
font-family: var(--k-mono); font-size: 11.5px; font-weight: 500;
letter-spacing: 0.16em; text-transform: uppercase; color: var(--k-muted);
}
.iq-kit-wps:is(body,#iqk#iqk) .hero h1 { font-family: var(--k-serif); font-weight: 400; letter-spacing: -0.02em; color: var(--k-ink); }
.iq-kit-wps:is(body,#iqk#iqk) .hero h1 em { color: var(--brand-deep); }
.iq-kit-wps:is(body,#iqk#iqk) .hero p { color: var(--k-muted); }
.iq-kit-wps:is(body,#iqk#iqk) .hero .riq-wel img { filter: none; }
/* section heads: the two columns start on one line */
.iq-kit-wps:is(body,#iqk#iqk) .sec-h { border-bottom-color: var(--k-line); }
.iq-kit-wps:is(body,#iqk#iqk) .sec-h::after { width: 32px; background: var(--brand); }
.iq-kit-wps:is(body,#iqk#iqk) .sec-h h2 { font-family: var(--k-serif); font-weight: 500; font-size: 22px; letter-spacing: -0.01em; }
.iq-kit-wps:is(body,#iqk#iqk) .sec-h .n { font-size: 11px; letter-spacing: 0.16em; color: var(--k-muted); }
.iq-kit-wps:is(body,#iqk#iqk) .jobs-head { align-items: flex-end; }
.iq-kit-wps:is(body,#iqk#iqk) .jobs-head .btn { margin-bottom: 10px; }
.iq-kit-wps:is(body,#iqk#iqk) .lede { color: var(--k-muted); font-size: 14px; }
/* fields */
.iq-kit-wps:is(body,#iqk#iqk) label { color: var(--k-muted); }
.iq-kit-wps:is(body,#iqk#iqk) :is(input[type=text], input[type=email], input[type=password], input[type=number], select, textarea) {
width: 100%; padding: 10px 12px;
background: var(--k-panel); border: 1px solid var(--k-line-strong); border-radius: var(--k-r);
color: var(--k-ink); font: 400 15px var(--k-sans); box-shadow: none;
}
.iq-kit-wps:is(body,#iqk#iqk) :is(input, select, textarea):focus { border-color: var(--brand-deep); background: var(--k-panel); box-shadow: 0 0 0 3px var(--brand-wash); outline: none; }
.iq-kit-wps:is(body,#iqk#iqk) :is(input, textarea)::placeholder { color: var(--k-faint); }
.iq-kit-wps:is(body,#iqk#iqk) .fs-help { color: var(--k-muted); }
/* buttons: one shape, three weights (order matters: variants after base hover) */
.iq-kit-wps:is(body,#iqk#iqk) .btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: 40px; padding: 0 20px;
background: var(--brand-deep); border: 1px solid var(--brand-deep); border-radius: var(--k-r);
color: #fff; font: 500 14px var(--k-sans); box-shadow: none; transform: none;
}
.iq-kit-wps:is(body,#iqk#iqk) .btn:hover { background: var(--brand-hover); border-color: var(--brand-hover); transform: none; }
.iq-kit-wps:is(body,#iqk#iqk) .btn:disabled { opacity: 1; background: var(--k-band-2); border-color: var(--k-line); color: var(--k-faint); box-shadow: none; }
.iq-kit-wps:is(body,#iqk#iqk) .btn.sm { min-height: 32px; padding: 0 12px; font-size: 13px; }
.iq-kit-wps:is(body,#iqk#iqk) .btn.ghost { background: var(--k-panel); border-color: var(--k-line-strong); color: var(--k-ink-soft); }
.iq-kit-wps:is(body,#iqk#iqk) .btn.ghost:hover { background: var(--k-band); border-color: var(--k-ink-soft); color: var(--k-ink); }
.iq-kit-wps:is(body,#iqk#iqk) .btn.line { background: var(--k-panel); border-color: var(--brand-line); color: var(--brand-deep); }
.iq-kit-wps:is(body,#iqk#iqk) .btn.line:hover { background: var(--brand-wash); border-color: var(--brand); }
.iq-kit-wps:is(body,#iqk#iqk) .btn.warn { background: var(--k-panel); border-color: #e7c4c1; color: var(--k-bad); }
.iq-kit-wps:is(body,#iqk#iqk) .btn.warn:hover { background: var(--k-bad-wash); border-color: var(--k-bad); }
.iq-kit-wps:is(body,#iqk#iqk) .btn.pulse { animation: kWpsPulse 1.1s ease-in-out 4; }
@keyframes kWpsPulse { 0% { box-shadow: 0 0 0 0 rgba(126, 90, 34, 0.35); } 70% { box-shadow: 0 0 0 10px rgba(126, 90, 34, 0); } 100% { box-shadow: 0 0 0 0 rgba(126, 90, 34, 0); } }
.iq-kit-wps:is(body,#iqk#iqk) .filebtn { display: inline-flex; align-items: center; height: 32px; margin: 0; padding: 0 12px; border-radius: var(--k-r); background: var(--k-panel); border-color: var(--k-line-strong); color: var(--brand-deep); font: 500 13px var(--k-sans); letter-spacing: 0; text-transform: none; }
.iq-kit-wps:is(body,#iqk#iqk) .filebtn:hover { background: var(--brand-wash); border-color: var(--brand); }
.iq-kit-wps:is(body,#iqk#iqk) .lnk { font-weight: 500; font-size: 13px; color: var(--k-ink-soft); }
.iq-kit-wps:is(body,#iqk#iqk) .lnk:hover { color: var(--brand-deep); border-bottom-color: var(--brand); }
.iq-kit-wps:is(body,#iqk#iqk) .lnk.warn { color: var(--k-bad); }
.iq-kit-wps:is(body,#iqk#iqk) .lnk.warn:hover { border-bottom-color: var(--k-bad); }
/* drop zones */
.iq-kit-wps:is(body,#iqk#iqk) .drop { border: 1px dashed var(--k-line-strong); border-radius: var(--k-r); background: var(--k-panel); box-shadow: none; }
.iq-kit-wps:is(body,#iqk#iqk) :is(.drop:hover, .drop.over) { border-style: solid; border-color: var(--brand); background: var(--brand-wash); box-shadow: none; }
.iq-kit-wps:is(body,#iqk#iqk) .drop .big { font-family: var(--k-serif); color: var(--k-ink); }
.iq-kit-wps:is(body,#iqk#iqk) .drop .sub { color: var(--k-muted); }
.iq-kit-wps:is(body,#iqk#iqk) .filelist { color: var(--k-ink-soft); }
/* notices */
.iq-kit-wps:is(body,#iqk#iqk) :is(.capbanner, .engnote) { border: 1px solid #ecd3a9; border-radius: var(--k-r); background: var(--k-warn-wash); color: var(--k-warn); }
/* preparation depth */
.iq-kit-wps:is(body,#iqk#iqk) .eng { background: var(--k-panel); border-color: var(--k-line); border-radius: var(--k-r); }
.iq-kit-wps:is(body,#iqk#iqk) .eng::before { border-color: var(--k-line-strong); }
.iq-kit-wps:is(body,#iqk#iqk) .eng:hover { border-color: var(--brand-line); }
.iq-kit-wps:is(body,#iqk#iqk) .eng.sel { background: var(--brand-wash); border-color: var(--brand); }
.iq-kit-wps:is(body,#iqk#iqk) .eng.sel::before { border-color: var(--brand-deep); background: var(--brand-deep); }
.iq-kit-wps:is(body,#iqk#iqk) .eng .ec { color: var(--brand-deep); }
.iq-kit-wps:is(body,#iqk#iqk) .eng .ec.max { color: var(--k-warn); }
.iq-kit-wps:is(body,#iqk#iqk) .eng .es { color: var(--k-muted); }
/* firm settings + checklist */
.iq-kit-wps:is(body,#iqk#iqk) .firmprefs { background: var(--k-panel); border-color: var(--k-line); }
.iq-kit-wps:is(body,#iqk#iqk) .firmprefs > summary { font-weight: 600; font-size: 13.5px; color: var(--k-ink); }
.iq-kit-wps:is(body,#iqk#iqk) .firmprefs > summary .opt { font-weight: 400; color: var(--k-muted); }
.iq-kit-wps:is(body,#iqk#iqk) .checklist > summary { color: var(--brand-deep); font-weight: 500; }
/* jobs: at a glance, filters, folios */
.iq-kit-wps:is(body,#iqk#iqk) .glance { border-radius: var(--k-r); }
.iq-kit-wps:is(body,#iqk#iqk) .gl .n { font-weight: 500; }
.iq-kit-wps:is(body,#iqk#iqk) .chip { min-height: 30px; padding: 0 11px; border-radius: var(--k-r); background: var(--k-panel); border-color: var(--k-line-strong); font-weight: 500; }
.iq-kit-wps:is(body,#iqk#iqk) .chip:hover { border-color: var(--k-ink-soft); color: var(--k-ink); }
.iq-kit-wps:is(body,#iqk#iqk) .chip.on { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }
.iq-kit-wps:is(body,#iqk#iqk) .job { background: var(--k-panel); border-color: var(--k-line); border-radius: var(--k-r); box-shadow: none; padding: 22px 24px 18px; margin: 12px 0 18px; }
.iq-kit-wps:is(body,#iqk#iqk) .job:hover { border-color: var(--k-line-strong); box-shadow: none; }
/* the status folio tab becomes a left rule, the way the kit marks state */
.iq-kit-wps:is(body,#iqk#iqk) .job::before { top: -1px; bottom: -1px; left: -1px; width: 3px; height: auto; border-radius: var(--k-r) 0 0 var(--k-r); }
.iq-kit-wps:is(body,#iqk#iqk) .job-av { border-color: var(--brand-line); background: var(--brand-wash); }
.iq-kit-wps:is(body,#iqk#iqk) .job-id .nm { font-family: var(--k-serif); font-weight: 500; }
.iq-kit-wps:is(body,#iqk#iqk) .elapsed { border-radius: var(--k-r); border-color: var(--brand-line); }
.iq-kit-wps:is(body,#iqk#iqk) .riq-feed { border-top: 1px solid var(--k-line-soft); }
.iq-kit-wps:is(body,#iqk#iqk) .riq-bubble { border-radius: var(--k-r); background: var(--k-band); border-color: var(--k-line-soft); }
.iq-kit-wps:is(body,#iqk#iqk) .riq-bubble.latest { background: var(--brand-wash); border-color: var(--brand-line); border-left: 2px solid var(--brand); }
.iq-kit-wps:is(body,#iqk#iqk) .job-foot { border-top-color: var(--k-line); }
.iq-kit-wps:is(body,#iqk#iqk) .panel { border-top: 1px solid var(--k-line-soft); }
.iq-kit-wps:is(body,#iqk#iqk) .bubble .who { border-color: var(--brand-line); }
.iq-kit-wps:is(body,#iqk#iqk) .bubble .txt { border-radius: var(--k-r); background: var(--k-band); border-color: var(--k-line-soft); }
.iq-kit-wps:is(body,#iqk#iqk) :is(.arc-list, .arc-row) { border-color: var(--k-line); }
/* sign-in and no-access gates */
.iq-kit-wps:is(body,#iqk#iqk) .gate .riqg { filter: none; }
.iq-kit-wps:is(body,#iqk#iqk) .gate h1 { font-family: var(--k-serif); font-weight: 500; }
.iq-kit-wps:is(body,#iqk#iqk) .gate h1 b { color: var(--brand); }
.iq-kit-wps:is(body,#iqk#iqk) .gate .card { background: var(--k-panel); border-color: var(--k-line); border-radius: var(--k-r); box-shadow: none; }
/* modals */
.iq-kit-wps:is(body,#iqk#iqk) .modal-bd { background: rgba(26, 22, 15, 0.42); backdrop-filter: none; -webkit-backdrop-filter: none; }
.iq-kit-wps:is(body,#iqk#iqk) .modal { background: var(--k-panel); border: 1px solid var(--k-line); border-radius: var(--k-r); box-shadow: var(--k-pop); }
.iq-kit-wps:is(body,#iqk#iqk) .modal .mh { padding: 16px 20px 16px 24px; border-bottom-color: var(--k-line); }
.iq-kit-wps:is(body,#iqk#iqk) .modal .mh h3 { font-family: var(--k-serif); font-weight: 500; font-size: 22px; letter-spacing: -0.01em; }
.iq-kit-wps:is(body,#iqk#iqk) .modal .mb { padding: 20px 24px; }
.iq-kit-wps:is(body,#iqk#iqk) .x { border-radius: var(--k-r); color: var(--k-muted); }
.iq-kit-wps:is(body,#iqk#iqk) .x:hover { background: var(--k-band); color: var(--k-ink); }
.iq-kit-wps:is(body,#iqk#iqk) .mtabs { gap: 24px; padding: 0 24px; background: var(--k-panel); border-bottom-color: var(--k-line); }
.iq-kit-wps:is(body,#iqk#iqk) .mtab { padding: 12px 0; font-weight: 500; font-size: 14px; color: var(--k-muted); }
.iq-kit-wps:is(body,#iqk#iqk) .mtab:hover { color: var(--k-ink); }
.iq-kit-wps:is(body,#iqk#iqk) .mtab.on { color: var(--k-ink); border-bottom-color: var(--brand-deep); }
.iq-kit-wps:is(body,#iqk#iqk) .jump { border-radius: var(--k-r); background: var(--k-panel); border-color: var(--k-line-strong); }
.iq-kit-wps:is(body,#iqk#iqk) .jump:hover { border-color: var(--brand); color: var(--brand-deep); }
.iq-kit-wps:is(body,#iqk#iqk) .jump.q { color: var(--k-bad); border-color: #e7c4c1; }
.iq-kit-wps:is(body,#iqk#iqk) .emailbox { border-radius: var(--k-r); background: var(--k-band); border-color: var(--k-line); color: var(--k-ink-soft); }
/* RiQ's notes were a dark terminal box; the kit reads them on paper */
.iq-kit-wps:is(body,#iqk#iqk) .logbox { background: var(--k-band); border: 1px solid var(--k-line); border-radius: var(--k-r); color: var(--k-ink-soft); }
.iq-kit-wps:is(body,#iqk#iqk) .logbox .nt-h { font-family: var(--k-serif); font-weight: 500; font-size: 17px; color: var(--k-ink); }
.iq-kit-wps:is(body,#iqk#iqk) .logbox .nt-h.q-h { color: var(--k-bad); }
.iq-kit-wps:is(body,#iqk#iqk) .logbox .nt-table td { border-color: var(--k-line); background: var(--k-panel); }
.iq-kit-wps:is(body,#iqk#iqk) .logbox .nt-table tr:first-child td { background: var(--k-band-2); color: var(--k-ink); }
.iq-kit-wps:is(body,#iqk#iqk) .logbox code { background: var(--k-panel); border: 1px solid var(--k-line-soft); border-radius: var(--k-r); }
.iq-kit-wps:is(body,#iqk#iqk) .logbox a { color: var(--brand-deep); }
.iq-kit-wps:is(body,#iqk#iqk) .wps-confirm-ov { background: rgba(26, 22, 15, 0.42); }
.iq-kit-wps:is(body,#iqk#iqk) .wps-confirm-card { border: 1px solid var(--k-line); border-radius: var(--k-r); box-shadow: var(--k-pop); }
.iq-kit-wps:is(body,#iqk#iqk) .wps-confirm-card h4 { font-family: var(--k-serif); font-weight: 500; font-size: 19px; }
.iq-kit-wps:is(body,#iqk#iqk) .footnote { color: var(--k-muted); border-top-color: var(--k-line); }
/* PrepIQ phone: the header ran ~70px past a 390px screen before the kit. The
credit line ellipsises instead ("415,272 credits · 83 jo…"), the tagline goes. */
@media (max-width: 640px) {
.iq-kit-wps:is(body,#iqk#iqk) .topline { gap: 10px; }
.iq-kit-wps:is(body,#iqk#iqk) .brand .pill { display: none; }
.iq-kit-wps:is(body,#iqk#iqk) .topnav { flex: 1 1 auto; min-width: 0; justify-content: flex-end; gap: 6px; }
.iq-kit-wps:is(body,#iqk#iqk) .creditbar { flex: 1 1 auto; min-width: 0; margin-right: 0; justify-content: flex-end; }
.iq-kit-wps:is(body,#iqk#iqk) .cb-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.iq-kit-wps:is(body,#iqk#iqk) :is(.topnav-btn, .signout) { padding: 0 9px; white-space: nowrap; }
.iq-kit-wps:is(body,#iqk#iqk) .acct-chip { padding: 0 3px; }
}