/* =========================================================================
   Webassessor User Guide · Kryterion × Frappe UI theme
   Target: Scroll Viewport "Help Center" theme (K15t), custom CSS override
   Replaces the liquid-glass override in full. Paste as the ONLY custom CSS.
   Dark mode follows the theme's own switch: :root[data-color-scheme="dark"]
   ========================================================================= */

/* Must stay the first line of the file */
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@500;600&family=Inter:opsz,wght@14..32,400..600&display=swap");

/* -------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------- */
:root {
  /* Brand */
  --kf-primary: #E02672;
  --kf-primary-hover: #C81F63;
  --kf-primary-active: #A8184F;
  --kf-heading: #3A2568;
  --kf-secondary: #7030A1;
  --kf-supporting: #4B2F8A;
  --kf-tint: #F4F2FB;
  --kf-pink-soft: #FEE9EF;

  /* Frappe neutrals */
  --kf-surface: #FFFFFF;
  --kf-surface-card: #FFFFFF;
  --kf-gray-1: #F8F8F8;
  --kf-gray-2: #F3F3F3;
  --kf-gray-3: #EDEDED;
  --kf-gray-4: #E2E2E2;
  --kf-gray-7: #171717;
  --kf-ink-9: #171717;
  --kf-ink-8: #383838;
  --kf-ink-6: #525252;
  --kf-ink-5: #7C7C7C;
  --kf-ink-4: #999999;
  --kf-outline-1: #EDEDED;
  --kf-outline-2: #E2E2E2;
  --kf-outline-3: #C7C7C7;
  --kf-outline-4: #999999;

  /* Radix status steps (3 bg / 6 border / 9 solid / 11 text) */
  --kf-blue-3: #E6F4FE;  --kf-blue-6: #ACD8FC;  --kf-blue-11: #106EC3;
  --kf-green-3: #E6F6EB; --kf-green-6: #ADDDC0; --kf-green-11: #157B51;
  --kf-amber-3: #FFF7C2; --kf-amber-6: #F3D673; --kf-amber-11: #A25F06;
  --kf-red-3: #FEEBEC;   --kf-red-6: #FDBDBE;   --kf-red-11: #CC2A2F;
  --kf-purple-3: #F7EDFD; --kf-purple-6: #E0C4F2; --kf-purple-7: #D1B0EA;
  --kf-pink-3: #FEE9EF;  --kf-pink-4: #FEDCE6; --kf-pink-5: #FCCDDC; --kf-pink-11: #CF105D;
  /* Nav tints of the heading purple (#3A2568, hue 259) */
  --kf-nav-active: #E0D7F4;
  --kf-nav-hover: #ECE6F8;
  --kf-nav-active-strong: #D2C6EE;
  --kf-logo-mark: #675EC4;         /* the "W" */
  --kf-header-bg: #F4F2FB;         /* brand tint */
  --kf-sidebar-bg: #F8F6FC;        /* a half-step lighter than the header */
  --kf-chrome-border: #E6E1F4;
  --kf-card-border: #CFC2EB;       /* medium-light heading purple */
  --kf-card-border-hover: #B29FDB;
  --kf-footer-bg: #3A2568;
  --kf-footer-text: #CFC2EB;
  --kf-footer-link: #FFFFFF;

  /* Type */
  --kf-font-head: "Sora", "Inter", system-ui, sans-serif;
  --kf-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --kf-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Radius */
  --kf-r-sm: 4px;
  --kf-r: 8px;
  --kf-r-md: 10px;
  --kf-r-lg: 12px;
  --kf-r-xl: 16px;

  /* Elevation */
  --kf-shadow-sm: 0 1px 2px rgba(0,0,0,.1);
  --kf-shadow: 0 0 1px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.1);
  --kf-shadow-lg: 0 0 1px rgba(0,0,0,.35), 0 6px 8px -4px rgba(0,0,0,.1);
  --kf-shadow-xl: 0 0 1px rgba(0,0,0,.19), 0 1px 2px rgba(0,0,0,.07), 0 6px 15px -5px rgba(0,0,0,.11);
  --kf-shadow-2xl: 0 0 1px rgba(0,0,0,.2), 0 1px 3px rgba(0,0,0,.05), 0 10px 24px -3px rgba(0,0,0,.1);

  --kf-focus: 0 0 0 3px var(--kf-outline-3);
  --kf-ease: 150ms ease-out;

  /* ---- Map onto the K15t theme tokens so base components inherit ---- */
  --K15t-font-family-body: var(--kf-font-body);
  --K15t-font-family-sans: var(--kf-font-body);
  --K15t-font-family-headline: var(--kf-font-head);
  --K15t-font-family-code: var(--kf-font-mono);
  --K15t-font-family-mono: var(--kf-font-mono);
  --K15t-radius-factor: 1;

  --K15t-color-brand-25: #FEFCFE;
  --K15t-color-brand-50: #FBF7FE;
  --K15t-color-brand-75: #F7EDFD;
  --K15t-color-brand-100: #F2E2FB;
  --K15t-color-brand-200: #EAD5F8;
  --K15t-color-brand-300: #E0C4F2;
  --K15t-color-brand-400: #BE94E1;
  --K15t-color-brand-500: #7030A1;
  --K15t-color-brand-600: #4B2F8A;
  --K15t-color-brand-700: #3A2568;
  --K15t-color-brand-800: #2C1C50;
  --K15t-color-brand-900: #1F1438;

  --K15t-foreground: var(--kf-ink-8);
  --K15t-foreground-subtle: var(--kf-ink-6);
  --K15t-foreground-on-strong: #FFFFFF;
  --K15t-link: var(--kf-secondary);
  --K15t-link-visited: var(--kf-supporting);

  --K15t-surface: var(--kf-surface);
  --K15t-surface-hovered: var(--kf-gray-1);
  --K15t-surface-selected: var(--kf-gray-2);
  --K15t-surface-raised: var(--kf-surface-card);
  --K15t-surface-raised-hovered: var(--kf-gray-1);
  --K15t-surface-raised-selected: var(--kf-gray-2);
  --K15t-surface-overlay: var(--kf-surface-card);
  --K15t-surface-overlay-hovered: var(--kf-gray-2);
  --K15t-surface-overlay-selected: var(--kf-gray-3);

  --K15t-border-neutral: var(--kf-outline-1);
  --K15t-border-neutral-hovered: var(--kf-outline-3);
  --K15t-border-neutral-strong: var(--kf-outline-2);
  --K15t-border-neutral-strong-hovered: var(--kf-outline-3);
  --K15t-border-neutral-strong-selected: var(--kf-outline-4);

  --K15t-background-neutral: var(--kf-gray-2);
  --K15t-background-neutral-hovered: var(--kf-gray-3);
  --K15t-background-neutral-pressed: var(--kf-gray-4);
  --K15t-background-neutral-selected: var(--kf-gray-3);
  --K15t-background-neutral-subtle: transparent;
  --K15t-background-neutral-subtle-hovered: var(--kf-gray-2);
  --K15t-background-neutral-subtle-pressed: var(--kf-gray-3);
  --K15t-background-neutral-subtle-selected: var(--kf-gray-2);
  --K15t-background-input: var(--kf-gray-2);
  --K15t-background-input-hovered: var(--kf-gray-3);

  --K15t-background-brand: var(--kf-tint);
  --K15t-background-brand-hovered: var(--kf-purple-3);
  --K15t-background-brand-pressed: #F2E2FB;
  --K15t-background-brand-selected: var(--kf-purple-3);
  --K15t-background-brand-strong: var(--kf-primary);
  --K15t-background-brand-strong-hovered: var(--kf-primary-hover);
  --K15t-background-brand-strong-pressed: var(--kf-primary-active);
  --K15t-background-brand-strong-selected: var(--kf-primary-hover);

  --K15t-background-information: var(--kf-blue-3);
  --K15t-background-tip: var(--kf-green-3);
  --K15t-background-success: var(--kf-green-3);
  --K15t-background-warning: var(--kf-amber-3);
  --K15t-background-danger: var(--kf-red-3);
  --K15t-icon-information: var(--kf-blue-11);
  --K15t-icon-tip: var(--kf-green-11);
  --K15t-icon-success: var(--kf-green-11);
  --K15t-icon-warning: var(--kf-amber-11);
  --K15t-icon-danger: var(--kf-red-11);

  --theme-header-background-color: var(--kf-header-bg);
  --theme-header-text-color: var(--kf-heading);
  --theme-footer-background-color: var(--kf-gray-1);
  --theme-footer-text-color: var(--kf-ink-6);
}

:root[data-color-scheme="dark"] {
  --kf-primary: #F0478C;
  --kf-primary-hover: #F46A9F;
  --kf-primary-active: #D93A7A;
  --kf-heading: #D9CCF7;
  --kf-secondary: #B98BE3;
  --kf-supporting: #9F8BE0;
  --kf-tint: #231E30;
  --kf-pink-soft: #391424;

  --kf-surface: #0F0F0F;
  --kf-surface-card: #1C1C1C;
  --kf-gray-1: #232323;
  --kf-gray-2: #2B2B2B;
  --kf-gray-3: #343434;
  --kf-gray-4: #424242;
  --kf-gray-7: #F8F8F8;
  --kf-ink-9: #F8F8F8;
  --kf-ink-8: #D4D4D4;
  --kf-ink-6: #AFAFAF;
  --kf-ink-5: #808080;
  --kf-ink-4: #717171;
  --kf-outline-1: #232323;
  --kf-outline-2: #343434;
  --kf-outline-3: #424242;
  --kf-outline-4: #808080;

  --kf-blue-3: #0D2847;  --kf-blue-6: #104D87;  --kf-blue-11: #70B8FF;
  --kf-green-3: #132D21; --kf-green-6: #20573E; --kf-green-11: #3DD68C;
  --kf-amber-3: #302008; --kf-amber-6: #5C3D05; --kf-amber-11: #FFCA16;
  --kf-red-3: #3B1219;   --kf-red-6: #72232D;   --kf-red-11: #FF9592;
  --kf-purple-3: #301C3A; --kf-purple-6: #543569; --kf-purple-7: #664380;
  --kf-pink-3: #391424;  --kf-pink-4: #4F102D; --kf-pink-5: #5E1637; --kf-pink-11: #FF93AA;
  --kf-nav-active: #392D53;
  --kf-nav-hover: #2E2541;
  --kf-nav-active-strong: #463862;
  --kf-logo-mark: #AAA5DE;
  --kf-header-bg: #1A1624;
  --kf-sidebar-bg: #15121D;
  --kf-chrome-border: #2A2438;
  --kf-card-border: #4A3D66;
  --kf-card-border-hover: #604D89;
  --kf-footer-bg: #1E1830;
  --kf-footer-text: #A99BC9;
  --kf-footer-link: #F8F8F8;

  /* Black shadows barely read on dark; cards lean on surface + border */
  --kf-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --kf-shadow: 0 1px 2px rgba(0,0,0,.4);
  --kf-shadow-lg: 0 6px 8px -4px rgba(0,0,0,.5);
  --kf-shadow-xl: 0 6px 15px -5px rgba(0,0,0,.55);
  --kf-shadow-2xl: 0 10px 24px -3px rgba(0,0,0,.6);

  --K15t-link-visited: var(--kf-secondary);
  --K15t-background-brand-pressed: #3D234D;
  --K15t-foreground-on-strong: #FFFFFF;
}

/* -------------------------------------------------------------------------
   2. Base
   ------------------------------------------------------------------------- */
html { background: var(--kf-surface); }

body {
  font-family: var(--kf-font-body);
  font-optical-sizing: auto;
  font-feature-settings: "cv11" 1;
  color: var(--kf-ink-8);
  background: var(--kf-surface);
  -webkit-font-smoothing: antialiased;
}

/* Kill the liquid-glass backdrop if the old rule survives anywhere */
body::before { content: none !important; display: none !important; }

/* Soft lavender wash behind the top of every page (title, breadcrumb, intro), fading to white.
   The nav panel keeps its own grey on top of it. */
section.article-page,
main.article-overview-page {
  background: linear-gradient(180deg, var(--kf-tint) 0, var(--kf-surface) 300px) no-repeat !important;
}

::selection { background: var(--kf-pink-soft); color: var(--kf-ink-9); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--kf-focus);
  border-radius: var(--kf-r);
}

/* -------------------------------------------------------------------------
   3. Header
   ------------------------------------------------------------------------- */
/* 3px brand strip across the top: supporting purple -> Kryterion pink */
.header {
  background:
    linear-gradient(90deg, var(--kf-supporting), var(--kf-primary)) top left / 100% 3px no-repeat,
    var(--kf-header-bg) !important;
  backdrop-filter: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--kf-chrome-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}

/* Logo: "W" mark in heading purple, wordmark in black (white/lavender in dark).
   One image can't take two colours from a filter, so: flatten the logo to black,
   then lay a purple block over the W with
   mix-blend-mode: lighten. Black pixels take the purple; the white header stays white.
   Dark mode flips it: logo to white, lavender block with darken.
   Relies on a solid header/footer background, which this theme sets. */
.header-logo { filter: brightness(0); }
a:has(> .header-logo) { position: relative; }
a:has(> .header-logo)::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  width: auto;
  aspect-ratio: 1.09 / 1;   /* the W is ~1.09x as wide as the logo is tall; sized off height because
                               on the hub site the link also wraps the site name */
  background: var(--kf-logo-mark);
  mix-blend-mode: lighten;  /* works while the header bg is lighter than the mark in every channel */
  pointer-events: none;
}
:root[data-color-scheme="dark"] .header-logo { filter: brightness(0) invert(1); }
:root[data-color-scheme="dark"] a:has(> .header-logo)::after { mix-blend-mode: darken; }
/* Footer logo sits straight in the footer (no link to hang an overlay on); white on the purple footer */
.footer-logo { filter: brightness(0) invert(1) !important; }

.header-site-name {
  font-family: var(--kf-font-head);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0;
  color: var(--kf-heading) !important;
}

.header :is(button, a) { color: var(--kf-ink-6); transition: background-color var(--kf-ease), color var(--kf-ease); }
.header button:hover { background: var(--kf-gray-2); color: var(--kf-ink-9); }

/* -------------------------------------------------------------------------
   4. Search (Frappe filled input)
   ------------------------------------------------------------------------- */
/* The theme paints the pill on .search-bar__input-container; style that, keep the input clear */
.search-bar__input-container {
  background: var(--kf-surface) !important;
  border: 1px solid var(--kf-chrome-border) !important;
  border-radius: var(--kf-r) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transition: background-color var(--kf-ease), border-color var(--kf-ease);
}
.search-bar__input-container:hover { background: var(--kf-surface) !important; border-color: var(--kf-card-border) !important; }
.search-bar__input-container:focus-within {
  background: var(--kf-surface) !important;
  border-color: var(--kf-outline-4) !important;
  box-shadow: var(--kf-shadow-sm), 0 0 0 2px var(--kf-outline-3) !important;
}
.search-input { border-radius: var(--kf-r) !important; background: none !important; box-shadow: none !important; }
.search-input__input {
  font-family: var(--kf-font-body);
  font-size: 14px;
  font-weight: 420;
  letter-spacing: .02em;
  color: var(--kf-ink-8);
  background: transparent !important;
  border: 0 !important;
  border-radius: var(--kf-r) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  outline: none;
}
.search-input__input::placeholder { color: var(--kf-ink-4); }
.search-input__input:focus,
.search-input__input:focus-visible { box-shadow: none !important; outline: none; }
.search-input__submit {
  color: var(--kf-ink-5) !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: var(--kf-r) !important;
}
.search-input__submit:hover { color: var(--kf-ink-9) !important; background: var(--kf-gray-3) !important; }

/* -------------------------------------------------------------------------
   5. Left navigation tree
   ------------------------------------------------------------------------- */
/* Lavender panel, a touch lighter than the header, with a lavender hairline */
.navigator,
.drawer-nav {
  background: var(--kf-sidebar-bg) !important;
  backdrop-filter: none !important;
  border: 0 !important;
  border-right: 1px solid var(--kf-chrome-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.tree-item-header {
  border-radius: var(--kf-r);
  transition: background-color var(--kf-ease);
}
.tree-item-header a {
  font-size: 14px;
  font-weight: 420;
  letter-spacing: .02em;
  line-height: 1.15;
  color: var(--kf-ink-8) !important;
}
/* Current page: light tint of the heading purple, heading-purple text (9.6:1).
   Hover on the others: a lighter tint of the same hue. */
.tree-item-header:hover { background: var(--kf-nav-hover) !important; }
.tree-item-header:hover a,
.tree-item-header:hover .tree-action { color: var(--kf-heading) !important; }

.tree-item-header:has(> a[aria-current="page"]),
.tree-item-header:has(> a[aria-current="page"]):hover {
  background: var(--kf-nav-active) !important;
  box-shadow: none !important;
}
.tree-item-header a[aria-current="page"],
.tree-item-header:has(> a[aria-current="page"]) a,
.tree-item-header:has(> a[aria-current="page"]) .tree-action {
  color: var(--kf-heading) !important;
  font-weight: 500;
}
.tree-item-header:has(> a[aria-current="page"]) .tree-action:hover { background: var(--kf-nav-active-strong) !important; }
.tree-action { color: var(--kf-ink-5); border-radius: var(--kf-r-sm); }
.tree-action:hover { color: var(--kf-heading) !important; background: var(--kf-nav-active) !important; }

/* -------------------------------------------------------------------------
   6. Breadcrumbs + "Use with AI" (outline button)
   ------------------------------------------------------------------------- */
.breadcrumbs a {
  font-size: 13px;
  font-weight: 420;
  letter-spacing: .02em;
  color: var(--kf-ink-5) !important;
  text-decoration: none;
}
.breadcrumbs a:hover { color: var(--kf-ink-9) !important; }

.ai-actions button[popovertarget] {
  height: 32px;
  padding: 0 10px;
  font-family: var(--kf-font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--kf-ink-8) !important;
  background: var(--kf-surface) !important;
  border: 1px solid var(--kf-outline-2) !important;
  border-radius: var(--kf-r) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transition: border-color var(--kf-ease), background-color var(--kf-ease);
}
.ai-actions button[popovertarget]:hover { border-color: var(--kf-outline-3) !important; background: var(--kf-gray-1) !important; }
.ai-actions button[popovertarget] svg { color: var(--kf-ink-5); }

/* Popover menus (AI actions, theme switcher) */
theme-menu,
[popover] {
  background: var(--kf-surface-card) !important;
  backdrop-filter: none !important;
  border: 1px solid var(--kf-outline-1) !important;
  border-radius: var(--kf-r-lg) !important;
  box-shadow: var(--kf-shadow-xl) !important;
  padding: 4px !important;
}
theme-menu-item,
[popover] :is(a, button) {
  border-radius: var(--kf-r) !important;
  font-size: 14px;
  color: var(--kf-ink-8);
}
theme-menu-item:hover,
[popover] :is(a, button):hover { background: var(--kf-gray-2) !important; }

/* -------------------------------------------------------------------------
   7. On-this-page (TOC)
   ------------------------------------------------------------------------- */
/* <theme-toc> is overflow:auto, so anything drawn left of the links gets clipped.
   The rail is each link's own left border; the active one turns Kryterion pink. */
.toc {
  background: transparent !important;
  backdrop-filter: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 4px 0 !important;
}
.toc .toc-heading {
  font-family: var(--kf-font-body);
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: .02em;
  color: var(--kf-ink-5);
  padding-left: 14px !important;
  margin-left: 0 !important;
}
.toc .toc-list,
.toc .toc-list-item { margin-top: 0 !important; margin-bottom: 0 !important; }
.toc .toc-link {
  display: block;
  font-size: 13px;
  font-weight: 420;
  letter-spacing: .02em;
  line-height: 1.5;
  margin-left: 0 !important;
  padding: 3px 0 3px 12px !important;
  color: var(--kf-ink-5) !important;
  background: transparent !important;
  border-left: 2px solid var(--kf-outline-1) !important;
  border-radius: 0 !important;
  transition: color var(--kf-ease), border-color 300ms ease-in-out;
}
.toc .toc-link:hover { color: var(--kf-ink-9) !important; }
.toc .toc-link[aria-current="true"] {
  color: var(--kf-ink-9) !important;
  font-weight: 500;
  background: transparent !important;
  border-left-color: var(--kf-primary) !important;
}
.toc .toc-link::before { display: none !important; }

/* -------------------------------------------------------------------------
   8. Article typography
   ------------------------------------------------------------------------- */
.article-page h1,
.article-body :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--kf-font-head);
  font-weight: 600;
  color: var(--kf-heading) !important;
  line-height: 1.2;
  letter-spacing: -.005em;
  background: none !important;
  -webkit-text-fill-color: currentColor;
}
.article-page h1 { font-size: 32px; margin-bottom: 12px; }
.article-body h2 {
  font-size: 24px;
  margin-top: 40px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--kf-primary);
}
.article-body h3 { font-size: 18px; margin-top: 28px; }
.article-body h4 { font-size: 16px; margin-top: 24px; }
.article-body h5,
.article-body h6 { font-size: 14px; margin-top: 20px; }

/* Confluence inline heading colours fight the system; neutralise them */
.article-body :is(h1, h2, h3, h4, h5, h6) :is(strong, b, span, em) { color: inherit !important; font-weight: inherit; }
/* Centered headings (homepage): short centered pink underline instead of a full-width rule */
.article-body h2[style*="text-align: center"] {
  border-bottom: 0;
  background-image: linear-gradient(var(--kf-primary), var(--kf-primary)) !important;
  background-size: 48px 2px !important;
  background-position: center bottom !important;
  background-repeat: no-repeat !important;
  padding-bottom: 14px;
}
.article-body h3[style*="text-align: center"] { border-bottom: 0; }

.article-body,
.article-body p,
.article-body li {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--kf-ink-8);
}
.article-body p { margin: 12px 0; }
.article-body :is(strong, b) { font-weight: 600; color: var(--kf-ink-9); }
.article-body :is(ul, ol) { padding-left: 24px; }
.article-body li { margin: 6px 0; }

/* Numbered steps: top-level ordered lists get purple number badges.
   counter(list-item) is the browser's own list counter, so <ol start="4"> still works. */
.article-body ol:not(li ol) { list-style: none; padding-left: 0 !important; }
.article-body ol:not(li ol) > li { position: relative; padding-left: 38px; }
.article-body ol:not(li ol) > li::before {
  content: counter(list-item);
  position: absolute;
  left: 0; top: 0;
  width: 24px; height: 24px;
  border-radius: 999px;
  background: var(--kf-nav-active);
  color: var(--kf-heading);
  font: 600 13px/24px var(--kf-font-body);
  letter-spacing: 0;
  text-align: center;
}
.article-body li::marker { color: var(--kf-ink-5); }

/* Child-pages list: undo the article list indent/spacing above so the
   hover fill and row dividers run edge to edge of the box */
.article-body [data-component="child-pages"] ul { padding: 0 !important; overflow: hidden; }
.article-body [data-component="child-pages"] li { margin: 0 !important; }
.article-body ol > li::marker { font-weight: 500; }

.article-body a {
  color: var(--kf-secondary) !important;
  text-decoration: underline;
  text-decoration-color: var(--kf-purple-7);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--kf-ease), color var(--kf-ease);
}
.article-body a:hover { text-decoration-color: var(--kf-primary); }

.article-body hr,
.article-body img[alt*="Divider"] {
  border: 0;
  height: 1px;
  background: var(--kf-outline-1);
  opacity: 1;
}
.article-body img[alt*="Divider"] { display: none; }

.article-body img:not([alt*="Divider"]) {
  border-radius: var(--kf-r);
  border: 1px solid var(--kf-outline-1);
}

.article-body blockquote {
  margin-block: 16px;
  padding: 2px 0 2px 16px;
  border-left: 2px solid var(--kf-outline-2);
  color: var(--kf-ink-6);
}

/* Code */
.article-body :not(pre) > code {
  font-family: var(--kf-font-mono);
  font-size: .8125em;
  padding: 2px 5px;
  border-radius: var(--kf-r-sm);
  background: var(--kf-gray-2);
  color: var(--kf-ink-9);
}
.article-body pre,
[class*="theme-code"] {
  font-family: var(--kf-font-mono);
  font-size: 13px;
  line-height: 1.6;
  background: var(--kf-gray-1) !important;
  border: 1px solid var(--kf-outline-1) !important;
  border-radius: var(--kf-r-md) !important;
  box-shadow: none !important;
}

/* Tables (Frappe ListView) */
.article-body table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  border: 1px solid var(--kf-outline-1);
  border-radius: var(--kf-r-lg);
  overflow: hidden;
}
.article-body :is(th, td) {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  border: 0 !important;
  border-bottom: 1px solid var(--kf-outline-1) !important;
  background: transparent !important;
}
.article-body th {
  font-size: 13px;
  font-weight: 600;
  color: var(--kf-heading) !important;
  background: var(--kf-tint) !important;
}
.article-body tr:last-child > td { border-bottom: 0 !important; }
.article-body tbody tr:hover > td { background: var(--kf-gray-1) !important; }
.article-body :is(th, td) p { margin: 0; font-size: 14px; }

/* -------------------------------------------------------------------------
   9. Panels → Frappe Alert (no border, no side bar)
   ------------------------------------------------------------------------- */
div[data-component="panel"] {
  --kf-alert-bg: var(--kf-gray-2);
  --kf-alert-fg: var(--kf-ink-6);
  display: flex;
  gap: 10px;
  margin-block: 20px; /* block only: the theme centres wide blocks with margin-left:50% + translate */
  padding: 14px 16px !important;
  background: var(--kf-alert-bg) !important;
  backdrop-filter: none !important;
  border: 0 !important;
  border-radius: var(--kf-r-md) !important;
  box-shadow: none !important;
}
div[data-component="panel"]::after { display: none !important; }
/* The theme draws the icon as a masked ::before; recolour and resize it */
div[data-component="panel"]::before {
  flex: 0 0 16px;
  width: 16px !important;
  height: 16px !important;
  margin-top: 2px;
  background-color: var(--kf-alert-fg) !important;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
div[data-component="panel"] .panel-content {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 !important;
  margin: 0 !important;
}
div[data-component="panel"] :is(p, li) {
  font-size: 14px;
  line-height: 1.5;
  color: var(--kf-ink-8) !important;
  margin: 4px 0;
}
div[data-component="panel"] :is(p, li) em { font-style: normal; }
div[data-component="panel"] :is(h1, h2, h3, h4, strong) { color: var(--kf-ink-9) !important; font-size: 14px; font-family: var(--kf-font-body); border: 0; margin: 0 0 2px; padding: 0; }

div[data-component="panel"][data-appearance="info"]    { --kf-alert-bg: var(--kf-blue-3);   --kf-alert-fg: var(--kf-blue-11); }
div[data-component="panel"][data-appearance="note"]    { --kf-alert-bg: var(--kf-purple-3); --kf-alert-fg: var(--kf-secondary); }
div[data-component="panel"][data-appearance="tip"],
div[data-component="panel"][data-appearance="success"] { --kf-alert-bg: var(--kf-green-3);  --kf-alert-fg: var(--kf-green-11); }
div[data-component="panel"][data-appearance="warning"] { --kf-alert-bg: var(--kf-amber-3);  --kf-alert-fg: var(--kf-amber-11); }
div[data-component="panel"]:is([data-appearance="error"], [data-appearance="danger"]) { --kf-alert-bg: var(--kf-red-3); --kf-alert-fg: var(--kf-red-11); }

/* -------------------------------------------------------------------------
   10. Cards: home tiles, label filter list, pagination, expand
   ------------------------------------------------------------------------- */
.tile,
div[data-component="filter-by-label"] li {
  background: var(--kf-surface-card) !important;
  backdrop-filter: none !important;
  border: 1px solid var(--kf-card-border) !important;
  border-radius: var(--kf-r-lg) !important;
  box-shadow: 0 1px 2px rgba(58,37,104,.06) !important; /* no grey hairline, so the purple edge reads clean */
  padding: 20px 24px !important;
  transform: none !important;
  transition: border-color var(--kf-ease), box-shadow var(--kf-ease);
}
.tile:hover,
div[data-component="filter-by-label"] li:hover {
  border-color: var(--kf-card-border-hover) !important;
  box-shadow: 0 1px 2px rgba(58,37,104,.07), 0 6px 15px -5px rgba(58,37,104,.14) !important;
  transform: none !important;
}

div[data-component="filter-by-label"] ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  padding: 0;
  list-style: none;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
div[data-component="filter-by-label"] li a {
  font-family: var(--kf-font-body);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--kf-heading) !important;
  text-decoration: none !important;
}
div[data-component="filter-by-label"] li a::after { content: ""; position: absolute; inset: 0; } /* whole card clickable */
div[data-component="filter-by-label"] li { position: relative; }
div[data-component="filter-by-label"] li p {
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 420;
  letter-spacing: .02em;
  line-height: 1.5;
  color: var(--kf-ink-6) !important;
}

div[data-component="layout-section"] { gap: 16px; }
.layout-cell { background: transparent !important; box-shadow: none !important; border: 0 !important; }

div[data-service="external_content"],
div[data-service="external_content"] iframe {
  border-radius: var(--kf-r-lg) !important;
  border: 1px solid var(--kf-outline-1);
  box-shadow: none !important;
  overflow: hidden;
}

/* Expand / collapse */
.expand,
[data-component="expand"] {
  background: var(--kf-surface-card) !important;
  backdrop-filter: none !important;
  border: 1px solid var(--kf-outline-1) !important;
  border-radius: var(--kf-r-lg) !important;
  box-shadow: var(--kf-shadow) !important;
  overflow: hidden;
  margin-block: 12px; /* never touch inline margins: see panel note */
}
.expand .expand-control {
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--kf-ink-9);
  background: transparent !important;
  border-radius: 0 !important;
  transition: background-color var(--kf-ease);
}
.expand .expand-control:is(:hover, :focus-visible) { background: var(--kf-gray-1) !important; }
.expand .expand-control::after { color: var(--kf-ink-5); }
.expand[open] .expand-control { border-bottom: 1px solid var(--kf-outline-1); }
.expand .expand-body { padding: 12px 16px 16px; }
.expand .expand-body p { font-size: 14px; color: var(--kf-ink-8); margin: 6px 0; }
.expand .expand-body em { font-style: normal; color: var(--kf-ink-6); }

/* Previous / next */
.page-pagination-items a {
  background: var(--kf-surface-card) !important;
  backdrop-filter: none !important;
  border: 1px solid var(--kf-outline-2) !important;
  border-radius: var(--kf-r-lg) !important;
  box-shadow: none !important;
  padding: 14px 16px !important;
  text-decoration: none !important;
  transform: none !important;
  transition: border-color var(--kf-ease), background-color var(--kf-ease);
}
.page-pagination-items a:hover { border-color: var(--kf-outline-3) !important; background: var(--kf-gray-1) !important; }
.page-pagination-label { font-size: 12px; font-weight: 420; letter-spacing: .02em; color: var(--kf-ink-5) !important; text-transform: none; }
.page-pagination-title { font-size: 14px; font-weight: 500; color: var(--kf-ink-9) !important; }
.page-pagination-icon { color: var(--kf-ink-5) !important; }

/* -------------------------------------------------------------------------
   10b. Resource Hub banner (home-page hero)
   Replaces the theme-settings background image with a brand gradient:
   heading purple -> supporting purple -> logo-mark purple, with a soft
   pink glow top-right and a periwinkle glow bottom-left.
   ------------------------------------------------------------------------- */
header.banner {
  background:
    radial-gradient(60% 90% at 88% 0%, rgba(224,38,114,.28), transparent 70%),
    radial-gradient(50% 80% at 8% 100%, rgba(103,94,196,.55), transparent 70%),
    linear-gradient(160deg, #3A2568 0%, #4B2F8A 55%, #5A4AB0 100%) !important;
}
:root[data-color-scheme="dark"] header.banner {
  background:
    radial-gradient(60% 90% at 88% 0%, rgba(240,71,140,.18), transparent 70%),
    radial-gradient(50% 80% at 8% 100%, rgba(103,94,196,.30), transparent 70%),
    linear-gradient(160deg, #1A1330 0%, #261A45 55%, #2E2560 100%) !important;
}
header.banner h1 {
  font-family: var(--kf-font-head);
  font-weight: 600;
  letter-spacing: -.01em;
  color: #FFFFFF !important;
}
header.banner .search-bar__input-container {
  background: var(--kf-surface) !important;
  border: 1px solid transparent !important;
  border-radius: var(--kf-r-lg) !important;
  box-shadow: 0 10px 30px -10px rgba(20,10,50,.5) !important;
}
header.banner .search-bar__input-container:focus-within {
  box-shadow: 0 10px 30px -10px rgba(20,10,50,.5), 0 0 0 3px rgba(255,255,255,.35) !important;
}

/* -------------------------------------------------------------------------
   11. Footer
   ------------------------------------------------------------------------- */
/* Solid heading-purple footer anchors the page */
.footer {
  background: var(--kf-footer-bg) !important;
  backdrop-filter: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  color: var(--kf-footer-text);
}
.footer-content,
.footer-content li { font-size: 13px; letter-spacing: .02em; color: var(--kf-footer-text) !important; }
.footer :is(.footer-links, .footer-content) a { font-size: 13px; color: var(--kf-footer-link) !important; text-decoration: none; }
.footer :is(.footer-links, .footer-content) a:hover { text-decoration: underline; text-decoration-color: var(--kf-primary); text-underline-offset: 3px; }

/* -------------------------------------------------------------------------
   12. Cookie consent (the one pink CTA on the site)
   ------------------------------------------------------------------------- */
.cm {
  background: var(--kf-surface-card) !important;
  backdrop-filter: none !important;
  border: 1px solid var(--kf-outline-1) !important;
  border-radius: var(--kf-r-xl) !important;
  box-shadow: var(--kf-shadow-2xl) !important;
  color: var(--kf-ink-8);
  font-family: var(--kf-font-body);
}
.cm__title { font-family: var(--kf-font-head); font-weight: 600; font-size: 18px; color: var(--kf-heading) !important; }
.cm__btn {
  height: 32px;
  padding: 0 10px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border-radius: var(--kf-r) !important;
  box-shadow: none !important;
  transition: background-color var(--kf-ease), transform var(--kf-ease);
}
.cm__btn:active { transform: scale(.98); }
.cm__btn[data-role="all"] {
  background: var(--kf-primary) !important;
  border: 0 !important;
  color: #FFFFFF !important;
}
.cm__btn[data-role="all"]:hover { background: var(--kf-primary-hover) !important; }
.cm__btn--secondary,
.cm__btn:not([data-role="all"]) {
  background: var(--kf-gray-2) !important;
  border: 0 !important;
  color: var(--kf-ink-8) !important;
}
.cm__btn--secondary:hover,
.cm__btn:not([data-role="all"]):hover { background: var(--kf-gray-3) !important; }

/* -------------------------------------------------------------------------
   13. Responsive + motion
   ------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .article-page h1 { font-size: 26px; }
  .article-body h2 { font-size: 20px; margin-top: 32px; }
  .article-body h3 { font-size: 17px; }
  div[data-component="filter-by-label"] ul { grid-template-columns: 1fr; }
  .tile, div[data-component="filter-by-label"] li { padding: 16px 18px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .cm__btn:active { transform: none; }
}