/* KlaroFlow Business Pulse
   Palette is brand-locked: navy, Klaro blue, cyan for chrome accents.
   Green / amber / orange / red appear only as status. */

:root {
  --c-ground: #eff4fa;
  --c-surface: #ffffff;
  --c-surface-2: #f6f9fd;
  --c-surface-3: #eef4fb;
  --c-navy: #072353;
  --c-navy-2: #0b3175;
  --c-accent: #0070eb;
  --c-accent-ink: #0060cc;
  --c-accent-soft: #e4eefd;
  --c-cyan: #00cde6;
  --c-ink: #08203f;
  --c-ink-2: #46597a;
  --c-ink-3: #7b8da9;
  --c-line: #e4eaf3;
  --c-grid: #e4eaf3;
  --c-spark: #b8c6da;
  --c-good: #16ab65;
  --c-good-ink: #0c7a46;
  --c-good-soft: #e4f6ec;
  --c-watch: #d79a00;
  --c-watch-ink: #96690a;
  --c-watch-soft: #fbf2dc;
  --c-attention: #e2681f;
  --c-attention-ink: #b14e14;
  --c-attention-soft: #fdeee4;
  --c-risk: #e82f3a;
  --c-risk-ink: #c2151f;
  --c-risk-soft: #fdeaeb;
  --c-onnavy: #ffffff;
  --c-onnavy-2: #b7cdf0;
  --shadow-sm: 0 1px 2px rgba(8, 32, 63, .05), 0 1px 10px rgba(8, 32, 63, .04);
  --shadow-md: 0 2px 6px rgba(8, 32, 63, .06), 0 14px 32px rgba(8, 32, 63, .07);
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --font-display: "Outfit", "Segoe UI", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --max: 1220px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-ground: #04122f;
    --c-surface: #091d43;
    --c-surface-2: #0c2551;
    --c-surface-3: #102c5e;
    --c-navy: #061a3f;
    --c-navy-2: #0a2a64;
    --c-accent: #4a9bf4;
    --c-accent-ink: #8cc2ff;
    --c-accent-soft: #10305f;
    --c-cyan: #34dcef;
    --c-ink: #eaf2ff;
    --c-ink-2: #aabdd9;
    --c-ink-3: #8299ba;
    --c-line: #16325f;
    --c-grid: #16325f;
    --c-spark: #476494;
    --c-good: #2bc47d;
    --c-good-ink: #6fe0ab;
    --c-good-soft: #0d3c2b;
    --c-watch: #e0a32a;
    --c-watch-ink: #f3c96d;
    --c-watch-soft: #3a2d0c;
    --c-attention: #f0803c;
    --c-attention-ink: #ffab74;
    --c-attention-soft: #3d210f;
    --c-risk: #ff6470;
    --c-risk-ink: #ff9aa3;
    --c-risk-soft: #3d1216;
    --c-onnavy: #ffffff;
    --c-onnavy-2: #a8c2e8;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, .3), 0 14px 32px rgba(0, 0, 0, .28);
  }
}

:root[data-theme="dark"] {
  --c-ground: #04122f;
  --c-surface: #091d43;
  --c-surface-2: #0c2551;
  --c-surface-3: #102c5e;
  --c-navy: #061a3f;
  --c-navy-2: #0a2a64;
  --c-accent: #4a9bf4;
  --c-accent-ink: #8cc2ff;
  --c-accent-soft: #10305f;
  --c-cyan: #34dcef;
  --c-ink: #eaf2ff;
  --c-ink-2: #aabdd9;
  --c-ink-3: #8299ba;
  --c-line: #16325f;
  --c-grid: #16325f;
  --c-spark: #476494;
  --c-good: #2bc47d;
  --c-good-ink: #6fe0ab;
  --c-good-soft: #0d3c2b;
  --c-watch: #e0a32a;
  --c-watch-ink: #f3c96d;
  --c-watch-soft: #3a2d0c;
  --c-attention: #f0803c;
  --c-attention-ink: #ffab74;
  --c-attention-soft: #3d210f;
  --c-risk: #ff6470;
  --c-risk-ink: #ff9aa3;
  --c-risk-soft: #3d1216;
  --c-onnavy: #ffffff;
  --c-onnavy-2: #a8c2e8;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, .3), 0 14px 32px rgba(0, 0, 0, .28);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--c-ground);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; margin: 0; text-wrap: balance; letter-spacing: -.01em; }
p { margin: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }

button, select, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; border-radius: 4px; }

/* ---------------- shell ----------------
   On screen the report uses the full reading width: tables and two-column
   sections need the room. The letter page lives in the print stylesheet at the
   bottom of this file, which is where it belongs. */

.kf-shell, .kf-sheet { max-width: var(--max); margin: 0 auto; padding-inline: 24px; }
.kf-desk { background: transparent; }

.kf-topbar {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 40;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
}
.kf-topbar-in { display: flex; align-items: center; gap: 14px; min-height: 60px; flex-wrap: wrap; padding-block: 8px; }
/* The circular mark leads as the product badge, with the approved primary logo
   beside it. The mark is the asset the brand guide reserves for product
   surfaces, so this is where it belongs. */
.kf-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; flex: 0 0 auto; }
/* The full lockup already contains the K, so showing the badge beside it put
   the mark on screen twice. One or the other: the lockup where there is room,
   the mark alone when there is not.

   The header sits on navy and the primary logo's wordmark is near-black, which
   left "Klaro" invisible against it. The reverse lockup carries a white
   wordmark and is the only version allowed on a dark ground. */
.kf-brand-badge {
  width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto;
  background: #fff; border: 1px solid var(--c-line);
  box-shadow: 0 1px 3px rgba(7, 35, 83, .10);
  display: none; place-items: center; overflow: hidden;
  transition: box-shadow .15s, border-color .15s;
}
.kf-brand:hover .kf-brand-badge { border-color: var(--c-accent); box-shadow: 0 2px 8px rgba(0, 112, 235, .22); }
.kf-brand-badge img { width: 100%; height: 100%; display: block; padding: 3px; box-sizing: border-box; object-fit: contain; }
.kf-logo { height: 26px; width: auto; display: block; }
@media (max-width: 620px) {
  .kf-logo { display: none; }
  .kf-brand-badge { display: grid; width: 32px; height: 32px; }
}
.kf-topbar-divider { width: 1px; height: 22px; background: var(--c-line); }
.kf-product {
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  letter-spacing: .01em; color: var(--c-ink);
}
.kf-product span { color: var(--c-accent); }
.kf-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.kf-free {
  font-family: var(--font-display); font-weight: 700; font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; color: #fff;
  background: var(--c-accent); padding: 4px 10px; border-radius: 999px; flex: 0 0 auto;
}

.kf-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
  background: var(--c-accent-soft); color: var(--c-accent-ink);
  border: 1px solid transparent;
}
.kf-badge.is-sample { background: var(--c-surface-3); color: var(--c-ink-2); border-color: var(--c-line); }

.kf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none;
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  padding: 9px 16px; border-radius: 999px; border: 1px solid var(--c-line);
  background: var(--c-surface); color: var(--c-ink); cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s;
}
.kf-btn:hover { border-color: var(--c-accent); color: var(--c-accent-ink); }
.kf-btn:active { transform: translateY(1px); }
.kf-btn.is-primary { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.kf-btn.is-primary:hover { background: var(--c-accent-ink); border-color: var(--c-accent-ink); color: #fff; }
.kf-btn.is-quiet { background: transparent; }
.kf-btn.is-small { font-size: 13px; padding: 6px 12px; }

/* ---------------- filter bar ---------------- */

/* The section nav stays on screen: it is the one control used continuously.
   Filters are set occasionally, so they live in a panel it opens. */
.kf-navbar {
  position: sticky;
  /* --topbar-h is measured in app.js, because the top bar wraps to two or three
     lines on narrow screens and a fixed offset would let it overlap. */
  top: calc(env(safe-area-inset-top, 0px) + var(--topbar-h, 60px));
  z-index: 30;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
}
.kf-navbar-in { display: flex; align-items: center; gap: 12px; min-height: 52px; }
/* Wide screens wrap the chips onto a second line rather than hiding any of
   them: a horizontal scroller with no visible scrollbar is unreachable with a
   mouse. Phones keep the single swipeable row. */
@media (min-width: 761px) {
  .kf-nav { flex-wrap: wrap; overflow: visible; }
}

/* Filters stay on screen for the tabs that actually use them. Only a phone
   hides them behind the toggle; app.js takes them off the explainer, the import
   flow and the contact form. */
.kf-filters.is-hidden { display: none; }
.kf-filters {
  position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--topbar-h, 60px) + var(--navbar-h, 53px));
  z-index: 29;
  background: var(--c-surface-2); border-bottom: 1px solid var(--c-line);
}
.kf-filters-in { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; padding-block: 14px; }
.kf-filter-toggle {
  flex: 0 0 auto; display: none; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: 13.5px;
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--c-line);
  background: var(--c-surface); color: var(--c-ink-2); cursor: pointer; white-space: nowrap;
}
.kf-filter-toggle:hover { border-color: var(--c-accent); color: var(--c-accent-ink); }
.kf-filter-toggle[aria-expanded="true"] { background: var(--c-accent-soft); border-color: var(--c-accent); color: var(--c-accent-ink); }
.kf-filter-toggle.has-active { border-color: var(--c-accent); color: var(--c-accent-ink); }
.kf-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kf-field-label {
  font-family: var(--font-display); font-size: 10px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-3);
}
.kf-select {
  appearance: none;
  padding: 8px 30px 8px 11px; border-radius: var(--r-sm);
  border: 1px solid var(--c-line); background: var(--c-surface); color: var(--c-ink);
  font-size: 14px; cursor: pointer; max-width: 200px; text-overflow: ellipsis;
  background-image: linear-gradient(45deg, transparent 50%, var(--c-ink-3) 50%), linear-gradient(135deg, var(--c-ink-3) 50%, transparent 50%);
  background-position: calc(100% - 15px) 55%, calc(100% - 10px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.kf-select:hover { border-color: var(--c-accent); }
.kf-filters-in .kf-btn { margin-left: auto; }
.kf-chips { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 12px; }
.kf-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; padding: 5px 8px 5px 12px; border-radius: 999px;
  background: var(--c-accent-soft); color: var(--c-accent-ink); border: none; cursor: pointer;
}
.kf-chip b { font-weight: 600; }
.kf-chip:hover { background: var(--c-accent); color: #fff; }
.kf-chip-x { font-size: 15px; line-height: 1; opacity: .7; }

/* ---------------- section nav ---------------- */

.kf-nav { display: flex; gap: 6px; overflow-x: auto; padding-block: 9px; scrollbar-width: none; flex: 1 1 auto; min-width: 0; }
.kf-nav::-webkit-scrollbar { display: none; }
.kf-nav a {
  flex: 0 0 auto; text-decoration: none; font-size: 12.5px;
  font-family: var(--font-display); font-weight: 500;
  color: var(--c-ink-2); padding: 6px 11px; border-radius: 999px;
  border: 1px solid transparent; white-space: nowrap;
}
.kf-nav a:hover { background: var(--c-surface); border-color: var(--c-line); color: var(--c-ink); }
.kf-nav a.is-current { background: var(--c-navy); border-color: var(--c-navy); color: var(--c-onnavy); }

/* ---------------- sections ---------------- */

.kf-section { padding-block: 30px; scroll-margin-top: var(--sticky-h, 124px); }
.kf-section + .kf-section { border-top: 1px solid var(--c-line); }
/* The pulse leads: a tighter stack so the whole picture lands together. */
.kf-section.is-page {
  display: flex; flex-direction: column; gap: 14px;
  padding-top: 20px; padding-bottom: 30px;
}
.kf-section-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.kf-eyebrow {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--c-accent-ink);
  margin-bottom: 6px;
}
.kf-eyebrow svg { width: 15px; height: 15px; }
.kf-section h2 { font-size: clamp(21px, 2.4vw, 27px); }
.kf-section-sub { color: var(--c-ink-2); font-size: 14.5px; margin-top: 6px; max-width: 68ch; }
.kf-section-tools { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------- first tab: what this is ----------------
   Left explains the product; right lists what every other tab holds. */

.kf-about {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: 40px; align-items: start;
}
.kf-about-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(24px, 3vw, 36px); line-height: 1.16; letter-spacing: -.02em;
  color: var(--c-ink); text-wrap: balance;
}
.kf-about-lead { font-size: 16px; color: var(--c-ink-2); margin-top: 14px; max-width: 54ch; }
.kf-about-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px; margin-top: 26px;
}
.kf-about-fact { display: grid; grid-template-columns: 20px 1fr; gap: 10px 11px; align-items: start; }
.kf-about-fact svg { width: 19px; height: 19px; color: var(--c-accent); grid-row: span 2; margin-top: 2px; }
.kf-about-fact strong {
  font-family: var(--font-display); font-size: 14.5px; font-weight: 600; color: var(--c-ink);
}
.kf-about-fact span { font-size: 13.5px; color: var(--c-ink-2); grid-column: 2; }
.kf-about-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

.kf-about-contents {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-md); padding: 22px;
}
.kf-about-foot { font-size: 12.5px; color: var(--c-ink-3); margin-top: 14px; }

@media (max-width: 900px) {
  .kf-about { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* ---------------- identity band ---------------- */

.kf-identity {
  background: linear-gradient(120deg, var(--c-navy) 0%, var(--c-navy-2) 100%);
  border-radius: var(--r-lg); padding: 22px 26px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  position: relative; overflow: hidden;
}
.kf-identity::after {
  content: ""; position: absolute; right: -60px; top: -80px; width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(0, 205, 230, .26), transparent 65%);
  pointer-events: none;
}
/* The mark always sits on a plain white chip, never tinted or translucent, so it
   reads the same way on every surface. It shows what the business does - the
   KlaroFlow mark stays in the product chrome, not on the client's band. */
.kf-identity-mark {
  width: 50px; height: 50px; border-radius: 14px; flex: 0 0 auto;
  background: #fff; display: grid; place-items: center;
}
.kf-identity-mark svg { width: 27px; height: 27px; color: var(--c-accent); stroke-width: 1.6; }
/* flex-basis keeps the period block on the same row at sheet width instead of
   wrapping it onto its own line and doubling the band height. */
.kf-identity-text { min-width: 0; flex: 1 1 300px; }
.kf-identity h1 {
  color: var(--c-onnavy); font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; line-height: 1.15;
}
.kf-identity-meta {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  color: var(--c-onnavy-2); font-size: 13.5px; margin-top: 6px;
}
.kf-identity-meta .kf-dot { opacity: .5; }
.kf-identity-right { margin-left: auto; text-align: right; flex: 0 0 auto; }
.kf-identity-period {
  font-family: var(--font-display); font-size: 10px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-onnavy-2);
}
.kf-identity-period strong {
  display: block; font-size: 17px; letter-spacing: 0; text-transform: none;
  color: var(--c-onnavy); font-weight: 600; margin-top: 2px; white-space: nowrap;
}
.kf-sample-note {
  margin-top: 8px; font-size: 12.5px; color: var(--c-onnavy-2);
  max-width: 82ch; position: relative;
}
.kf-source-link { color: var(--c-cyan); text-decoration: none; font-weight: 600; white-space: nowrap; }
.kf-source-link:hover { text-decoration: underline; }

/* ---------------- cards ---------------- */

.kf-card {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-md); padding: 22px;
}
.kf-card-title {
  font-family: var(--font-display); font-size: 13px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--c-ink-3);
  margin-bottom: 14px; display: flex; align-items: center; gap: 8px;
}
.kf-card-title svg { width: 15px; height: 15px; color: var(--c-accent); }

/* auto-fit rather than a fixed ratio: inside the letter sheet this settles into
   two even columns, and drops to one when the sheet narrows on a phone. */
.kf-grid-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px; margin-top: 14px; }
/* The pulse is the landing view: identity, summary and health should land
   inside the first screen on a laptop. */
.kf-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.kf-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }

/* ---------------- executive summary ---------------- */

.kf-exec { display: flex; flex-direction: column; gap: 14px; }
.kf-exec-top { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.kf-exec-statement { flex: 1 1 320px; min-width: 0; }
/* h2. on purpose: plain .kf-exec-status loses to .kf-section h2 on specificity
   and the headline silently renders at section-heading size. */
h2.kf-exec-status {
  font-family: var(--font-display); font-size: clamp(21px, 2.1vw, 27px);
  font-weight: 600; line-height: 1.25; color: var(--c-ink); margin-top: 8px;
}
.kf-exec-detail { color: var(--c-ink-2); margin-top: 10px; font-size: 15px; max-width: 64ch; }
.kf-hero {
  flex: 0 0 auto; text-align: right; padding-left: 20px;
  border-left: 1px solid var(--c-line); min-width: 190px;
}
.kf-hero-label {
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase; color: var(--c-ink-3);
}
.kf-hero-value {
  font-family: var(--font-body); font-weight: 600;
  font-size: clamp(34px, 3.4vw, 46px); line-height: 1.05; margin-top: 4px;
  letter-spacing: -.02em;
}
.kf-hero-note { font-size: 13px; color: var(--c-ink-2); margin-top: 6px; max-width: 24ch; margin-left: auto; }

.kf-exec-blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.kf-exec-block {
  background: var(--c-surface-2); border-radius: var(--r-sm);
  padding: 12px 14px; border-left: 3px solid var(--c-accent);
}
.kf-exec-block h4 {
  font-size: 11px; font-weight: 600; letter-spacing: .11em;
  text-transform: uppercase; color: var(--c-ink-3); margin-bottom: 7px;
}
.kf-exec-block p { color: var(--c-ink-2); font-size: 14px; line-height: 1.55; }
.kf-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.kf-checklist li { display: flex; gap: 9px; font-size: 14px; line-height: 1.55; color: var(--c-ink-2); }
.kf-checklist li::before {
  content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-accent); margin-top: 8px;
}

/* ---------------- status pills ---------------- */

.kf-status {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
}
.kf-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.kf-status.is-good { background: var(--c-good-soft); color: var(--c-good-ink); }
.kf-status.is-watch { background: var(--c-watch-soft); color: var(--c-watch-ink); }
.kf-status.is-attention { background: var(--c-attention-soft); color: var(--c-attention-ink); }
.kf-status.is-risk { background: var(--c-risk-soft); color: var(--c-risk-ink); }
.kf-status.is-unknown { background: var(--c-surface-3); color: var(--c-ink-2); }

.kf-value-good { color: var(--c-good-ink); }
.kf-value-risk { color: var(--c-risk-ink); }
.kf-value-attention { color: var(--c-attention-ink); }
.kf-value-watch { color: var(--c-watch-ink); }

/* ---------------- business health ---------------- */

.kf-block-label {
  display: flex; align-items: center; gap: 8px; margin-bottom: 9px;
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-3);
}
.kf-block-label svg { width: 14px; height: 14px; color: var(--c-accent); }
.kf-health-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.kf-health-chip {
  background: var(--c-surface-2); border-radius: var(--r-sm); padding: 13px 15px;
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  border-top: 2px solid var(--c-line);
}
.kf-health-chip.is-good { border-top-color: var(--c-good); }
.kf-health-chip.is-watch { border-top-color: var(--c-watch); }
.kf-health-chip.is-attention { border-top-color: var(--c-attention); }
.kf-health-chip.is-risk { border-top-color: var(--c-risk); }
.kf-health-chip-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.kf-health-chip-head svg { width: 14px; height: 14px; color: var(--c-ink-3); flex: 0 0 auto; }
.kf-health-label {
  font-family: var(--font-display); font-weight: 600; font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kf-health-value { font-weight: 600; font-size: 20px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.kf-health-chip .kf-status { font-size: 9.5px; padding: 3px 8px; }
.kf-health-says {
  display: flex; flex-direction: column; gap: 5px; margin-top: 14px;
  font-size: 13.5px; color: var(--c-ink-2);
}
.kf-health-says > svg { width: 15px; height: 15px; color: var(--c-good); }
.kf-health-say-label { font-family: var(--font-display); font-weight: 600; }
@media (max-width: 720px) {
  .kf-health-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------- KPI tiles ---------------- */

.kf-kpis { display: grid; gap: 14px; }
.kf-kpis.is-primary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kf-kpis.is-secondary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 720px) {
  .kf-kpis.is-primary, .kf-kpis.is-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.kf-kpi {
  text-align: left; background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-md); padding: 15px 16px; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px;
  transition: border-color .15s, box-shadow .15s, transform .12s;
  position: relative; overflow: hidden;
}
.kf-kpi:hover { border-color: var(--c-accent); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.kf-kpi-label {
  font-family: var(--font-display); font-size: 10.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-3);
}
.kf-kpi-value { font-weight: 600; font-size: 26px; line-height: 1.15; letter-spacing: -.02em; }
.kf-kpis.is-secondary .kf-kpi { padding: 13px 15px; }
.kf-kpis.is-secondary .kf-kpi-value { font-size: 21px; }
.kf-kpi-note { font-size: 12.5px; color: var(--c-ink-2); line-height: 1.4; }
.kf-kpi-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; margin-top: 4px; }
.kf-kpi-delta { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kf-kpi-delta.is-up { color: var(--c-good-ink); }
.kf-kpi-delta.is-down { color: var(--c-risk-ink); }
.kf-kpi-delta.is-flat { color: var(--c-ink-3); }
.kf-kpi-stripe { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.kf-kpi-stripe.is-good { background: var(--c-good); }
.kf-kpi-stripe.is-watch { background: var(--c-watch); }
.kf-kpi-stripe.is-attention { background: var(--c-attention); }
.kf-kpi-stripe.is-risk { background: var(--c-risk); }
.kf-kpi-stripe.is-unknown { background: var(--c-line); }

/* ---------------- charts ---------------- */

.kf-chart-card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: 18px 20px 12px; }
.kf-chart-head { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.kf-chart-metric { font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.kf-chart-sub { font-size: 13px; color: var(--c-ink-2); }
.kf-toggle { display: inline-flex; gap: 2px; background: var(--c-surface-3); padding: 3px; border-radius: 999px; flex-wrap: wrap; }
.kf-toggle button {
  border: none; background: transparent; color: var(--c-ink-2); cursor: pointer;
  font-family: var(--font-display); font-size: 13px; font-weight: 500;
  padding: 6px 13px; border-radius: 999px;
}
.kf-toggle button:hover { color: var(--c-ink); }
.kf-toggle button.is-on { background: var(--c-surface); color: var(--c-ink); box-shadow: var(--shadow-sm); }
.kf-plot { position: relative; margin-top: 6px; }
.kf-plot svg { display: block; width: 100%; height: auto; font-family: var(--font-body); }
.kf-plot svg:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.kf-tick { font-variant-numeric: tabular-nums; }

.kf-tip {
  position: absolute; pointer-events: none; z-index: 5; min-width: 132px;
  background: var(--c-navy); color: #fff; border-radius: 10px; padding: 10px 12px;
  box-shadow: var(--shadow-md);
}
.kf-tip-head { font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c-onnavy-2); }
.kf-tip-value { font-size: 20px; font-weight: 600; margin-top: 3px; letter-spacing: -.01em; }
.kf-tip-label { font-size: 11.5px; color: var(--c-onnavy-2); }
.kf-tip-delta { font-size: 13px; font-weight: 600; margin-top: 7px; font-variant-numeric: tabular-nums; }
.kf-tip-delta.is-up { color: #7ee2ad; }
.kf-tip-delta.is-down { color: #ff9aa3; }

.kf-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-top: 16px; }
.kf-fact { background: var(--c-surface-2); border-radius: var(--r-sm); padding: 13px 15px; }
.kf-fact-label { font-family: var(--font-display); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-3); }
.kf-fact-value { font-weight: 600; font-size: 19px; margin-top: 3px; }
.kf-fact-note { font-size: 12.5px; color: var(--c-ink-2); margin-top: 2px; }

/* ---------------- ranked bars ---------------- */

.kf-ranks { display: flex; flex-direction: column; gap: 13px; }
.kf-rank { display: block; width: 100%; text-align: left; background: none; border: none; padding: 0; }
.kf-rank.is-pickable { cursor: pointer; border-radius: 6px; padding: 4px; margin: -4px; }
.kf-rank.is-pickable:hover { background: var(--c-surface-2); }
.kf-rank.is-active .kf-rank-fill { background: var(--c-navy); }
.kf-rank-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.kf-rank-name { font-size: 14.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kf-rank-value { font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.kf-rank-track { height: 10px; border-radius: 999px; background: var(--c-surface-3); margin-top: 6px; overflow: hidden; }
.kf-rank-fill { height: 100%; background: var(--c-accent); border-radius: 0 4px 4px 0; transition: width .3s ease; }
.kf-rank-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--c-ink-2); margin-top: 5px; }
.kf-rank-share { font-weight: 600; color: var(--c-ink); font-variant-numeric: tabular-nums; }

/* ---------------- split bar + meter ---------------- */

.kf-split { display: flex; gap: 2px; height: 26px; border-radius: 6px; overflow: hidden; }
.kf-split-seg { min-width: 4px; }
.kf-split-seg.is-good { background: var(--c-good); }
.kf-split-seg.is-watch { background: var(--c-watch); }
.kf-split-seg.is-risk { background: var(--c-risk); }
.kf-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 14px; }
.kf-legend-item { display: flex; gap: 9px; align-items: flex-start; }
.kf-legend-dot { width: 10px; height: 10px; border-radius: 3px; margin-top: 5px; flex: 0 0 auto; }
.kf-legend-dot.is-good { background: var(--c-good); }
.kf-legend-dot.is-watch { background: var(--c-watch); }
.kf-legend-dot.is-risk { background: var(--c-risk); }
.kf-legend-label { font-size: 13px; color: var(--c-ink-2); }
.kf-legend-value { font-weight: 600; font-size: 14.5px; font-variant-numeric: tabular-nums; }

.kf-meter { height: 10px; border-radius: 999px; background: var(--c-accent-soft); overflow: hidden; }
.kf-meter-fill { height: 100%; border-radius: 999px; }
.kf-meter-fill.is-accent { background: var(--c-accent); }
.kf-meter-fill.is-good { background: var(--c-good); }
.kf-meter-fill.is-watch { background: var(--c-watch); }
.kf-meter-fill.is-attention { background: var(--c-attention); }
.kf-meter-fill.is-risk { background: var(--c-risk); }
.kf-meter-caption { font-size: 12.5px; color: var(--c-ink-2); margin-top: 7px; }

/* ---------------- tables ---------------- */

.kf-table-wrap { overflow-x: auto; }
.kf-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.kf-table th {
  text-align: left; font-family: var(--font-display); font-size: 10.5px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--c-ink-3);
  padding: 0 18px 9px 0; border-bottom: 1px solid var(--c-line); white-space: nowrap;
}
.kf-table td { padding: 10px 18px 10px 0; border-bottom: 1px solid var(--c-line); vertical-align: middle; white-space: nowrap; }
.kf-table tr:last-child td { border-bottom: none; }
.kf-table .kf-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* names may wrap; figures never do, so columns cannot run into each other */
.kf-table td.kf-table-name { white-space: normal; min-width: 11ch; }
/* Only the LAST column drops its right padding. Removing it from every numeric
   column is what let adjacent headers run together ("TARGETSTATUS"). */
.kf-table th:last-child, .kf-table td:last-child { padding-right: 0; }
.kf-table-name { font-weight: 500; }

/* ---------------- insight steps ---------------- */

.kf-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; }
.kf-step { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: 19px 20px; position: relative; }
.kf-step-mark {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 11px;
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent-ink);
}
.kf-step-mark svg { width: 16px; height: 16px; }
.kf-step p { color: var(--c-ink-2); font-size: 14.5px; }
.kf-step.is-lead { background: linear-gradient(120deg, var(--c-navy), var(--c-navy-2)); border-color: transparent; }
.kf-step.is-lead .kf-step-mark { color: var(--c-cyan); }
.kf-step.is-lead p, .kf-step.is-lead li { color: #e7eefb; }
.kf-step.is-lead .kf-checklist li::before { background: var(--c-cyan); }

.kf-strengths { margin-top: 16px; }
.kf-strengths .kf-checklist li::before { background: var(--c-good); }

/* ---------------- action center ---------------- */

.kf-actions { display: flex; flex-direction: column; gap: 12px; }
.kf-action {
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md);
  padding: 18px 20px; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 18px; align-items: start;
}
.kf-action-no {
  font-family: var(--font-display); font-size: 20px; font-weight: 700;
  color: var(--c-ink-3); font-variant-numeric: tabular-nums; line-height: 1.2;
}
.kf-action-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kf-action h3 { font-size: 16.5px; font-weight: 600; }
.kf-action-area { font-family: var(--font-display); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-3); }
.kf-action-reason { color: var(--c-ink-2); font-size: 14.5px; margin-top: 8px; }
.kf-action-step { font-size: 14.5px; margin-top: 10px; display: flex; gap: 9px; }
.kf-action-step svg { width: 16px; height: 16px; color: var(--c-accent); flex: 0 0 auto; margin-top: 3px; }
.kf-action-metric { text-align: right; min-width: 118px; }
.kf-action-metric-label { font-family: var(--font-display); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-3); }
.kf-action-metric-value { font-weight: 600; font-size: 19px; font-variant-numeric: tabular-nums; margin-top: 3px; }

/* ---------------- readiness ---------------- */

.kf-readiness-score { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.kf-score { font-weight: 600; font-size: 44px; line-height: 1; letter-spacing: -.02em; }
.kf-readiness-list { display: flex; flex-direction: column; margin-top: 4px; }
.kf-readiness-item { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 13px 0; align-items: start; }
.kf-readiness-item + .kf-readiness-item { border-top: 1px solid var(--c-line); }
.kf-readiness-label { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; }
.kf-readiness-note { font-size: 13px; color: var(--c-ink-2); margin-top: 3px; max-width: 76ch; }
.kf-readiness-value { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.kf-limits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.kf-limits li { background: var(--c-surface-2); border-radius: var(--r-sm); padding: 12px 14px; font-size: 13.5px; color: var(--c-ink-2); }
.kf-limits b { color: var(--c-ink); font-weight: 600; display: block; font-family: var(--font-display); font-size: 13px; margin-bottom: 3px; }

/* ---------------- import flow ---------------- */

.kf-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kf-flow-step { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: 15px 16px; position: relative; }
.kf-flow-step.is-done { border-color: var(--c-good); }
.kf-flow-step.is-current { border-color: var(--c-accent); box-shadow: var(--shadow-sm); }
.kf-flow-no { font-family: var(--font-display); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; color: var(--c-ink-3); }
.kf-flow-step h4 { font-size: 15px; margin-top: 4px; }
.kf-flow-step p { font-size: 13px; color: var(--c-ink-2); margin-top: 4px; }
.kf-sample-panel { margin-bottom: 20px; }
.kf-privacy {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--c-good-soft); border-radius: var(--r-sm); padding: 13px 15px;
  font-size: 14px; color: var(--c-good-ink); margin-bottom: 16px;
}
.kf-privacy svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; }
.kf-privacy strong { font-family: var(--font-display); }
.kf-sample-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.kf-sample-card { background: var(--c-surface-2); border-radius: var(--r-md); padding: 16px 18px; }
.kf-sample-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.kf-sample-name { font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.kf-sample-size { font-size: 12.5px; color: var(--c-ink-3); font-variant-numeric: tabular-nums; }
.kf-sample-what { font-size: 13.5px; color: var(--c-ink-2); margin-top: 5px; }
.kf-sample-cols { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.kf-col-chip {
  font-size: 11.5px; padding: 3px 9px; border-radius: 999px;
  background: var(--c-surface); border: 1px solid var(--c-line); color: var(--c-ink-2);
}
.kf-col-chip.is-required { background: var(--c-accent-soft); border-color: transparent; color: var(--c-accent-ink); font-weight: 600; }
.kf-sample-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.kf-preview { margin-top: 14px; }
.kf-preview .kf-table { font-size: 12.5px; }
.kf-preview .kf-table th, .kf-preview .kf-table td { padding: 6px 10px 6px 0; white-space: nowrap; }
.kf-preview-note { font-size: 12.5px; color: var(--c-ink-3); margin-top: 8px; }

.kf-drop {
  border: 1.5px dashed var(--c-line); border-radius: var(--r-md); padding: 26px 20px; text-align: center;
  background: var(--c-surface-2);
}
.kf-drop.is-over { border-color: var(--c-accent); background: var(--c-accent-soft); }
.kf-drop p { color: var(--c-ink-2); font-size: 14px; margin-top: 8px; }
.kf-map { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-top: 16px; }
.kf-map-row { background: var(--c-surface-2); border-radius: var(--r-sm); padding: 11px 13px; }
.kf-map-row .kf-field-label { margin-bottom: 5px; }
.kf-map-row .kf-select { width: 100%; max-width: none; }
.kf-report { margin-top: 16px; display: flex; flex-direction: column; gap: 9px; }
.kf-report-line { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.kf-report-line svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 3px; }
.kf-report-line.is-ok svg { color: var(--c-good); }
.kf-report-line.is-warn svg { color: var(--c-watch); }
.kf-report-line.is-bad svg { color: var(--c-risk); }

/* ---------------- offer + form ---------------- */

.kf-offer { background: linear-gradient(125deg, var(--c-navy) 0%, var(--c-navy-2) 65%, #0d3b8c 100%); border-radius: var(--r-lg); padding: 34px 30px; position: relative; overflow: hidden; }
.kf-offer::after {
  content: ""; position: absolute; left: -80px; bottom: -120px; width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(0, 205, 230, .2), transparent 62%); pointer-events: none;
}
.kf-offer h2 { color: var(--c-onnavy); font-size: clamp(22px, 2.7vw, 30px); }
.kf-offer-lead { color: var(--c-onnavy-2); margin-top: 10px; max-width: 58ch; font-size: 15.5px; }
.kf-offer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 24px 0; position: relative; }
.kf-offer-card { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .13); border-radius: var(--r-md); padding: 18px; }
.kf-offer-card svg { width: 20px; height: 20px; color: var(--c-cyan); }
.kf-offer-card h3 { color: var(--c-onnavy); font-size: 16px; margin-top: 10px; }
.kf-offer-card p { color: var(--c-onnavy-2); font-size: 13.5px; margin-top: 6px; }
.kf-offer-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; position: relative; }
.kf-offer-foot .kf-btn { background: var(--c-cyan); border-color: var(--c-cyan); color: #04203f; }
.kf-offer-foot .kf-btn:hover { background: #fff; border-color: #fff; color: var(--c-navy); }
.kf-offer-quiet { color: var(--c-onnavy-2); font-size: 13.5px; max-width: 46ch; }

.kf-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.kf-form-field { display: flex; flex-direction: column; gap: 5px; }
.kf-form-field.is-wide { grid-column: 1 / -1; }
.kf-input, .kf-textarea {
  padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid var(--c-line);
  background: var(--c-surface); color: var(--c-ink); font-size: 14.5px; width: 100%;
}
.kf-input:hover, .kf-textarea:hover { border-color: var(--c-ink-3); }
.kf-textarea { min-height: 84px; resize: vertical; }
.kf-checks { display: flex; gap: 8px; flex-wrap: wrap; }
.kf-check { position: relative; }
.kf-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kf-check span {
  display: inline-block; padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--c-line); background: var(--c-surface); font-size: 13.5px; cursor: pointer;
}
.kf-check input:checked + span { background: var(--c-accent-soft); border-color: var(--c-accent); color: var(--c-accent-ink); font-weight: 500; }
.kf-check input:focus-visible + span { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.kf-form-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.kf-form-note { font-size: 13px; color: var(--c-ink-2); max-width: 48ch; }
.kf-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kf-form-result {
  margin-top: 18px; background: var(--c-good-soft); color: var(--c-good-ink);
  border-radius: var(--r-sm); padding: 16px 18px; font-size: 14.5px;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
}
.kf-form-result.is-bad { background: var(--c-risk-soft); color: var(--c-risk-ink); }
.kf-result-head { font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.kf-result-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.kf-form-result .kf-form-note { color: inherit; opacity: .85; }
.kf-btn.is-onnavy {
  background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .28); color: var(--c-onnavy);
}
.kf-btn.is-onnavy:hover { background: rgba(255, 255, 255, .2); border-color: #fff; color: #fff; }
.kf-btn svg { width: 16px; height: 16px; }

/* ---------------- footer ---------------- */

.kf-footer { background: var(--c-navy); color: var(--c-onnavy-2); margin-top: 20px; padding-block: 30px; }
.kf-footer-in { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }
.kf-footer-tag { font-family: var(--font-display); font-weight: 600; letter-spacing: .06em; color: var(--c-onnavy); font-size: 15px; }
.kf-footer-tag span { color: var(--c-cyan); }
.kf-footer-flow { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; font-family: var(--font-display); }
.kf-footer-right { margin-left: auto; font-size: 13px; text-align: right; }
.kf-footer-right a { color: var(--c-cyan); text-decoration: none; }
.kf-footer-right a:hover { text-decoration: underline; }

.kf-narrow-only { display: none; }
.kf-inline-link { color: var(--c-accent-ink); font-weight: 500; }
.kf-empty { color: var(--c-ink-3); font-size: 14px; font-style: italic; }
.kf-note-line { font-size: 14.5px; color: var(--c-ink-2); margin-top: 14px; max-width: 78ch; }
.kf-inline-status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }

/* ---------------- responsive ---------------- */

@media (max-width: 900px) {
  /* Below sheet width the page metaphor stops helping: drop the desk and let the
     report fill the screen. */
  .kf-desk { background: var(--c-surface); padding-block: 0; }
  .kf-sheet { box-shadow: none; padding-inline: 18px; border-radius: 0; }
  .kf-section.is-page { min-height: 0; }
  /* minmax(0,1fr), not 1fr: a plain 1fr track takes its minimum from the widest
     table inside it and pushes the whole page sideways on a phone. */
  .kf-grid-summary { grid-template-columns: minmax(0, 1fr); }
  .kf-hero { border-left: none; padding-left: 0; text-align: left; border-top: 1px solid var(--c-line); padding-top: 14px; width: 100%; }
  .kf-hero-note { margin-left: 0; }
  .kf-action { grid-template-columns: 30px minmax(0, 1fr); }
  .kf-action-metric { grid-column: 2; text-align: left; min-width: 0; }
  .kf-identity-right { margin-left: 0; text-align: left; width: 100%; }
}

@media (max-width: 760px) {
  /* the row swipes on a phone; fade the right edge so it is clear it continues */
  .kf-nav { mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent); }
  .kf-filter-toggle { display: inline-flex; }
  .kf-filters { position: static; }
  .kf-filters:not(.is-open) { display: none; }
  .kf-filters-in .kf-btn { margin-left: 0; }
  .kf-field { flex: 1 1 140px; }
  .kf-select { max-width: none; width: 100%; }
  .kf-topbar-in { min-height: 52px; }
}

@media (max-width: 620px) {
  /* keep the top bar to one line so the sticky header does not eat the screen */
  .kf-wide-only { display: none; }
  .kf-narrow-only { display: inline; }
  body { font-size: 14.5px; }
  .kf-shell, .kf-sheet { padding-inline: 16px; }
  .kf-section { padding-block: 26px; }
  .kf-filters-in { gap: 10px; }
  .kf-select { font-size: 13.5px; }
  .kf-identity { padding: 20px; }
  .kf-offer { padding: 24px 20px; }
  .kf-card { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------------- print / save as PDF ----------------
   Kept last in the file on purpose: these rules have to win over the screen
   rules they override. */

.kf-print-only { display: none; }

@media print {
  @page { size: letter portrait; margin: 0.55in 0.5in 0.6in; }

  .kf-desk { background: #fff; padding: 0; }
  .kf-sheet { width: auto; max-width: none; box-shadow: none; padding-inline: 0; border-radius: 0; }
  /* Every tab starts its own page. Without this a heading and its subtitle sit
     alone at the foot of the previous page and the content lands overleaf. */
  .kf-section { break-before: page; }
  .kf-section.is-page { min-height: 0; break-before: auto; }
  /* the explainer tab is for the reader on screen, not for the printed report */

  :root {
    --c-ground: #fff; --c-surface: #fff; --c-surface-2: #f6f9fd; --c-surface-3: #eef4fb;
    --c-line: #d8e2ef; --c-grid: #d8e2ef;
  }
  body { background: #fff; font-size: 10pt; line-height: 1.5; }

  .kf-topbar, .kf-navbar, .kf-filters, .kf-chips, .kf-rail,
  #import, #help, .kf-offer, .kf-section-tools, .kf-toggle,
  .kf-btn, .kf-filter-toggle, .kf-nav { display: none !important; }
  /* with the rail gone the report has the whole page */
  .kf-desk-in { display: block; padding-inline: 0; max-width: none; }

  .kf-print-only { display: block; }

  .kf-print-head {
    display: flex !important; align-items: center; gap: 16px;
    padding-bottom: 10pt; margin-bottom: 12pt; border-bottom: 1.5pt solid var(--c-navy);
  }
  .kf-print-logo { height: 34px; width: auto; }
  .kf-print-title { display: flex; flex-direction: column; }
  .kf-print-title strong { font-family: var(--font-display); font-size: 14pt; color: var(--c-navy); }
  .kf-print-title span { font-size: 9pt; color: var(--c-ink-2); }
  .kf-print-meta { margin-left: auto; text-align: right; font-size: 8.5pt; color: var(--c-ink-2); }

  .kf-watermark {
    position: fixed; inset: 0; z-index: 0;
    display: flex !important; flex-direction: column; align-items: center; justify-content: center;
    transform: rotate(-26deg); opacity: .1; pointer-events: none; z-index: 9;
  }
  .kf-watermark img { width: 118px; height: 118px; }
  .kf-watermark-name {
    font-family: var(--font-display); font-weight: 700; font-size: 58pt;
    letter-spacing: .04em; color: var(--c-navy); line-height: 1.1;
  }
  .kf-watermark-note {
    font-family: var(--font-display); font-weight: 600; font-size: 15pt;
    letter-spacing: .3em; text-transform: uppercase; color: var(--c-navy);
  }

  /* The cards are opaque white, so a watermark behind them is invisible. It has
     to sit above the content at low opacity, and stay non-interactive. */
  main, .kf-section { position: relative; z-index: auto; }
  .kf-shell { max-width: none; padding-inline: 0; }
  .kf-section { padding-block: 0 10pt; scroll-margin-top: 0; break-inside: auto; }
  .kf-section + .kf-section { border-top: none; }
  #pulse { padding-top: 0; }

  .kf-card, .kf-action, .kf-chart-card, .kf-step, .kf-kpi, .kf-fact, .kf-identity {
    break-inside: avoid; box-shadow: none !important;
  }
  /* keep the eyebrow, heading and subtitle together, and glued to what follows */
  .kf-section-head { break-inside: avoid; break-after: avoid; margin-bottom: 12pt; }
  .kf-section h2, .kf-eyebrow, .kf-section-sub { break-after: avoid; }
  .kf-block-label, .kf-card-title { break-after: avoid; }
  .kf-health-block, .kf-ranks, .kf-actions { break-inside: avoid; }
  .kf-table thead { display: table-header-group; }
  .kf-table tr { break-inside: avoid; }
  /* One column in print. Side-by-side cards leave the right-hand one too narrow
     for a four-column table, and print has no horizontal scroll to rescue it -
     the columns were simply clipped off the page. */
  .kf-grid-summary { grid-template-columns: minmax(0, 1fr); gap: 10pt; }
  .kf-table { width: 100%; }
  .kf-table-wrap { overflow: visible; }
  .kf-table td, .kf-table th { white-space: normal; }
  .kf-table .kf-num { white-space: nowrap; }
  .kf-identity { border-radius: 8pt; }
  .kf-kpi { cursor: default; }
  .kf-table { font-size: 8.5pt; }
  .kf-table-wrap { overflow: visible; }
  .kf-trend-table, #kf-trend-table { display: block !important; }
  a { text-decoration: none; color: inherit; }
  .kf-footer { background: #fff; color: var(--c-ink-2); padding-block: 10pt 0; border-top: .75pt solid var(--c-line); }
  .kf-footer-tag { color: var(--c-navy); font-size: 10pt; }
  .kf-footer-tag span { color: var(--c-accent-ink); }
  .kf-footer-right { color: var(--c-ink-2); }
}


/* ---- wordmark per theme -------------------------------------------------
   The primary lockup has a near-black "Klaro" and the reverse one has a white
   "Klaro". The topbar follows the theme, so the wrong one disappears into it.
   These rules mirror the theme selectors used at the top of this file. */
.kf-logo-on-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kf-logo-on-light { display: none; }
  :root:not([data-theme="light"]) .kf-logo-on-dark { display: block; }
}
:root[data-theme="dark"] .kf-logo-on-light { display: none; }
:root[data-theme="dark"] .kf-logo-on-dark { display: block; }

/* ================= the right-hand rail =====================================
   The report reads on the left; the things you do to it - filter it, jump
   around it - sit together in a column on the right. Two gains beyond the
   look: the tab list stops wrapping to two rows and eating the top of the
   screen, and the filters can no longer shift the report, because they are no
   longer above it. */

/* Three columns, the way a documentation site does it: what to read on the
   left, what you are reading in the middle, what you can change to it on the
   right. The desk is wider than the old page on purpose - the rails are added
   beside the report, not taken out of it. */
.kf-desk-in {
  max-width: calc(var(--max) + 480px); margin: 0 auto; padding-inline: 24px;
  display: grid;
  grid-template-columns: clamp(178px, 15vw, 226px) minmax(0, 1fr) clamp(178px, 15vw, 226px);
  gap: clamp(16px, 2vw, 30px); align-items: start;
}
.kf-desk-in > .kf-sheet { max-width: var(--max); margin: 0; padding-inline: 34px; }

/* align-items:start on the desk sized each rail to its own content, and a
   sticky child can only travel inside its own parent - so both rails stopped
   following about 300px down and scrolled away. Stretching them to the height
   of the report gives the sticky element the full run. */
.kf-rail { min-width: 0; align-self: stretch; }
.kf-rail-stick {
  position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--topbar-h, 60px) + 20px);
  display: grid; gap: 18px;
}
.kf-rail-label {
  font-family: var(--font-display); font-weight: 600; font-size: 11.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink-3);
  margin-bottom: 10px;
}

/* the tab list, running down */
.kf-nav-wrap {
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 14px;
  padding: 16px 14px;
}
.kf-desk-in .kf-nav {
  display: grid; gap: 2px; overflow: visible; padding-block: 0; flex: none; min-width: 0;
  max-height: none;
}
.kf-desk-in .kf-nav a {
  display: block; width: 100%; text-align: left;
  padding: 9px 12px; border-radius: 9px; white-space: normal; line-height: 1.3;
}

/* filters, stacked to the column width */
.kf-desk-in .kf-filters {
  position: static; background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: 14px; padding: 16px 14px;
}
.kf-desk-in .kf-filters-in { display: grid; gap: 12px; padding-block: 0; }
.kf-desk-in .kf-field { flex: none; width: 100%; }
.kf-desk-in .kf-select { max-width: none; width: 100%; }
.kf-desk-in .kf-filters-in .kf-btn { margin-left: 0; width: 100%; justify-content: center; }
.kf-desk-in .kf-chips { padding-block: 12px 0; }
.kf-desk-in .kf-filters.is-hidden { display: none; }

/* No two-column middle state on purpose. Stacking the filters under the
   section list needs them in the same grid cell, and a sticky child can only
   travel inside its own cell - so one of the two always broke. Three columns
   hold down to 1000px because the rails shrink with the viewport; below that
   they go to the top of the page instead. */

/* Three columns need real width. At 1150px the report drops to 685px and four
   of its tables start scrolling sideways inside their cards - the rails end up
   costing more than they give. Below 1240 both rails go to the top instead:
   the tabs as a swiping row, the filters behind their button. The report gets
   the full width back. Microsoft Learn collapses its own nav the same way. */
@media (max-width: 1240px) {
  .kf-desk-in { grid-template-columns: minmax(0, 1fr); gap: 0; padding-inline: 0; }
  .kf-desk-in > .kf-sheet { grid-column: 1; grid-row: auto; padding-inline: 24px; }
  .kf-rail { width: 100%; }
  .kf-rail.is-nav { order: -2; grid-column: 1; grid-row: auto; }
  .kf-rail.is-filters { order: -1; grid-column: 1; grid-row: auto; }
  .kf-rail.is-filters .kf-rail-stick { position: sticky; }
  .kf-rail-stick {
    position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--topbar-h, 60px));
    z-index: 30; gap: 0;
    background: var(--c-surface); border-bottom: 1px solid var(--c-line);
    padding-inline: 24px;
  }
  .kf-nav-wrap { border: 0; border-radius: 0; padding: 0; background: none; }
  .kf-rail-label { display: none; }
  .kf-desk-in .kf-nav {
    display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-block: 9px;
  }
  .kf-desk-in .kf-nav::-webkit-scrollbar { display: none; }
  .kf-desk-in .kf-nav a { width: auto; white-space: nowrap; padding: 7px 13px; }
  .kf-desk-in .kf-filters {
    position: static; border: 0; border-radius: 0; padding: 0 0 12px;
    background: none;
  }
  .kf-desk-in .kf-filters-in {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
  }
  .kf-desk-in .kf-field { flex: 1 1 150px; width: auto; }
  .kf-desk-in .kf-filters-in .kf-btn { width: auto; margin-left: auto; }
  .kf-rail-stick > .kf-filter-toggle { order: 2; }
}


/* "This report" - the context card under the filters in the right rail */
.kf-rail-card {
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 14px;
  padding: 16px 14px;
}
.kf-rail-fact {
  display: grid; gap: 1px; padding-block: 7px;
  border-bottom: 1px solid var(--c-line);
}
.kf-rail-fact:last-child { border-bottom: 0; padding-bottom: 0; }
.kf-rail-fact span { font-size: 11.5px; color: var(--c-ink-3); }
.kf-rail-fact strong {
  font-family: var(--font-display); font-weight: 600; font-size: 13.5px;
  color: var(--c-ink); line-height: 1.3;
}
@media (max-width: 1000px) {
  /* stacked, the top bar already says which data is loaded */
  .kf-rail-card { display: none; }
}
@media print { .kf-rail-card { display: none !important; } }

/* ================= tighter report =========================================
   Four of the six tables sit in half-width cards. A four or five column table
   needs about 410px of room and the card gives 374, so columns were being cut
   off at the right edge - the outstanding figures in Collections and the
   expense amounts in Cost. Narrower cells and slightly smaller figures bring
   every table inside its card. */

.kf-table { font-size: 13px; }
.kf-table th { font-size: 10px; padding: 0 12px 7px 0; letter-spacing: .07em; }
.kf-table td { padding: 7px 12px 7px 0; }
.kf-table td.kf-table-name { min-width: 9ch; }

/* the report as a whole was running about a third taller than a laptop screen,
   so each tab now asks for less room */
.kf-section { padding-block: 22px; }
.kf-card { padding: 18px; }
.kf-grid-summary, .kf-grid-2, .kf-grid-3 { gap: 13px; }
.kf-kpis { gap: 11px; }
.kf-facts { gap: 11px; margin-top: 12px; }
.kf-steps { gap: 11px; }
.kf-step { padding: 15px 17px; }

/* Two columns made this worse, not better: each action card is itself a grid
   of number / text / figure, so halving its width made the text wrap and the
   cards grew from 198px to 470px. They stay in one column and get shorter
   instead - tighter padding, smaller type, and the description held to two
   lines with the rest one click away. */
.kf-actions { gap: 9px; }
.kf-action { padding: 13px 16px; gap: 14px; }
.kf-action h3 { font-size: 15.5px; }
.kf-action p { font-size: 13.5px; }
.kf-action-no { font-size: 13px; }
.kf-action-metric { font-size: 13px; }

/* Talk to us had the offer stacked on top of the form, over a thousand px of
   it. They belong beside each other. */
@media (min-width: 900px) {
  #help { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
  #help .kf-section-head { grid-column: 1 / -1; }
  #help .kf-offer { margin: 0; }
}

/* the summary cards on Data readiness and the Pulse tab */
.kf-exec { padding: 18px 20px; }
.kf-exec-blocks { gap: 11px; }
.kf-identity { padding: 15px 18px; }
.kf-health-strip { gap: 8px; }
.kf-kpi { padding: 13px 15px; }


/* ---- the Actions tab as a ranked list ---- */
.kf-action-detail { display: none; }
.kf-action.is-open .kf-action-detail { display: block; margin-top: 8px; }
.kf-action-more {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 7px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 12.5px;
  color: var(--c-accent);
}
.kf-action-more svg { width: 15px; height: 15px; transition: transform .2s; }
.kf-action.is-open .kf-action-more svg { transform: rotate(180deg); }
.kf-action-more:hover { text-decoration: underline; }

/* ---- motion ----
   Blocks rise once as they come into view; bars and rank rows grow from the
   left. Everything is off when the reader has asked for less motion, and the
   print stylesheet strips it so a PDF never comes out half-faded. */
/* Visible is the default, hidden is the opt-in.
   The rise is a CSS transition, and a transition only advances while the
   window is actually drawing. In anything that does not draw - a background
   tab, a print pipeline, a screenshot service - a block that starts at
   opacity 0 never comes back, and the whole report reads as blank. So the
   blocks are visible unless app.js has confirmed a real frame and put
   .has-motion on the page. If it never confirms, nothing is ever hidden. */
.kf-rise { opacity: 1; transform: none; }
/* :not(.is-in) is load bearing. Without it this rule outranks
   .kf-rise.is-in (both 0,2,x, this one later in the file) and every block
   stays invisible even after it has been revealed - the whole report reads
   as blank in any browser that is actually painting. */
html.has-motion .kf-rise:not(.is-in) { opacity: 0; transform: translateY(12px); }
.kf-rise.is-in {
  opacity: 1; transform: none;
  transition: opacity .5s ease, transform .5s cubic-bezier(.22, .61, .36, 1);
}
.kf-card.kf-rise.is-in { transition-delay: .04s; }

@keyframes kfGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.kf-rise.is-in .kf-rank-fill,
.kf-rise.is-in .kf-bar-fill,
.kf-rise.is-in .kf-split-fill {
  transform-origin: left center;
  animation: kfGrow 1s cubic-bezier(.22, .61, .36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .kf-rise { opacity: 1; transform: none; }
  .kf-rise.is-in .kf-rank-fill,
  .kf-rise.is-in .kf-bar-fill,
  .kf-rise.is-in .kf-split-fill { animation: none; }
}
@media print {
  .kf-rise { opacity: 1 !important; transform: none !important; }
  .kf-action-detail { display: block !important; }
  .kf-action-more { display: none !important; }
}

/* Pulse: the identity strip, the executive card and the two KPI rows */
.kf-identity { padding: 13px 16px; }
.kf-exec { padding: 16px 18px; }
.kf-exec-status { font-size: clamp(19px, 2.4vw, 25px); }
.kf-kpis.is-secondary .kf-kpi { padding: 10px 13px; }
.kf-kpis.is-secondary .kf-kpi-value { font-size: 18px; }
.kf-health-block { margin-top: 12px; }

/* Revenue, Cost, Customers: the rank lists beside the tables */
.kf-chart-card { padding: 16px 18px; }

/* Data readiness: the check cards */
.kf-check { padding: 13px 15px; }

/* Talk to us */
.kf-offer { padding: 18px 20px; }
.kf-field { margin-bottom: 11px; }

/* Data readiness: eight check cards */
.kf-check { padding: 11px 13px; }
.kf-check + .kf-check { margin-top: 8px; }

/* Talk to us: the offer and the form, now side by side, each a little shorter */
.kf-offer { padding: 16px 18px; }
.kf-field { margin-bottom: 9px; }
.kf-field label { margin-bottom: 4px; }
#help .kf-card { padding: 16px 18px; }

/* Pulse: the health strip is the tallest block after the executive card */
.kf-health-block { margin-top: 10px; }
.kf-health-strip > * { padding: 11px 12px; }


/* ================= tab height, measured =====================================
   Budget: a 1500x900 window leaves 839px under the top bar. Every tab below
   was measured, the overage worked out, and the saving taken from the block
   that actually held the pixels. Numbers in the comments are the measured
   "before" so the next person can check my working.

     about      858  -19     pulse  1100  -261     revenue  942  -103
     cost       963  -124    customers 920  -81    actions  967  -128
     data      1001  -162    help   1000  -161                            */

/* ---- section heads: 65 to 112px depending on how long the sub runs ---- */
.kf-section-head { margin-bottom: 12px; }
.kf-section-head h2 { font-size: clamp(20px, 2.4vw, 25px); }
.kf-section-sub { font-size: 13.5px; line-height: 1.45; margin-top: 6px; }

/* ---- the four grid tabs: revenue, cost, customers, data ----
   Each is one head plus a two-card row, and the taller card sets the height:
   792, 792, 770, 830. Capping the card and letting its table scroll inside
   brings all four to 78 + 700 = 778. Nothing is lost - the rows are still
   all there, they just scroll in place instead of growing the page. */
/* Capping the card only works if something inside it actually scrolls. This
   used to name .kf-table-wrap alone, so the Revenue and Cost cards - which
   hold a rank list, not a table - overflowed by 324px and drew straight
   through the footer. The card clips, and whichever long block is inside it
   is the part that scrolls. */
.kf-grid-summary > .kf-card { display: flex; flex-direction: column; overflow: hidden; }
/* Structural rather than a list of class names. Naming them one at a time is
   how .kf-ranks got fixed and .kf-readiness-list did not - every card holds
   something different. Everything except the title can shrink and scroll, so
   a card can never spill whatever is put inside it. */
.kf-grid-summary > .kf-card > :not(.kf-card-title) { min-height: 0; overflow-y: auto; }

/* ---- actions: seven cards at 106 was 798; 100 brings it to 754 ---- */
.kf-actions { gap: 9px; }
.kf-action { padding: 11px 16px; }

/* ---- pulse: the densest tab. 893px of blocks has to become 714 ---- */
.kf-identity { padding: 10px 14px; }                 /* 115 -> 92  */
.kf-exec { padding: 14px 16px; }                     /* 356 -> 300 */
.kf-exec-status { font-size: clamp(18px, 2.2vw, 23px); }
.kf-exec-top { gap: 14px; }
.kf-exec-blocks { gap: 10px; }
.kf-kpis.is-primary .kf-kpi { padding: 11px 13px; }  /* 128 -> 108 */
.kf-kpis.is-primary .kf-kpi-value { font-size: clamp(19px, 2.2vw, 24px); }
.kf-kpis.is-secondary .kf-kpi { padding: 9px 12px; } /*  80 ->  68 */
.kf-kpis.is-secondary .kf-kpi-value { font-size: 17px; }
.kf-health-block { margin-top: 10px; }               /* 214 -> 146 */
.kf-health > * { padding: 10px 11px; }

/* ---- talk to us: the form card is 935 and has to reach 774 ---- */
#help .kf-section-sub { font-size: 13px; }
#help .kf-form { gap: 0; }
.kf-field { margin-bottom: 7px; }
.kf-field-label { margin-bottom: 3px; font-size: 12px; }
.kf-input, .kf-select { padding-block: 8px; }
#help textarea { min-height: 76px; }
.kf-offer { padding: 15px 17px; }
.kf-offer-lead { font-size: 14px; }
.kf-offer-grid { gap: 10px; }
.kf-offer-foot { margin-top: 12px; }

/* ---- start here: 19px over ---- */
.kf-about-contents { padding: 16px 18px; }
.kf-about-intro { gap: 12px; }

/* A capped card that scrolls is right on screen and wrong on paper: the PDF
   has the whole page, so nothing should be cut or scrollable there. */
@media print {
  .kf-grid-summary > .kf-card { max-height: none; display: block; }
  .kf-grid-summary > .kf-card > .kf-table-wrap { overflow: visible; }
}

/* ---- pulse, actions and talk to us: the last of the overage ----
   Pulse measured 1,118 against 839 of usable height. 142px of that was the
   gaps between its six blocks alone, which is more than the identity strip
   costs. The rest comes off the blocks themselves, in proportion to how much
   room each one was taking. */

/* #pulse is a flex column with row-gap:14px. A margin-top here ADDS to that
   gap rather than replacing it - that is what made this tab taller, not
   shorter, on the previous attempt. The gap itself is the thing to change. */
#pulse { row-gap: 8px; }
.kf-identity { padding: 8px 14px; }
.kf-exec { padding: 12px 15px; }
.kf-exec-statement { font-size: 14px; }
.kf-exec-blocks { gap: 9px; }
.kf-kpis.is-primary .kf-kpi { padding: 9px 12px; }
.kf-kpis.is-secondary .kf-kpi { padding: 7px 11px; }
.kf-health-block { margin-top: 8px; }
.kf-health-strip > * { padding: 8px 10px; }
.kf-health-says { padding-block: 8px; font-size: 13.5px; }

/* actions: 95px over across seven cards */
.kf-actions { gap: 7px; }
.kf-action { padding: 9px 15px; }

/* talk to us: 62px over, taken from the form */
.kf-field { margin-bottom: 6px; }
.kf-input, .kf-select { padding-block: 7px; }
#help textarea { min-height: 64px; }
.kf-offer-grid { gap: 8px; }

/* Pulse measured 1,130 with 120px of it in gaps and 948 in blocks. Gaps come
   down to 48, and the blocks give up 207 between them, in proportion. */
.kf-section-head { margin-bottom: 8px; }
.kf-exec-statement { font-size: 13.5px; line-height: 1.5; }
.kf-hero { padding: 10px 12px; }
.kf-exec-blocks > * { padding: 10px 12px; }
.kf-health-strip > * { padding: 7px 9px; }
.kf-health-says { padding-block: 7px; font-size: 13px; }
.kf-identity-mark { width: 38px; height: 38px; }

/* Last measured trim. Remaining overage after the previous pass was:
   about 6, revenue 7, customers 7, cost 27, data 27, help 38, actions 48.
   Section padding alone covers the first three; the rest take a little more
   from the block that holds their height. */
.kf-section { padding-block: 16px; }
/* Revenue, Cost, Customers and Data readiness are all the same shape: a head
   and a two-card row. Sizing the card off the window rather than a fixed
   672px brings all four inside the screen at once, and the rows inside keep
   scrolling so nothing is lost. */
/* The cap is measured per tab in app.js: head and band are different heights
   on each one, so a single subtraction either left a gap or pushed the last
   card past the fold. calc() stays as the fallback before the first fit. */
.kf-grid-summary > .kf-card,
.kf-section > .kf-card { max-height: var(--card-cap, calc(100vh - 230px)); }
.kf-section > .kf-card { display: flex; flex-direction: column; overflow: hidden; }
.kf-section > .kf-card > :not(.kf-card-title) { min-height: 0; overflow-y: auto; }
.kf-action { padding: 8px 15px; }
.kf-actions { gap: 6px; }
#help textarea { min-height: 54px; }
.kf-offer-foot { margin-top: 10px; }


/* ================= one tab at a time =======================================
   Only the chosen section is in the page. This is what makes a tab "one page"
   at any window size - at 632px of viewport no amount of padding ever could. */
/* :not(.is-on) with !important on purpose. Two sections set their own display
   elsewhere - .kf-section.is-page is flex and #help is a grid - and both beat
   a plain .kf-section{display:none}, so all three were showing at once. */
.kf-section:not(.is-on) { display: none !important; }
.kf-section + .kf-section { border-top: 0; }

/* Wrong on both counts. The visible section is still taller than the window,
   and a sticky child can only travel inside its own parent - so align-self:
   start made the rail 519px against a 1,046px section and the nav scrolled
   away as soon as you moved. The rail stretches to the section. */
.kf-rail { align-self: stretch; }

@media print {
  /* the PDF is the whole report, so every tab comes back */
  .kf-section { display: block !important; }
  .kf-section + .kf-section { border-top: none; }
}

/* With one section showing, the tallest thing on the page became the rails -
   twelve nav items on the left, seven filters and the report card on the
   right. Navigation should never make the page longer than the report, so
   each rail is capped to the window and scrolls inside itself. */
.kf-rail-stick {
  /* The 34px only covered the gap above. The footer is 61 and the desk
     carries 20 of margin, so the rail was 47px taller than the room it
     had and it, not the report, was what pushed every tab past the fold. */
  max-height: calc(100vh - var(--topbar-h, 60px) - 82px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.kf-rail-stick::-webkit-scrollbar { width: 6px; }
.kf-rail-stick::-webkit-scrollbar-thumb { background: var(--c-line); border-radius: 3px; }

@media print {
  .kf-rail-stick { max-height: none; overflow: visible; }
}

/* The footer repeats on all twelve tabs and was costing 103px of every one of
   them. With one tab on screen at a time it is chrome, not content, so it
   becomes a single quiet line and gives that height back to the report. */
.kf-footer { padding-block: 12px; }
.kf-footer-in { gap: 14px; font-size: 12.5px; }
.kf-footer-tag { font-size: 13px; }
.kf-footer-flow { display: none; }
.kf-footer-right { font-size: 12px; }
@media print { .kf-footer-flow { display: block; } }

/* ---- Start here ----
   It was a column of prose, a numbered list of eleven tabs that repeated the
   nav word for word, and a lone facts card stranded in a rail with nothing
   else in it.

   The eleven are now four groups named after what you want to know. Plain
   lines, no numbers, no boxes: the pills I tried first put the counter above
   the name and made eleven tall blobs, which read worse than what it replaced.
   The counter and the rest of the old list CSS are deleted, not overridden. */
.kf-contents {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 26px; margin: 0; padding: 0; list-style: none;
}
.kf-content-group { display: grid; gap: 6px; align-content: start; }
.kf-content-group-label {
  margin: 0; font-family: var(--font-display); font-weight: 600;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-ink-3);
}
.kf-content-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.kf-content-link {
  display: block; padding: 3px 0; text-decoration: none;
  font-family: var(--font-display); font-weight: 500;
  font-size: 13.5px; color: var(--c-ink);
}
.kf-content-link:hover { color: var(--c-accent); }
.kf-about-report {
  grid-column: 1 / -1; margin-top: 4px; padding-top: 14px;
  border-top: 1px solid var(--c-line);
}

@media (max-width: 640px) {
  .kf-contents { grid-template-columns: minmax(0, 1fr); }
}

/* Start here has no filters and now carries the report facts itself, so the
   right rail would be an empty column beside it. app.js sets this class - the
   rail is not a sibling of the section, so no selector can reach it from here. */
.kf-rail.is-filters.is-empty { display: none; }


.kf-report-crest {
  display: flex; align-items: center; gap: 12px;
  margin: 12px 0 16px; padding-bottom: 14px; border-bottom: 1px solid var(--c-line);
}
.kf-report-mark {
  width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 13px; background: var(--c-accent-soft); color: var(--c-accent-ink);
}
.kf-report-mark svg { width: 23px; height: 23px; }
.kf-report-by { display: grid; gap: 3px; min-width: 0; }
.kf-report-logo { width: 104px; height: auto; }
/* the display rules that hide one of the pair live with the topbar's, so only
   the width belongs here - setting display: block would undo them */
.kf-report-byline { font-size: 11.5px; color: var(--c-ink-3); }


/* ================= Start here, laid out ===================================
   What the measurements said about the old version: 424px of the window sat
   empty to the right, the opening paragraph was squeezed into a 387px ribbon
   beside a 653px card, and 256px of nothing sat under the facts.

   So: the desk gives up the column it was holding for the absent filter rail,
   the opening and the facts share the top row, and the list of tabs runs the
   full width underneath in four columns - one per group, which is the shape
   the content already had. */
/* Only where the desk is still three columns. Between 1000 and 1240 the rails
   already sit on top and the sheet is pinned to column 1, so a two-column grid
   there squeezed the whole Start here page into the 226px rail column. */
@media (min-width: 1241px) { .kf-desk-in.is-wide { grid-template-columns: var(--rail-w, 226px) minmax(0, 1fr); } }

@media (min-width: 1000px) {
  .kf-about {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    grid-template-areas: "intro report" "inside inside";
    gap: 26px 34px; align-items: start;
  }
  .kf-about-intro { grid-area: intro; }
  .kf-about-report { grid-area: report; }
  .kf-about-contents { grid-area: inside; }
  .kf-contents { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 26px; }
}

/* the facts stand on their own now, so they need their own edges */
.kf-about-report {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-md); padding: 20px 22px 8px;
}
.kf-about-report .kf-rail-fact:last-child { border-bottom: 0; }

@media (max-width: 999px) {
  .kf-about-report { margin-top: 18px; }
}


/* ---- the takeaway band ----
   What the numbers say, and the one thing to do about it, before the detail
   rather than after it.

   This block was deleted by accident in 8c9f247: a slice that was meant to
   remove the old contents list ran straight across it, and the band has been
   rendering as loose unstyled text ever since. Restored from bf4317a. */
.kf-takeaway {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 0; margin-bottom: 12px;
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-accent); border-radius: var(--r-md);
  overflow: hidden;
}
.kf-takeaway-read { padding: 12px 16px; }
.kf-takeaway-do { padding: 12px 16px; background: var(--c-surface-2); border-left: 1px solid var(--c-line); }
.kf-takeaway .kf-note-line { margin: 0; font-size: 13px; line-height: 1.5; }
.kf-takeaway-top { display: flex; align-items: center; gap: 9px; }
.kf-takeaway-step { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--c-ink); font-family: var(--font-display); font-weight: 500; }
.kf-takeaway-none { margin: 5px 0 0; font-size: 13px; color: var(--c-ink-3); }
.kf-takeaway-link {
  display: inline-block; margin-top: 6px; font-size: 12.5px;
  font-family: var(--font-display); font-weight: 600; color: var(--c-accent); text-decoration: none;
}
.kf-takeaway-link:hover { text-decoration: underline; }
.kf-takeaway.is-clear { border-left-color: var(--c-good); }

@media (max-width: 860px) {
  .kf-takeaway { grid-template-columns: minmax(0, 1fr); }
  .kf-takeaway-do { border-left: 0; border-top: 1px solid var(--c-line); }
}


/* ---- scrollbars inside the report ----
   Some blocks have to scroll on a short window. A default Windows scrollbar in
   the middle of a card reads as something unfinished, so they are thin, quiet,
   and only take colour when the pointer is over the block they belong to. */
.kf-sheet *::-webkit-scrollbar { width: 8px; height: 8px; }
.kf-sheet *::-webkit-scrollbar-track { background: transparent; }
.kf-sheet *::-webkit-scrollbar-thumb {
  background: transparent; border-radius: 99px;
  border: 2px solid transparent; background-clip: content-box;
}
.kf-sheet *:hover::-webkit-scrollbar-thumb,
.kf-sheet *:focus-within::-webkit-scrollbar-thumb {
  background: var(--c-line); background-clip: content-box;
}
.kf-sheet *::-webkit-scrollbar-thumb:hover { background: var(--c-ink-3); background-clip: content-box; }
.kf-sheet * { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.kf-sheet *:hover { scrollbar-color: var(--c-line) transparent; }


/* the name, then what it answers */
.kf-content-link { padding: 5px 0; }
.kf-content-blurb {
  display: block; margin-top: 1px;
  font-family: var(--font-body); font-weight: 400;
  font-size: 11.5px; line-height: 1.35; color: var(--c-ink-3);
}
.kf-content-link:hover .kf-content-blurb { color: var(--c-ink-2); }


/* ---- the Pulse, tightened ----
   Measured at 1040px: pulse-top 175, summary 319, figures 117 and 73, health
   239 - 1005px of content for 891px of room. Nothing here is removed, because
   which block to drop is not my decision. What is taken is slack: this tab
   carried 50px of section padding where every other tab carries 32, and the
   health chips and the business line were both padded for a wider page. */
@media (min-width: 900px) {
  #overview .kf-identity { padding: 7px 13px; }
  #overview .kf-identity .kf-sample-note { font-size: 11.5px; }
  #overview .kf-health-strip { gap: 7px; }
  #overview .kf-health-strip > * { padding: 7px 10px; }
  #overview .kf-health-block .kf-block-label { margin-bottom: 6px; }
}


/* ---- the filter rail ----
   .is-off carries the per-tab choice and was deleted along with the old
   contents list in 8c9f247, so every tab has been showing all seven filters
   since. The class was still being set; nothing was listening. */
#kf-filter-row .kf-field.is-off,
#kf-filter-row .kf-filter-group.is-off { display: none; }

/* Seven boxes in one column read as a wall. Two short lists with a heading
   each read as a choice: which months, then how to narrow it. */
.kf-filter-group {
  margin: 4px 0 0; font-family: var(--font-display); font-weight: 600;
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--c-ink-3);
}
.kf-filter-group + .kf-field { margin-top: 2px; }
.kf-rail.is-filters .kf-filters-in > .kf-filter-group:not(:first-child) {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--c-line);
}


/* ---------------- the guided tour (assets/tour.js) ----------------
   One element dims everything but the part being explained; the card beside
   it says how to read that part. Both move between steps instead of popping. */
.kf-tour-spot { position: fixed; z-index: 120; border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(7, 35, 83, .62);
  transition: top .5s cubic-bezier(.22,.61,.36,1), left .5s cubic-bezier(.22,.61,.36,1),
              width .5s cubic-bezier(.22,.61,.36,1), height .5s cubic-bezier(.22,.61,.36,1); }
.kf-tour-spot::after { content: ""; position: absolute; inset: -4px; border-radius: 17px; border: 2px solid #00cde6;
  animation: kfTourRing 1.6s ease-out infinite; }
@keyframes kfTourRing { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.04); } }
.kf-tour-card { position: fixed; z-index: 121; width: min(340px, calc(100vw - 32px)); background: #fff; border-radius: 14px;
  padding: 16px 18px 14px; box-shadow: 0 18px 50px rgba(7, 35, 83, .28); opacity: 0; transform: translateY(6px);
  transition: top .5s, left .5s; }
.kf-tour-card.is-in { opacity: 1; transform: none; transition: opacity .35s .2s, transform .35s .2s, top .5s, left .5s; }
.kf-tour-step { font-family: "Outfit", system-ui, sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: #0060cc; margin-bottom: 6px; }
.kf-tour-card h3 { font-family: "Outfit", system-ui, sans-serif; font-size: 17px; line-height: 1.25; margin: 0 0 6px; color: #072353; }
.kf-tour-card p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: #46597a; }
.kf-tour-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kf-tour-row .kf-btn { min-height: 40px; }
.kf-tour-dots { display: flex; gap: 4px; margin-left: auto; }
.kf-tour-dots i { width: 6px; height: 6px; border-radius: 50%; background: #e1e9f4; display: inline-block; }
.kf-tour-dots i.on { background: #0070eb; }
.kf-tour-close { background: none; border: 0; color: #7b8da9; font: inherit; font-size: 13px; cursor: pointer; min-height: 40px; padding: 0 6px; }
.kf-tour-close:hover { color: #072353; }
body.kf-touring { overflow-x: hidden; }
@media (max-width: 760px) {
  .kf-tour-card { left: 16px !important; right: 16px; width: auto; top: auto !important; bottom: 16px; }
  .kf-tour-row .kf-btn, .kf-tour-close { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .kf-tour-spot, .kf-tour-card { transition: none; }
  .kf-tour-spot::after { animation: none; }
}
@media print { .kf-tour-spot, .kf-tour-card { display: none; } }


/* ================= the PDF: every insight, first to last, on one aligned set of pages =================
   .kf-section:not(.is-on) hides the other tabs on screen with !important and
   two class selectors, which outranked the plain print rule - so the PDF only
   ever carried the tab that was open. This rule matches it exactly. */
@media print {
  .kf-section:not(.is-on) { display: block !important; }
  #import, #help { display: none !important; }
  .kf-section { break-before: page; padding: 0 0 14pt; }
  #overview { break-before: auto; }
  .kf-pulse-top { break-after: avoid; }

  /* the numbered chapters, in the order the report tells them */
  main { counter-reset: kfsec; }
  .kf-section { counter-increment: kfsec; }
  .kf-section .kf-section-head .kf-eyebrow::before { content: counter(kfsec) " \00b7 "; }

  /* one column, aligned left, nothing cut at the edge */
  .kf-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8pt; }
  .kf-grid-2, .kf-grid-3, .kf-grid-summary, .kf-split, .kf-ranks { grid-template-columns: minmax(0, 1fr) !important; }
  .kf-card, .kf-chart-card, .kf-action, .kf-step, .kf-kpi, .kf-identity, .kf-exec, .kf-health-item, .kf-fact { break-inside: avoid; }
  .kf-exec, .kf-takeaway { break-inside: avoid; }
  .kf-plot svg, .kf-plot canvas { max-width: 100%; height: auto; }
  .kf-card { max-height: none !important; overflow: visible !important; }
  .kf-section-head { margin-bottom: 10pt; }
  .kf-section-head h2 { font-size: 16pt; }
  .kf-section-sub { font-size: 9.5pt; }
  .kf-footer { display: none !important; }

  /* the cover: logo, business, period, what is in the data, then the pulse follows */
  .kf-print-head { break-after: avoid; }

  /* a footer line on every page, and a watermark that reads as a mark, not a stamp */
  @page { size: letter portrait; margin: 0.5in 0.5in 0.75in; }
  .kf-print-foot {
    position: fixed; left: 0; right: 0; bottom: -0.45in; display: flex !important; justify-content: space-between;
    font-family: var(--font-display); font-size: 7.5pt; letter-spacing: .06em; text-transform: uppercase; color: #7b8da9;
    border-top: .5pt solid #d8e2ef; padding-top: 4pt;
  }
  .kf-watermark { opacity: .07; transform: rotate(-24deg); gap: 2pt; }
  .kf-watermark img { width: 170px; height: 170px; margin-bottom: 6pt; }
  .kf-watermark-name { font-size: 64pt; letter-spacing: .02em; }
  .kf-watermark-note { font-size: 13pt; letter-spacing: .34em; }
}


/* ---- between 1000 and 1240px the rails already sit on top of the report ----
   The report-facts card was stacking there as a full-width list, and the two
   filter headings were sitting in the row as if they were fields. */
@media (max-width: 1240px) {
  .kf-rail-card { display: none; }
  .kf-desk-in .kf-filters-in .kf-filter-group { flex: 1 1 100%; margin: 0 0 -4px; }
  .kf-rail.is-filters .kf-filters-in > .kf-filter-group:not(:first-child) { margin-top: 6px; padding-top: 0; border-top: 0; }
  .kf-desk-in .kf-filters-in .kf-btn { align-self: flex-end; }
}

/* ---- Overview: the whole report on one screen ----
   Six figures, the five health areas, then the charts of the other tabs cut
   to their top rows. Every card links to the tab it came from. */
#overview.kf-section { padding-block: 16px 20px; }
.kf-ov-head { margin-bottom: 12px; }
.kf-ov-head .kf-eyebrow { margin-bottom: 2px; }
.kf-ov-head h2 { font-size: clamp(18px, 2vw, 22px); }
.kf-ov-period { margin-left: auto; font-size: 12.5px; color: var(--c-ink-2); }
.kf-ov-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.kf-ov-kpi {
  display: block; text-decoration: none; color: inherit; min-width: 0;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md);
  padding: 9px 12px 9px 14px; position: relative; overflow: hidden;
  transition: border-color .15s, transform .12s, box-shadow .15s;
}
.kf-ov-kpi:hover { border-color: var(--c-accent); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.kf-ov-kpi-label { display: block; font-family: var(--font-display); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kf-ov-kpi-value { display: block; font-weight: 600; font-size: 19px; line-height: 1.15; letter-spacing: -.02em; margin-top: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kf-ov-kpi-note { display: block; font-size: 11.5px; color: var(--c-ink-2); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kf-ov-health { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.kf-ov-chip {
  display: flex; align-items: center; gap: 8px; min-width: 0; text-decoration: none; color: inherit;
  background: var(--c-surface); border: 1px solid var(--c-line); border-left-width: 3px; border-radius: 10px;
  padding: 6px 10px; font-size: 12.5px; transition: border-color .15s;
}
.kf-ov-chip:hover { border-color: var(--c-accent); }
.kf-ov-chip.is-good { border-left-color: var(--c-good); }
.kf-ov-chip.is-watch { border-left-color: var(--c-watch); }
.kf-ov-chip.is-attention { border-left-color: var(--c-attention); }
.kf-ov-chip.is-risk { border-left-color: var(--c-risk); }
.kf-ov-chip.is-unknown { border-left-color: var(--c-line); }
.kf-ov-chip b { font-family: var(--font-display); font-weight: 600; white-space: nowrap; }
.kf-ov-chip > span { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kf-ov-chip .kf-status { margin-left: auto; font-size: 9.5px; padding: 2px 7px; flex: 0 0 auto; }
.kf-ov-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.kf-ov-card { padding: 11px 13px; min-width: 0; display: flex; flex-direction: column; }
.kf-ov-card.is-span2 { grid-column: span 2; }
.kf-ov-title {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px;
  font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--c-ink-3);
}
.kf-ov-title span { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kf-ov-title span svg { width: 14px; height: 14px; color: var(--c-accent); flex: 0 0 auto; }
.kf-ov-title a { text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--c-accent-ink); text-decoration: none; white-space: nowrap; flex: 0 0 auto; }
.kf-ov-title a:hover { text-decoration: underline; }
.kf-ov-plot { position: relative; min-height: 150px; }
.kf-ov-plot svg { max-width: 100%; height: auto; display: block; }
.kf-ov-bars { display: grid; gap: 7px; align-content: start; }
.kf-ov-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; font-size: 12px; }
.kf-ov-bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kf-ov-bar b { font-family: var(--font-display); font-weight: 600; font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.kf-ov-bar-track { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--c-surface-3); overflow: hidden; }
.kf-ov-bar-track i { display: block; height: 100%; background: var(--c-accent); border-radius: 3px; transition: width .5s cubic-bezier(.22,.61,.36,1); }
.kf-ov-bar-track i.is-watch { background: var(--c-watch); }
.kf-ov-bar-track i.is-attention { background: var(--c-attention); }
.kf-ov-bar-track i.is-risk { background: var(--c-risk); }
.kf-ov-card .kf-split { height: 18px; }
.kf-ov-card .kf-legend { gap: 6px 12px; margin-top: 8px; }
.kf-ov-card .kf-legend-value { font-size: 11.5px; }
.kf-ov-line { font-size: 12.5px; color: var(--c-ink-2); margin: 8px 0 0; line-height: 1.4; }
.kf-ov-line b { color: var(--c-ink); font-family: var(--font-display); font-weight: 600; }
.kf-ov-list { display: grid; gap: 0; font-size: 12.5px; align-content: start; }
.kf-ov-list > div { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--c-line); min-width: 0; }
.kf-ov-list > div:last-child { border-bottom: 0; }
.kf-ov-list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kf-ov-list b { font-family: var(--font-display); font-weight: 600; flex: 0 0 auto; font-size: 12px; }
.kf-ov-steps { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.4; color: var(--c-ink-2); display: grid; gap: 6px; }
.kf-ov-steps li::marker { font-family: var(--font-display); font-weight: 700; color: var(--c-accent-ink); }
@media (max-width: 1240px) {
  .kf-ov-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kf-ov-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .kf-ov-kpis { grid-template-columns: 1fr 1fr; }
  .kf-ov-health { grid-template-columns: 1fr 1fr; }
  .kf-ov-grid { grid-template-columns: minmax(0, 1fr); }
  .kf-ov-card.is-span2 { grid-column: auto; }
  .kf-ov-period { margin-left: 0; }
  .kf-ov-kpi { min-height: 44px; }
}
@media print {
  .kf-ov-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .kf-ov-health { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .kf-ov-grid { grid-template-columns: 1fr 1fr !important; }
  .kf-ov-card { break-inside: avoid; }
}

/* the overview, measured at 1310x780: 80px past the fold, taken from the legend and the paddings */
#overview.kf-section { padding-block: 12px 14px; }
.kf-ov-head { margin-bottom: 8px; }
.kf-ov-card .kf-legend { display: grid; grid-template-columns: 1fr; gap: 3px; margin-top: 7px; }
.kf-ov-card .kf-legend-item { align-items: center; gap: 7px; }
.kf-ov-card .kf-legend-dot { margin-top: 0; width: 9px; height: 9px; }
.kf-ov-card .kf-legend-item > div { display: flex; gap: 6px; align-items: baseline; min-width: 0; flex-wrap: wrap; }
.kf-ov-card .kf-legend-label { font-size: 11.5px; } .kf-ov-card .kf-legend-value { font-size: 11.5px; }
.kf-ov-line { margin-top: 7px; font-size: 12px; }
.kf-ov-list > div { padding: 4px 0; }
.kf-ov-steps { gap: 4px; font-size: 12px; }
.kf-ov-bars { gap: 6px; }

@media (max-width: 760px) {
  .kf-ov-title a { min-height: 32px; display: inline-flex; align-items: center; }
  .kf-ov-chip { min-height: 40px; }
}

#overview.kf-section { padding-block: 8px 10px; }
.kf-ov-plot { min-height: 126px; }

/* the suggested checks keep their own scroll inside the tab, like the other blocks */
.kf-actions { max-height: var(--card-cap, none); overflow: auto; padding-right: 4px; }
@media print { .kf-actions { max-height: none !important; overflow: visible !important; } }

/* phone: the three top-bar buttons on one line with the longer enquiry label */
@media (max-width: 620px) {
  .kf-topbar-right { gap: 6px; }
  .kf-topbar-right .kf-btn { padding: 7px 10px; font-size: 12.5px; white-space: nowrap; min-height: 40px; }
}

/* report indicators: the explanation and the rules behind the colours */
.kf-indicator-note { font-size: 12.5px; color: var(--c-ink-2); margin: -4px 0 10px; max-width: 80ch; }
.kf-indicator-rules { margin-top: 8px; font-size: 12.5px; color: var(--c-ink-2); }
.kf-indicator-rules summary { cursor: pointer; color: var(--c-accent-ink); font-family: var(--font-display); font-weight: 600; font-size: 12.5px; }
.kf-indicator-rules ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 3px; }
@media print { .kf-indicator-rules { display: block; } .kf-indicator-rules summary { list-style: none; } .kf-indicator-rules ul { display: grid; } }


/* ---- Overview: your business at a glance ----
   One priority panel with the strongest emphasis, three cards with one question
   each, the rest behind details. Blue for figures, amber for review, red only
   for a serious issue the records support. */
#overview.kf-section { padding-block: 14px 26px; }
.kf-ov-top .kf-identity { margin-top: 2px; }
.kf-ov-context { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 14px; }
.kf-ov-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; min-width: 0; }
.kf-ov-plain { font-size: 12.5px; color: var(--c-ink-3); }
.kf-ov-datalink { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-family: var(--font-display); font-weight: 600; font-size: 12.5px; color: var(--c-accent-ink); text-decoration: none; }
.kf-ov-datalink svg { width: 14px; height: 14px; }
.kf-ov-datalink:hover { text-decoration: underline; }
.kf-priority { background: var(--c-navy); color: #fff; border-radius: 16px; padding: 20px 22px 18px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 12px 30px; align-items: start; margin-bottom: 14px; }
.kf-priority-eyebrow { font-family: var(--font-display); font-weight: 600; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #7fe3f2; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kf-priority-tag { display: inline-block; font-size: 10.5px; letter-spacing: .08em; padding: 3px 9px; border-radius: 999px; background: rgba(215, 154, 0, .25); color: #ffd87a; }
.kf-priority-tag.is-risk { background: rgba(232, 47, 58, .28); color: #ffb3b8; }
.kf-priority h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.15; margin: 6px 0 8px; color: #fff; }
.kf-priority-head p { margin: 0; font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, .84); max-width: 54ch; }
.kf-priority-bars { display: grid; gap: 10px; align-self: center; }
.kf-priority-bar { display: grid; grid-template-columns: minmax(110px, 150px) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; color: rgba(255, 255, 255, .9); }
.kf-priority-bar .track { height: 14px; border-radius: 7px; background: rgba(255, 255, 255, .14); overflow: hidden; display: block; }
.kf-priority-bar i { display: block; height: 100%; background: #00cde6; border-radius: 7px; transition: width .5s cubic-bezier(.22,.61,.36,1); }
.kf-priority-bar.is-second i { background: #ffd87a; }
.kf-priority-bar b { font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kf-priority-scale { margin: 2px 0 0; font-size: 11.5px; color: rgba(255, 255, 255, .6); }
.kf-priority-actions { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.kf-priority .kf-btn.is-primary { background: #fff; color: var(--c-navy); border-color: #fff; }
.kf-priority .kf-btn.is-primary:hover { background: #eaf3ff; }
.kf-priority-list { grid-column: 1 / -1; margin: 0; padding: 12px 16px 12px 34px; background: rgba(255, 255, 255, .09); border-radius: 12px; display: grid; gap: 6px; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .92); }
.kf-priority-list[hidden] { display: none; }
.kf-ov-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.kf-ov-cards .kf-ov-card { padding: 16px 18px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.kf-ov-q { font-family: var(--font-display); font-weight: 600; font-size: 16px; margin: 0; color: var(--c-ink); }
.kf-ov-big { font-family: var(--font-display); font-weight: 700; font-size: 28px; letter-spacing: -.02em; line-height: 1.1; color: var(--c-accent-ink); font-variant-numeric: tabular-nums; }
.kf-ov-big.is-muted { font-size: 19px; color: var(--c-ink-3); }
.kf-ov-sub { font-size: 12.5px; color: var(--c-ink-3); margin-top: -6px; }
.kf-ov-say { font-size: 13.5px; color: var(--c-ink-2); line-height: 1.45; margin: 0; }
.kf-ov-months-wrap { padding-bottom: 16px; }
.kf-ov-months { display: flex; align-items: flex-end; gap: 4px; height: 72px; }
.kf-ov-months span { flex: 1 1 0; background: var(--c-accent-soft); border-radius: 3px 3px 0 0; position: relative; min-height: 2px; }
.kf-ov-months span.is-last { background: var(--c-accent); }
.kf-ov-months span.is-best { background: var(--c-navy); }
.kf-ov-months i { position: absolute; top: 100%; left: 0; right: 0; text-align: center; font-size: 9.5px; color: var(--c-ink-3); font-style: normal; margin-top: 3px; }
.kf-ov-split { height: 20px; border-radius: 10px; overflow: hidden; display: flex; background: var(--c-surface-3); }
.kf-ov-split i { display: block; height: 100%; }
.kf-ov-split .is-paid { background: var(--c-accent); }
.kf-ov-split .is-open { background: var(--c-watch); }
.kf-ov-split-l { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--c-ink-2); margin-top: 6px; flex-wrap: wrap; }
.kf-ov-split-l b { color: var(--c-ink); }
.kf-ov-items { display: grid; gap: 7px; }
.kf-ov-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; font-size: 12.5px; }
.kf-ov-item > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kf-ov-item b { font-family: var(--font-display); font-weight: 600; color: #8a6400; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kf-ov-item .track { grid-column: 1 / -1; height: 7px; border-radius: 4px; background: var(--c-surface-3); overflow: hidden; display: block; }
.kf-ov-item i { display: block; height: 100%; background: var(--c-watch); border-radius: 4px; }
.kf-ov-card .kf-btn { align-self: flex-start; min-height: 40px; }
.kf-ov-card > .kf-btn, .kf-ov-actions { margin-top: auto; }
.kf-ov-actions { display: grid; gap: 10px; }
.kf-ov-actions .kf-btn { justify-self: start; }
.kf-ov-detail { font-size: 12.5px; }
.kf-ov-detail .kf-table th, .kf-ov-detail .kf-table td { padding: 5px 6px; }
.kf-ov-detail .kf-content-link { display: inline-block; margin-top: 8px; color: var(--c-accent-ink); }
.kf-ov-more { margin-top: 14px; border: 1px solid var(--c-line); border-radius: 14px; padding: 8px 16px 12px; background: var(--c-surface); }
.kf-ov-more > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; padding: 8px 0; font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--c-accent-ink); }
.kf-ov-more > summary::-webkit-details-marker { display: none; }
.kf-ov-more > summary::before { content: "+"; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c-accent-soft); font-weight: 700; flex: 0 0 auto; }
.kf-ov-more[open] > summary::before { content: "\2013"; }
.kf-ov-more > :not(summary) { margin-top: 12px; }
.kf-ov-more .kf-about { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr); gap: 18px 26px; }
.kf-ov-more .kf-about-contents { grid-column: 1 / -1; }
.kf-nav-group { display: block; font-family: var(--font-display); font-weight: 600; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-3); margin: 12px 12px 4px; }
.kf-nav-group:first-child { margin-top: 0; }
@media (max-width: 1240px) { .kf-nav-group { display: none; } }
@media (max-width: 760px) {
  .kf-priority { grid-template-columns: minmax(0, 1fr); padding: 16px 16px 14px; gap: 12px; }
  .kf-priority-bar { grid-template-columns: minmax(0, 1fr) auto; }
  .kf-priority-bar .track { grid-column: 1 / -1; }
  .kf-ov-cards { grid-template-columns: minmax(0, 1fr); }
  .kf-ov-datalink { margin-left: 0; min-height: 40px; }
  .kf-priority .kf-btn, .kf-ov-card .kf-btn { min-height: 44px; }
  .kf-ov-more .kf-about { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-color-scheme: dark) {
  .kf-priority { background: #0b2a5e; }
  .kf-priority .kf-btn.is-primary { background: #eaf3ff; }
}
@media print {
  .kf-priority { background: #fff !important; color: var(--c-ink) !important; border: 1px solid var(--c-line); break-inside: avoid; }
  .kf-priority h3, .kf-priority-head p, .kf-priority-bar, .kf-priority-list, .kf-priority-scale { color: var(--c-ink) !important; }
  .kf-priority-eyebrow { color: var(--c-accent-ink) !important; }
  .kf-priority-bar .track { background: #e3e9f2 !important; }
  .kf-priority-list[hidden] { display: grid !important; background: #f4f8fd !important; }
  .kf-priority-actions { display: none !important; }
  .kf-ov-cards { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .kf-ov-card .kf-btn, .kf-ov-actions .kf-btn { display: none !important; }
  .kf-ov-detail[hidden] { display: block !important; }
  .kf-ov-more > summary::before { display: none; }
  .kf-ov-more > summary { list-style: none; }
}


/* ---- Refinements: missing values, gaps, scope labels, compact overview, stock cards ---- */
.kf-scope-note { font-size: 12.5px; color: var(--c-ink-3); margin: -8px 0 14px; line-height: 1.45; }
.kf-kpi-compare { font-size: 12.5px; color: var(--c-ink-3); margin: 8px 0 0; }
.kf-kpi-compare[hidden] { display: none; }
.kf-muted { color: var(--c-ink-3); }
.kf-ov-months span.is-gap { background: repeating-linear-gradient(135deg, var(--c-surface-3) 0 3px, transparent 3px 6px); height: 100% !important; }
.kf-ov-months span.is-gap i { color: var(--c-ink-3); }
/* the overview sits higher: tighter head, context row and first-check panel */
#overview.kf-section { padding-block: 10px 22px; }
#overview .kf-ov-head { margin-bottom: 8px; }
.kf-ov-context { margin: 8px 0 10px; }
.kf-priority { padding: 14px 18px 12px; gap: 8px 24px; margin-bottom: 10px; }
.kf-priority h3 { margin: 4px 0 6px; font-size: clamp(18px, 2vw, 23px); }
.kf-priority-head p { font-size: 14px; }
.kf-priority-bars { gap: 8px; }
.kf-priority-actions { margin-top: 2px; }
.kf-ov-cards { gap: 10px; }
/* stock as compact cards on a phone: quantity, reorder level and status read together */
.kf-stock-cards { display: none; }
.kf-stock-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--c-surface-2); border-left: 3px solid var(--c-line); }
.kf-stock-card.is-attention { border-left-color: var(--c-attention); }
.kf-stock-card.is-watch { border-left-color: var(--c-watch); }
.kf-stock-card.is-good { border-left-color: var(--c-good); }
.kf-stock-name { font-family: var(--font-display); font-weight: 600; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kf-stock-cat { grid-column: 1; font-size: 12px; color: var(--c-ink-3); margin-top: -4px; }
.kf-stock-card .kf-status { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
.kf-stock-nums { grid-column: 1 / -1; display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--c-ink-2); }
.kf-stock-nums b { font-family: var(--font-display); font-weight: 600; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.kf-stock-nums b.kf-value-attention { color: var(--c-attention-ink); }
@media (max-width: 620px) {
  .kf-stock-cards { display: grid; gap: 8px; }
  #kf-inventory-table { display: none; }
  /* a compact business introduction on a phone */
  #overview.kf-section { padding-block: 8px 18px; }
  #overview .kf-identity { padding: 12px 14px; gap: 10px; }
  #overview .kf-identity h1 { font-size: 19px; }
  #overview .kf-identity-meta { font-size: 12px; margin-top: 3px; gap: 6px; }
  #overview .kf-identity-period strong { font-size: 14px; }
  #overview .kf-identity .kf-sample-note { margin-top: 4px; font-size: 11.5px; }
  #overview .kf-identity-mark { width: 38px; height: 38px; border-radius: 10px; }
  #overview .kf-ov-head h2 { font-size: 19px; }
  #overview .kf-ov-head { margin-bottom: 4px; }
  .kf-ov-context { margin: 6px 0 8px; }
  .kf-priority { padding: 12px 14px 10px; gap: 8px; }
  .kf-priority-head p { font-size: 13.5px; }
  .kf-ov-cards .kf-ov-card { padding: 14px 14px 12px; gap: 8px; }
}
@media print { .kf-stock-cards { display: none !important; } #kf-inventory-table { display: block !important; } }

/* phone: the business introduction on three short lines, context row on one */
@media (max-width: 620px) {
  #overview .kf-identity-meta > span:nth-child(n+4) { display: none; }
  #overview .kf-identity-right { width: auto; }
  #overview .kf-identity-period { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
  #overview .kf-identity-period strong { margin-top: 0; font-size: 13px; }
  #overview .kf-ov-plain { display: none; }
  .kf-ov-context { margin: 4px 0 6px; min-height: 0; }
  .kf-ov-datalink { min-height: 36px; }
}

/* ---- plain words and card icons on the overview ---- */
.kf-plain { display: flex; gap: 12px; align-items: flex-start; background: var(--c-surface); border: 1px solid var(--c-line); border-left: 4px solid #00cde6; border-radius: 14px; padding: 12px 16px; margin: 0 0 12px; }
.kf-plain-ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: #dcf6fb; color: #06718a; display: grid; place-items: center; }
.kf-plain-ic svg { width: 18px; height: 18px; }
.kf-plain b { display: block; font-family: var(--font-display); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #06718a; margin-bottom: 2px; }
.kf-plain span { font-size: 15px; line-height: 1.5; color: var(--c-ink); }
.kf-ov-q { display: flex; align-items: center; gap: 10px; }
.kf-ov-ic { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 11px; background: var(--c-accent-soft); color: var(--c-accent-ink); display: grid; place-items: center; }
.kf-ov-ic svg { width: 19px; height: 19px; }
@media print { .kf-plain { break-inside: avoid; } }
/* phone: every tab, the brand link and the contents links are easy to tap */
@media (max-width: 760px) {
  .kf-nav a { min-height: 40px; display: inline-flex; align-items: center; }
  .kf-brand { min-height: 40px; }
  .kf-content-link { min-height: 40px; display: flex; align-items: center; }
}
@media (max-width: 760px) {
  .kf-ov-datalink, .kf-filter-toggle { min-height: 42px; }
  .kf-ov-datalink { display: inline-flex; align-items: center; }
}