/* input(50,37): run-time error CSS1019: Unexpected token, found ' '
input(50,37): run-time error CSS1019: Unexpected token, found ' '
input(50,37): run-time error CSS1042: Expected function, found ' '
input(50,37): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' '
input(51,37): run-time error CSS1019: Unexpected token, found ' '
input(51,37): run-time error CSS1019: Unexpected token, found ' '
input(51,37): run-time error CSS1042: Expected function, found ' '
input(51,37): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' '
input(824,1): run-time error CSS1019: Unexpected token, found '}' */
/*
 * KCT framework — 00-tokens.css
 * ------------------------------------------------------------------
 * Every value the framework's own styles use. A site theme re-skins the framework
 * by redefining these tokens (themes/<Name>/css/00-variables.css) — it should almost
 * never need to restyle framework rules directly.
 *
 * Layers, in load order:
 *   bootstrap → kendo (until Phase 11) → /css/kct-framework.css (this folder, bundled)
 *   → /css/site.css (the site's page shell) → /themes/<Name>/theme.css (tokens + overrides)
 *
 * Naming: --kct-color-* palette roles, --kct-font-* / --kct-text-* type, --kct-radius-* /
 * --kct-shadow-* shape, --kct-space-* rhythm; component tokens (--kct-window-*, --kct-card-*,
 * --kct-video-*, --kct-cart-* …) default to the roles, so a theme can change a role once or a
 * single component on its own.
 */
:root {
    /* ---- Palette roles ---- */
    --kct-color-primary: #1d4ed8;
    --kct-color-primary-hover: color-mix(in srgb, var(--kct-color-primary) 85%, #000);
    --kct-color-primary-soft: color-mix(in srgb, var(--kct-color-primary) 10%, var(--kct-color-surface));
    --kct-color-on-primary: #ffffff;
    --kct-color-accent: #f97316;
    --kct-color-on-accent: #ffffff;
    --kct-color-bg: #ffffff;                 /* page */
    --kct-color-surface: #ffffff;            /* cards, dialogs */
    --kct-color-surface-alt: #f4f6f9;        /* bands, table heads, wells */
    --kct-color-text: #1f2933;
    --kct-color-text-muted: #5f6b7a;
    --kct-color-heading: var(--kct-color-text);
    --kct-color-link: var(--kct-color-primary);
    --kct-color-border: #e2e6ec;
    --kct-color-success: #15803d;
    --kct-color-warning: #b45309;
    --kct-color-danger: #b91c1c;
    --kct-color-overlay: rgba(10, 15, 25, .6);

    /* ---- Type ---- */
    --kct-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --kct-font-heading: var(--kct-font-body);
    --kct-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --kct-text-base: 1rem;
    --kct-text-sm: .875rem;
    --kct-text-xs: .75rem;
    --kct-text-lg: 1.125rem;
    --kct-line-height: 1.6;
    --kct-heading-weight: 700;
    --kct-heading-transform: none;
    --kct-heading-tracking: -0.01em;
    --kct-h1: clamp(1.9rem, 1.4rem + 2vw, 2.75rem);
    --kct-h2: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
    --kct-h3: 1.25rem;
    --kct-h4: 1.05rem;
    --kct-eyebrow-tracking: .08em;

    /* ---- Shape ---- */
    --kct-radius-sm: 6px;
    --kct-radius: 10px;
    --kct-radius-lg: 16px;
    --kct-radius-pill: 999px;
    --kct-border-width: 1px;
    --kct-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
    --kct-shadow: 0 4px 12px rgba(16, 24, 40, .08), 0 2px 4px rgba(16, 24, 40, .05);
    --kct-shadow-lg: 0 18px 40px rgba(16, 24, 40, .16);
    --kct-focus-ring: 0 0 0 3px color-mix(in srgb, var(--kct-color-primary) 35%, transparent);

    /* ---- Rhythm ---- */
    --kct-space-1: .25rem;
    --kct-space-2: .5rem;
    --kct-space-3: .75rem;
    --kct-space-4: 1rem;
    --kct-space-5: 1.5rem;
    --kct-space-6: 2rem;
    --kct-space-7: 3rem;
    --kct-space-8: 4.5rem;
    --kct-content-width: 1200px;
    --kct-transition: 180ms ease;

    /* ---- Buttons ---- */
    --kct-btn-radius: var(--kct-radius-sm);
    --kct-btn-padding: .55rem 1.1rem;
    --kct-btn-font-weight: 600;
    --kct-btn-transform: none;
    --kct-btn-tracking: normal;

    /* ---- Cards (products, videos, series, sections) ---- */
    --kct-card-bg: var(--kct-color-surface);
    --kct-card-border: var(--kct-color-border);
    --kct-card-radius: var(--kct-radius);
    --kct-card-shadow: var(--kct-shadow-sm);
    --kct-card-shadow-hover: var(--kct-shadow);
    --kct-card-padding: var(--kct-space-5);
    --kct-card-lift: -3px;

    /* ---- Modules on a page ---- */
    --kct-module-gap: var(--kct-space-7);
    --kct-page-hero-padding: var(--kct-space-6) 0;
    --kct-page-section-padding: var(--kct-space-6) 0;

    /* ---- Form windows (FormService reads the --kct-window-* sizes at open time) ---- */
    --kct-window-width: 760px;
    --kct-window-width-sm: 480px;
    --kct-window-width-lg: 1000px;
    --kct-window-max-width: 95vw;
    --kct-window-max-height: 70vh;
    --kct-window-padding: 1.25rem;
    --kct-window-bg: var(--kct-color-surface);
    --kct-list-max-height: 55vh;

    /* ---- Forms ---- */
    --kct-form-gap: 1rem;
    --kct-form-min-width: 0;
    --kct-label-color: var(--kct-color-text);
    --kct-label-weight: 600;
    --kct-field-border-color: color-mix(in srgb, var(--kct-color-border) 70%, var(--kct-color-text-muted));
    --kct-field-radius: var(--kct-radius-sm);
    --kct-actions-gap: .5rem;

    /* How wide a module that is only a form gets before it stops being comfortable to read. */
    --kct-form-module-width: 44rem;

    /* ---- Edit chrome (page designers) — deliberately NOT themed to the brand ---- */
    --kct-edit-outline-width: 3px;
    --kct-edit-outline-offset: 3px;
    --kct-edit-outline-color: #0d6efd;
    --kct-edit-outline-style: solid;
    --kct-edit-chrome-gap: .25rem;
    --kct-edit-chrome-inset: .35rem;
    --kct-edit-action-size: 1.75rem;
    --kct-edit-action-bg: rgba(255, 255, 255, .95);
    --kct-edit-action-color: #0d6efd;
    --kct-edit-action-hover-bg: #0d6efd;
    --kct-edit-action-hover-color: #fff;
    --kct-edit-action-danger: #dc3545;
    --kct-edit-action-radius: .25rem;
    --kct-edit-tip-bg: #212529;
    --kct-edit-tip-color: #fff;
    --kct-edit-tip-width: 15rem;

    /* ---- Media ---- */
    --kct-slideshow-height: 400px;
    --kct-slideshow-overlay: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 60%);
    --kct-slideshow-text: #fff;
    --kct-slideshow-dot: color-mix(in srgb, var(--kct-color-text) 25%, transparent);
    --kct-slideshow-dot-active: var(--kct-color-primary);
    --kct-video-card-width: clamp(220px, 26vw, 300px);
    --kct-video-poster-bg: linear-gradient(135deg, var(--kct-color-primary), color-mix(in srgb, var(--kct-color-primary) 55%, #000));
    --kct-video-play-size: 2.6rem;
    --kct-video-play-bg: rgba(255, 255, 255, .92);
    --kct-video-play-color: var(--kct-color-primary);
    --kct-series-card-width: 240px;

    /* ---- Commerce ---- */
    --kct-price-color: var(--kct-color-heading);
    --kct-price-weight: 700;
    --kct-summary-bg: var(--kct-color-surface-alt);
    --kct-summary-sticky-top: var(--kct-space-5);
}

/* Reduced motion: every framework transition reads --kct-transition. */
@media (prefers-reduced-motion: reduce) {
    :root { --kct-transition: 0ms linear; --kct-card-lift: 0px; }
}

/*
 * KCT framework — 10-base.css
 * Typography, Bootstrap bridged to the tokens, and the building blocks every module shares:
 * module header, card, grid, meta line, badge, empty state, data table.
 */

/* ---- Page defaults ---- */
body {
    background: var(--kct-color-bg);
    color: var(--kct-color-text);
    font-family: var(--kct-font-body);
    font-size: var(--kct-text-base);
    line-height: var(--kct-line-height);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--kct-font-heading);
    font-weight: var(--kct-heading-weight);
    text-transform: var(--kct-heading-transform);
    letter-spacing: var(--kct-heading-tracking);
    color: var(--kct-color-heading);
    line-height: 1.2;
}

h1 { font-size: var(--kct-h1); }
h2 { font-size: var(--kct-h2); }
h3 { font-size: var(--kct-h3); }
h4 { font-size: var(--kct-h4); }

a { color: var(--kct-color-link); }
a:hover { color: var(--kct-color-primary-hover); }

:focus-visible { outline: none; box-shadow: var(--kct-focus-ring); }

/* ---- Bootstrap bridge: its components read our tokens ---- */
:root {
    --bs-body-font-family: var(--kct-font-body);
    --bs-body-color: var(--kct-color-text);
    --bs-body-bg: var(--kct-color-bg);
    --bs-border-color: var(--kct-color-border);
    --bs-border-radius: var(--kct-radius-sm);
    --bs-secondary-color: var(--kct-color-text-muted);
}

.btn {
    --bs-btn-padding-x: 1.1rem;
    --bs-btn-padding-y: .55rem;
    --bs-btn-font-weight: var(--kct-btn-font-weight);
    --bs-btn-border-radius: var(--kct-btn-radius);
    text-transform: var(--kct-btn-transform);
    letter-spacing: var(--kct-btn-tracking);
    transition: background-color var(--kct-transition), border-color var(--kct-transition),
                color var(--kct-transition), box-shadow var(--kct-transition);
}

.btn-sm { --bs-btn-padding-x: .75rem; --bs-btn-padding-y: .3rem; --bs-btn-font-size: var(--kct-text-sm); }

.btn-primary {
    --bs-btn-bg: var(--kct-color-primary);
    --bs-btn-border-color: var(--kct-color-primary);
    --bs-btn-color: var(--kct-color-on-primary);
    --bs-btn-hover-bg: var(--kct-color-primary-hover);
    --bs-btn-hover-border-color: var(--kct-color-primary-hover);
    --bs-btn-hover-color: var(--kct-color-on-primary);
    --bs-btn-active-bg: var(--kct-color-primary-hover);
    --bs-btn-active-border-color: var(--kct-color-primary-hover);
    --bs-btn-disabled-bg: var(--kct-color-primary);
    --bs-btn-disabled-border-color: var(--kct-color-primary);
}

/* A bare .btn (legacy content, older views) reads as the primary button rather than as plain text. */
.btn:not(:is([class*="btn-outline"], .btn-primary, .btn-secondary, .btn-accent, .btn-link, .btn-danger,
             .btn-success, .btn-warning, .btn-info, .btn-light, .btn-dark, .btn-close)) {
    --bs-btn-bg: var(--kct-color-primary);
    --bs-btn-border-color: var(--kct-color-primary);
    --bs-btn-color: var(--kct-color-on-primary);
    --bs-btn-hover-bg: var(--kct-color-primary-hover);
    --bs-btn-hover-border-color: var(--kct-color-primary-hover);
    --bs-btn-hover-color: var(--kct-color-on-primary);
}

.btn-secondary {
    --bs-btn-bg: var(--kct-color-surface);
    --bs-btn-border-color: var(--kct-field-border-color);
    --bs-btn-color: var(--kct-color-text);
    --bs-btn-hover-bg: var(--kct-color-surface-alt);
    --bs-btn-hover-border-color: var(--kct-field-border-color);
    --bs-btn-hover-color: var(--kct-color-text);
    --bs-btn-active-bg: var(--kct-color-surface-alt);
    --bs-btn-active-color: var(--kct-color-text);
}

.btn-accent {
    --bs-btn-bg: var(--kct-color-accent);
    --bs-btn-border-color: var(--kct-color-accent);
    --bs-btn-color: var(--kct-color-on-accent);
    --bs-btn-hover-bg: color-mix(in srgb, var(--kct-color-accent) 85%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--kct-color-accent) 85%, #000);
    --bs-btn-hover-color: var(--kct-color-on-accent);
}

.btn-outline-primary {
    --bs-btn-color: var(--kct-color-primary);
    --bs-btn-border-color: var(--kct-color-primary);
    --bs-btn-hover-bg: var(--kct-color-primary);
    --bs-btn-hover-border-color: var(--kct-color-primary);
    --bs-btn-hover-color: var(--kct-color-on-primary);
    --bs-btn-active-bg: var(--kct-color-primary-hover);
}

.btn-outline-secondary {
    --bs-btn-color: var(--kct-color-text);
    --bs-btn-border-color: var(--kct-color-border);
    --bs-btn-hover-bg: var(--kct-color-surface-alt);
    --bs-btn-hover-border-color: var(--kct-field-border-color);
    --bs-btn-hover-color: var(--kct-color-text);
}

.btn-link { --bs-btn-color: var(--kct-color-link); --bs-btn-hover-color: var(--kct-color-primary-hover); }

.form-control,
.form-select {
    border-color: var(--kct-field-border-color);
    border-radius: var(--kct-field-radius);
    background-color: var(--kct-color-surface);
    color: var(--kct-color-text);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--kct-color-primary);
    box-shadow: var(--kct-focus-ring);
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--kct-color-text);
    --bs-table-border-color: var(--kct-color-border);
    --bs-table-striped-bg: var(--kct-color-surface-alt);
    --bs-table-hover-bg: var(--kct-color-primary-soft);
}

.table > thead th {
    color: var(--kct-color-text-muted);
    font-size: var(--kct-text-xs);
    font-weight: 700;
    letter-spacing: var(--kct-eyebrow-tracking);
    text-transform: uppercase;
    border-bottom-width: 2px;
}

.alert { border-radius: var(--kct-radius); }

.alert-secondary {
    --bs-alert-bg: var(--kct-color-surface-alt);
    --bs-alert-border-color: var(--kct-color-border);
    --bs-alert-color: var(--kct-color-text);
}

.alert-info {
    --bs-alert-bg: var(--kct-color-primary-soft);
    --bs-alert-border-color: color-mix(in srgb, var(--kct-color-primary) 25%, transparent);
    --bs-alert-color: var(--kct-color-text);
}

.card {
    --bs-card-bg: var(--kct-card-bg);
    --bs-card-border-color: var(--kct-card-border);
    --bs-card-border-radius: var(--kct-card-radius);
    --bs-card-color: var(--kct-color-text);
}

.badge.text-bg-primary { background-color: var(--kct-color-primary) !important; color: var(--kct-color-on-primary) !important; }

/* ------------------------------------------------------------------
   Shared module building blocks
   ------------------------------------------------------------------ */

/* Every module: consistent spacing between neighbours on a page. */
.kct-module + .kct-module { margin-top: var(--kct-module-gap); }

/* Module header: optional eyebrow, title, lead, and actions on the right. */
.kct-module-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--kct-space-3) var(--kct-space-5);
    margin-bottom: var(--kct-space-5);
}

.kct-module-header > :first-child { flex: 1 1 22rem; min-width: 0; }
.kct-module-header h2,
.kct-module-header h3 { margin: 0; }

.kct-eyebrow {
    display: block;
    margin-bottom: var(--kct-space-1);
    color: var(--kct-color-primary);
    font-size: var(--kct-text-xs);
    font-weight: 700;
    letter-spacing: var(--kct-eyebrow-tracking);
    text-transform: uppercase;
}

.kct-lead {
    margin: var(--kct-space-2) 0 0;
    color: var(--kct-color-text-muted);
    font-size: var(--kct-text-lg);
}

/* Meta line: "date · author · tags" */
.kct-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kct-space-1) var(--kct-space-2);
    color: var(--kct-color-text-muted);
    font-size: var(--kct-text-sm);
}

.kct-meta > * + *::before {
    content: "·";
    margin-right: var(--kct-space-2);
    opacity: .6;
}

.kct-badge {
    display: inline-flex;
    align-items: center;
    gap: .3em;
    padding: .2em .65em;
    border-radius: var(--kct-radius-pill);
    background: var(--kct-color-primary-soft);
    color: var(--kct-color-primary);
    font-size: var(--kct-text-xs);
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}

.kct-badge-accent { background: color-mix(in srgb, var(--kct-color-accent) 14%, var(--kct-color-surface)); color: color-mix(in srgb, var(--kct-color-accent) 80%, #000); }
.kct-badge-success { background: color-mix(in srgb, var(--kct-color-success) 12%, var(--kct-color-surface)); color: var(--kct-color-success); }

/* Card: surface with border, radius and a lift on hover when it is a link or button. */
.kct-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--kct-card-bg);
    border: var(--kct-border-width) solid var(--kct-card-border);
    border-radius: var(--kct-card-radius);
    box-shadow: var(--kct-card-shadow);
    overflow: hidden;
    transition: transform var(--kct-transition), box-shadow var(--kct-transition), border-color var(--kct-transition);
}

.kct-card-body { padding: var(--kct-card-padding); display: flex; flex-direction: column; gap: var(--kct-space-2); flex: 1 1 auto; }
.kct-card-title { margin: 0; font-size: var(--kct-h4); line-height: 1.3; }
.kct-card-text { margin: 0; color: var(--kct-color-text-muted); font-size: var(--kct-text-sm); }
.kct-card-footer { padding: var(--kct-space-4) var(--kct-card-padding); border-top: var(--kct-border-width) solid var(--kct-card-border); display: flex; align-items: center; justify-content: space-between; gap: var(--kct-space-3); }

.kct-card.is-interactive { cursor: pointer; }
.kct-card.is-interactive:hover,
.kct-card.is-interactive:focus-within {
    transform: translateY(var(--kct-card-lift));
    box-shadow: var(--kct-card-shadow-hover);
    border-color: color-mix(in srgb, var(--kct-color-primary) 30%, var(--kct-card-border));
}

/* Media at the top of a card keeps a fixed shape. */
.kct-card-media {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--kct-video-poster-bg);
    overflow: hidden;
}

.kct-card-media > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 400ms ease;
}

.kct-card.is-interactive:hover .kct-card-media > img { transform: scale(1.04); }

/* Auto-fitting grid of cards. */
.kct-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--kct-grid-min, 16rem), 1fr));
    gap: var(--kct-space-5);
}

/* Empty state: what is missing and what to do about it. */
.kct-empty {
    padding: var(--kct-space-6) var(--kct-space-5);
    border: 2px dashed var(--kct-color-border);
    border-radius: var(--kct-radius);
    color: var(--kct-color-text-muted);
    text-align: center;
}

.kct-empty strong { display: block; color: var(--kct-color-text); margin-bottom: var(--kct-space-1); }

/* Panel: a quiet framed area (summaries, sidebars). */
.kct-panel {
    padding: var(--kct-space-5);
    background: var(--kct-summary-bg);
    border: var(--kct-border-width) solid var(--kct-color-border);
    border-radius: var(--kct-radius);
}

/* Visually hidden but readable by screen readers. */
.kct-sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* Legacy fields shown as text. */
*[data-kct-type="displayonly"] { display: inline-block; }

/* ---- Toasts (framework toast.js) ---- */
.kct-toasts {
    position: fixed;
    right: var(--kct-space-5);
    bottom: var(--kct-space-5);
    z-index: 11000;
    display: grid;
    gap: var(--kct-space-2);
    width: min(24rem, calc(100vw - 2 * var(--kct-space-5)));
    pointer-events: none;
}

.kct-toast {
    display: flex;
    align-items: flex-start;
    gap: var(--kct-space-3);
    padding: var(--kct-space-3) var(--kct-space-4);
    border-left: 4px solid var(--kct-color-success);
    border-radius: var(--kct-radius);
    background: var(--kct-color-surface);
    color: var(--kct-color-text);
    box-shadow: var(--kct-shadow-lg);
    font-size: var(--kct-text-sm);
    opacity: 0;
    transform: translateY(.5rem);
    transition: opacity var(--kct-transition), transform var(--kct-transition);
    pointer-events: auto;
}

.kct-toast.is-shown { opacity: 1; transform: none; }
.kct-toast.is-error { border-left-color: var(--kct-color-danger); }
.kct-toast.is-info { border-left-color: var(--kct-color-primary); }
.kct-toast-body { flex: 1 1 auto; }
.kct-toast-close { border: 0; background: none; color: var(--kct-color-text-muted); font-size: 1.1rem; line-height: 1; cursor: pointer; }

/* ---- Framework surfaces (.kct-ui) ----
   Windows, the site-admin console, the editing dock, toasts and pop-ups carry .kct-ui on their root. A site's theme
   bundle is wrapped in @scope (:root) to (.kct-ui) by the host (ThemeScopeProcessor), so its element rules
   (h2 { font-size: 50px !important }, input { padding: 10px !important }, img { width: 100% }) never reach them.
   What a surface inherits from <body> is still the theme's font and colour, so the framework's own type is stated here. */
.kct-ui {
    font-family: var(--kct-font-body);
    font-size: var(--kct-text-base);
    line-height: var(--kct-line-height);
    color: var(--kct-color-text);
    text-align: left;
    letter-spacing: normal;
}

/*
 * KCT framework — 11-page-access.css
 * The block a page shows in place of its modules when the caller may not see it (PageAccessViewComponent):
 * "Sign in to see this page" for a visitor, "You don't have access" for a member without rights.
 * Tokens only; a theme restyles .kct-page-access.
 */
.kct-page-access {
    max-width: 36rem;
    margin: 3rem auto;
    padding: 2rem 1.5rem;
    text-align: center;
    border: 1px solid var(--kct-border, #dee2e6);
    border-radius: var(--kct-radius, .5rem);
    background: var(--kct-surface, #fff);
    color: var(--kct-text, #212529);
}
.kct-page-access-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 .75rem;
}
.kct-page-access-text {
    margin: 0 0 1.25rem;
    color: var(--kct-text-muted, #6c757d);
}
.kct-page-access-actions {
    margin: 0;
    display: flex;
    gap: .75rem;
    justify-content: center;
    flex-wrap: wrap;
}

/*
 * KCT framework — 15-dialog.css
 * The framework window: a native <dialog> opened by framework/dialog.js.
 *
 * Every modal the framework opens wears .kct-window — alerts, confirmations, forms shown with
 * FormService.ShowInWindow and WebParts shown with ModuleLoader.loadWebPartInWindow. Sizes come
 * from the --kct-window-* tokens in 00-tokens.css, so a theme resizes windows without touching JS.
 */

dialog.kct-window {
    width: min(var(--kct-window-width), var(--kct-window-max-width));
    max-width: var(--kct-window-max-width);
    max-height: 92vh;
    padding: 0;
    border: 0;
    border-radius: var(--kct-radius-lg);
    background: var(--kct-window-bg);
    color: var(--kct-color-text);
    font-family: var(--kct-font-body);
    box-shadow: var(--kct-shadow-lg);
    overflow: hidden;
}

dialog.kct-window[open] {
    display: flex;
    flex-direction: column;
    /* Centred by the browser through margin:auto on the fixed-position dialog. Said explicitly, because many client
       themes start with "* { margin: 0 }" and that reset would pin the window to the top-left corner (kct.dev did). */
    margin: auto;
    inset: 0;
}

dialog.kct-window::backdrop {
    background: var(--kct-color-overlay);
}

/* Per-window sizes, the same names a <kct-form> uses for its own width. */
dialog.kct-window.kct-window-sm { --kct-window-width: var(--kct-window-width-sm); }
dialog.kct-window.kct-window-lg {
    --kct-window-width: var(--kct-window-width-lg);
    --kct-window-max-height: 88vh;
}

/* ---- Header (the drag handle) ---- */
.kct-window-head {
    display: flex;
    align-items: center;
    gap: var(--kct-space-3);
    flex: 0 0 auto;
    padding: var(--kct-space-4) var(--kct-window-padding);
    border-bottom: var(--kct-border-width) solid var(--kct-color-border);
    background: var(--kct-color-surface);
    cursor: move;
    touch-action: none;                  /* the pointer drag owns the gesture */
    user-select: none;
}

.kct-window-head.is-dragging { cursor: grabbing; }

.kct-window-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-family: var(--kct-font-heading);
    font-weight: var(--kct-heading-weight);
    text-transform: var(--kct-heading-transform);
    letter-spacing: var(--kct-heading-tracking);
    font-size: var(--kct-text-lg);
    color: var(--kct-color-heading);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kct-window-close {
    flex: 0 0 auto;
    border: 0;
    background: none;
    padding: 0 .25rem;
    font-size: 26px;
    line-height: 1;
    color: var(--kct-color-muted, #6b7280);
    cursor: pointer;
}

.kct-window-close:hover { color: var(--kct-color-text); }
.kct-window-close:focus-visible { outline: 2px solid var(--kct-color-primary); outline-offset: 2px; }

/* ---- Body ---- */
.kct-window-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: var(--kct-window-max-height);
    overflow-y: auto;
    padding: var(--kct-window-padding);
    box-sizing: border-box;
}

.kct-window-message {
    margin: 0;
    white-space: pre-line;               /* legacy messages arrive with their own line breaks */
}

/* ---- Footer ---- */
.kct-window-foot {
    display: flex;
    justify-content: flex-end;
    gap: var(--kct-space-3);
    flex: 0 0 auto;
    padding: var(--kct-space-4) var(--kct-window-padding);
    border-top: var(--kct-border-width) solid var(--kct-color-border);
    background: var(--kct-color-surface);
}

/* ---- Forms shown in a window ---- */
/* The form supplies its own action bar, so the window footer stays out of the way and the bar
   sticks to the bottom of the scrolling area — the behaviour the Kendo windows had. */
dialog.kct-window.kct-form-window .kct-window-body { padding-bottom: 0; }

dialog.kct-window.kct-form-window .kct-form .button-tab {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: var(--kct-form-gap) 0 0;
    padding: var(--kct-form-gap) 0;
    background: var(--kct-window-bg);
    border-top: 1px solid var(--kct-field-border-color);
}

/* A message window has no form inside it, so it reads better a little narrower and calmer. */
dialog.kct-window.kct-window-alert .kct-window-body,
dialog.kct-window.kct-window-confirm .kct-window-body {
    padding-bottom: var(--kct-space-3);
}

/* ---- Small screens ---- */
@media (max-width: 576px) {
    dialog.kct-window {
        width: 100vw;
        max-width: 100vw;
        max-height: 100dvh;
        height: 100dvh;
        border-radius: 0;
    }
    /* A window dragged on a phone would only get in the way. */
    .kct-window-head { cursor: default; }
}

/*
 * KCT framework — 16-icons.css
 * The icon (<kct-icon>, or icon() in script) and the icon-only button.
 *
 * Icons are SVG from one trimmed sprite and inherit colour from their button, so a control's hover and
 * danger states carry the icon with them without a second rule.
 */

.kct-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;       /* sits on the text baseline beside words */
    fill: currentColor;
    flex: none;
}

/* Sizes, for the few places 1em is not what is wanted. */
.kct-icon-sm { width: .875em; height: .875em; }
.kct-icon-lg { width: 1.25em; height: 1.25em; }

/* ---- Icon-only button ----
   Sized for a finger, not just a mouse: 44px is the smallest target that is comfortable on a tablet,
   which is what the row-action columns are full of. */
.kct-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 34px;
    padding: .35rem;
    border: 1px solid transparent;
    border-radius: var(--kct-radius-sm, 5px);
    background: none;
    color: var(--kct-color-muted, #6b7280);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

@media (pointer: coarse) {
    .kct-icon-btn { min-width: 44px; min-height: 44px; }
}

.kct-icon-btn:hover {
    background: rgba(0, 0, 0, .06);
    color: var(--kct-color-text, #1f2430);
}

.kct-icon-btn:focus-visible {
    outline: 2px solid var(--kct-color-primary, #2f6fed);
    outline-offset: 1px;
}

.kct-icon-btn[disabled] { opacity: .45; cursor: default; }
.kct-icon-btn[disabled]:hover { background: none; color: var(--kct-color-muted, #6b7280); }

/* Destructive actions read as destructive only once someone reaches for them — a row of red icons
   is noise, and makes the one that matters harder to find. */
.kct-icon-btn.is-danger:hover {
    background: rgba(var(--kct-color-danger-rgb, 209, 58, 58), .12);
    color: var(--kct-color-danger, #d13a3a);
}

/* A button with an icon *and* words: the icon is decorative, so it only needs spacing. */
.kct-btn-icon {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

/* ---- Busy overlay (context.ShowProgress) ----
   Replaces kendo.ui.progress: a dimmed cover over the module with a spinner, so a slow call reads as
   "working" rather than as nothing happening. */
.kct-busy {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    background: rgba(255, 255, 255, .65);
    backdrop-filter: blur(1px);
}

.kct-busy-spinner {
    width: 1.6rem;
    height: 1.6rem;
    border: 3px solid rgba(0, 0, 0, .15);
    border-top-color: var(--kct-color-primary, #2f6fed);
    border-radius: 50%;
    animation: kct-busy-spin .7s linear infinite;
}

.kct-busy-text { font-size: 14px; color: var(--kct-color-text, #1f2430); }

@keyframes kct-busy-spin { to { transform: rotate(360deg); } }

/* Someone who has asked for less motion gets a pulse instead of a spin. */
@media (prefers-reduced-motion: reduce) {
    .kct-busy-spinner { animation: kct-busy-pulse 1.2s ease-in-out infinite; }
    @keyframes kct-busy-pulse { 50% { opacity: .35; } }
}

/*
 * KCT framework — 17-grid.css
 * The grid's own furniture: the row-actions column, the "more actions" menu, and the bar that appears
 * when rows are selected. Tabulator's own stylesheet is loaded on demand beside it.
 */

/* ---- Row actions ---- */
/* Frozen to the right, so the actions are reachable however far the table scrolls sideways. */
.kct-grid-actions {
    white-space: nowrap;
}

.kct-grid-actions .kct-icon-btn + .kct-icon-btn { margin-left: .1rem; }

/* The buttons sit back until the row is under the pointer — a column of full-strength icons reads as
   clutter on a long table and competes with the data people came to read. Not *too* far back, though:
   an action nobody notices is worse than a slightly busy column, so this is legible at rest. */
.tabulator-row .kct-grid-actions .kct-icon-btn { opacity: .75; }

.tabulator-row:hover .kct-grid-actions .kct-icon-btn,
.tabulator-row.tabulator-selected .kct-grid-actions .kct-icon-btn,
.kct-grid-actions .kct-icon-btn:focus-visible { opacity: 1; }

/* Never hide them on touch: there is no hover to reveal them with. */
@media (pointer: coarse) {
    .tabulator-row .kct-grid-actions .kct-icon-btn { opacity: 1; }
}

/* ---- The menu (framework/menu.js) ---- */
.kct-menu {
    position: fixed;
    z-index: 1100;
    min-width: 11rem;
    padding: .3rem;
    border: 1px solid var(--kct-color-border, #d6dae1);
    border-radius: var(--kct-radius-md, 8px);
    background: var(--kct-color-surface, #fff);
    box-shadow: var(--kct-shadow-lg, 0 12px 32px rgba(0, 0, 0, .18));
}

.kct-menu-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: .4rem .55rem;
    border: 0;
    border-radius: var(--kct-radius-sm, 5px);
    background: none;
    color: var(--kct-color-text, #1f2430);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.kct-menu-item:hover,
.kct-menu-item:focus-visible {
    background: rgba(47, 111, 237, .1);
    outline: none;
}

.kct-menu-item[disabled] { opacity: .45; cursor: default; }
.kct-menu-item[disabled]:hover { background: none; }

.kct-menu-item.is-danger { color: var(--kct-color-danger, #d13a3a); }
.kct-menu-item.is-danger:hover,
.kct-menu-item.is-danger:focus-visible { background: rgba(var(--kct-color-danger-rgb, 209, 58, 58), .12); }

/* Keeps labels lined up when one item has no icon. */
.kct-menu-gap { width: 1em; flex: none; }

.kct-menu-separator {
    height: 1px;
    margin: .3rem .25rem;
    background: var(--kct-color-border, #d6dae1);
}

/* ---- Selection toolbar ---- */
.kct-grid-toolbar {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .75rem;
    margin-bottom: .4rem;
    border: 1px solid var(--kct-color-border, #d6dae1);
    border-radius: var(--kct-radius-md, 8px);
    background: rgba(47, 111, 237, .07);
}

.kct-grid-toolbar-count { font-weight: 600; font-size: 14px; }
.kct-grid-toolbar-spacer { flex: 1 1 auto; }

.kct-grid-toolbar-actions {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}

@media (max-width: 576px) {
    .kct-grid-toolbar { flex-wrap: wrap; }
    .kct-grid-toolbar-spacer { display: none; }
}

/* ---- The buttons above a grid ----
   These used to live inside the Kendo grid's own toolbar. They sit above the table now, which is where
   people look for "add" anyway. */
.kct-grid-tools {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .6rem;
}

/*
 * KCT framework — 18-grid-theme.css
 * Tabulator, dressed in the site's own tokens.
 *
 * Loaded after Tabulator's plain stylesheet (its Bootstrap 5 theme is deliberately not used — it brought
 * Bootstrap's opinions, not ours). Everything here is colour, type and spacing: no layout behaviour, so
 * upgrading Tabulator does not fight this file.
 */

.tabulator {
    border: var(--kct-border-width, 1px) solid var(--kct-color-border, #d6dae1);
    border-radius: var(--kct-radius-md, 8px);
    background: var(--kct-window-bg, #fff);
    font-family: var(--kct-font-body, inherit);
    font-size: var(--kct-text-sm, 14px);
    overflow: hidden;                       /* keeps the rounded corners */
}

/* ---- Header ---- */
.tabulator .tabulator-header {
    border-bottom: var(--kct-border-width, 1px) solid var(--kct-color-border, #d6dae1);
    background: var(--kct-color-surface-alt, #f6f7f9);
    color: var(--kct-color-heading, #1f2430);
    font-weight: 600;
}

.tabulator .tabulator-header .tabulator-col {
    border-right: 1px solid transparent;
    background: transparent;
}

.tabulator .tabulator-header .tabulator-col:hover { background: rgba(0, 0, 0, .03); }

.tabulator .tabulator-header .tabulator-col .tabulator-col-title {
    padding: .55rem .6rem;
    /* A header that cannot fit its own words is worse than a narrow column: let it wrap. */
    white-space: normal;
    text-overflow: clip;
    line-height: 1.25;
}

/* Grouped (banded) headers */
.tabulator .tabulator-col.tabulator-col-group > .tabulator-col-content {
    border-bottom: 1px solid var(--kct-color-border, #d6dae1);
    text-align: center;
}

/* ---- Rows ---- */
.tabulator .tabulator-row {
    border-bottom: 1px solid var(--kct-color-border-subtle, #eceef1);
    background: var(--kct-window-bg, #fff);
    min-height: 2.4rem;
}

.tabulator .tabulator-row.tabulator-row-even { background: var(--kct-color-surface, #fbfcfd); }
.tabulator .tabulator-row:hover { background: rgba(47, 111, 237, .05); }

.tabulator .tabulator-row.tabulator-selected,
.tabulator .tabulator-row.tabulator-selected:hover {
    background: rgba(47, 111, 237, .12);
}

.tabulator .tabulator-row .tabulator-cell {
    padding: .45rem .6rem;
    border-right: 1px solid transparent;
    vertical-align: middle;
}

/* A frozen column needs its own background or the rows scroll through underneath it. */
.tabulator .tabulator-row .tabulator-cell.tabulator-frozen,
.tabulator .tabulator-header .tabulator-col.tabulator-frozen {
    background: inherit;
    box-shadow: none;
}

.tabulator .tabulator-row.tabulator-selected .tabulator-cell.tabulator-frozen { background: inherit; }

/* ---- Footer and pager ---- */
.tabulator .tabulator-footer {
    border-top: var(--kct-border-width, 1px) solid var(--kct-color-border, #d6dae1);
    background: var(--kct-color-surface-alt, #f6f7f9);
    padding: .3rem .5rem;
}

.tabulator .tabulator-footer .tabulator-page {
    border: 1px solid var(--kct-color-border, #d6dae1);
    border-radius: var(--kct-radius-sm, 5px);
    background: var(--kct-window-bg, #fff);
    color: var(--kct-color-text, #1f2430);
    padding: .2rem .55rem;
    margin: 0 .1rem;
}

.tabulator .tabulator-footer .tabulator-page.active {
    background: var(--kct-color-primary, #2f6fed);
    border-color: var(--kct-color-primary, #2f6fed);
    color: #fff;
}

.tabulator .tabulator-footer .tabulator-page[disabled] { opacity: .45; }

/* ---- Empty and loading ---- */
.tabulator .tabulator-placeholder .tabulator-placeholder-contents {
    color: var(--kct-color-muted, #6b7280);
    font-size: var(--kct-text-sm, 14px);
}

/* ---- Narrow screens ----
   Below tablet the table scrolls sideways rather than crushing every column to nothing. */
@media (max-width: 768px) {
    .tabulator .tabulator-row .tabulator-cell { padding: .4rem .45rem; }
}

/* ---- Column filtering (framework/grid-filter.js) ---- */

/* The heading is the label plus a funnel, so the label must not swallow the button. */
.tabulator .tabulator-col-title .kct-col-label {
    display: inline-block;
    vertical-align: middle;
}

.kct-col-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-left: .25rem;
    padding: 0;
    border: 0;
    border-radius: var(--kct-radius-sm, 5px);
    background: none;
    color: var(--kct-color-muted, #6b7280);
    opacity: .45;
    cursor: pointer;
    vertical-align: middle;
}

.tabulator-col:hover .kct-col-filter,
.kct-col-filter:focus-visible { opacity: 1; }

/* A filtered column says so, whether or not the pointer is anywhere near it. */
.kct-col-filter.is-active {
    opacity: 1;
    color: var(--kct-color-primary, #2f6fed);
    background: rgba(47, 111, 237, .12);
}

/* ---- The popup itself ---- */
.kct-filter { display: grid; gap: .35rem; }

.kct-filter-head {
    font-weight: 600;
    font-size: 14px;
    color: var(--kct-color-heading, #1f2430);
    margin-bottom: .15rem;
}

.kct-filter .form-label { margin: .2rem 0 0; font-size: 12.5px; color: var(--kct-color-muted, #6b7280); }
.kct-filter-note { margin: .2rem 0; font-size: 13px; color: var(--kct-color-muted, #6b7280); }

.kct-filter-actions {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: .5rem;
}

/* ---- The optional bar above the table ---- */
.kct-filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    padding: .45rem .6rem;
    margin-bottom: .4rem;
    border: 1px solid var(--kct-color-border, #d6dae1);
    border-radius: var(--kct-radius-md, 8px);
    background: var(--kct-color-surface-alt, #f6f7f9);
}

.kct-filter-bar-lead { font-size: 13px; color: var(--kct-color-muted, #6b7280); }

.kct-filter-chip {
    border: 1px solid var(--kct-color-border, #d6dae1);
    border-radius: 999px;
    background: var(--kct-window-bg, #fff);
    padding: .1rem .55rem;
    font-size: 12.5px;
    color: var(--kct-color-text, #1f2430);
    cursor: pointer;
}

.kct-filter-chip:hover {
    border-color: var(--kct-color-danger, #d13a3a);
    color: var(--kct-color-danger, #d13a3a);
}

/* ---- Filter builder (framework/grid-builder.js) ---- */

.kct-builder { margin-bottom: .5rem; }

.kct-builder-head {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.kct-builder-summary {
    font-size: 13px;
    color: var(--kct-color-muted, #6b7280);
}

.kct-builder-body {
    margin-top: .45rem;
    padding: .65rem;
    border: 1px solid var(--kct-color-border, #d6dae1);
    border-radius: var(--kct-radius-md, 8px);
    background: var(--kct-color-surface-alt, #f6f7f9);
}

.kct-builder-logic {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .5rem;
}

.kct-builder-logic .form-label { margin: 0; font-size: 13px; }
.kct-builder-logic .form-select { width: auto; }

.kct-builder-rows { display: grid; gap: .4rem; }

/* Field, operator, value, remove. The value takes the slack; on a phone each row stacks. */
.kct-builder-row {
    display: grid;
    grid-template-columns: minmax(7rem, 1fr) minmax(8rem, 1.2fr) minmax(7rem, 1.4fr) auto;
    gap: .4rem;
    align-items: center;
}

.kct-builder-value { min-width: 0; }
.kct-builder-value .form-control,
.kct-builder-value .form-select { width: 100%; }

.kct-builder-warning {
    margin: .5rem 0 0;
    font-size: 13px;
    color: var(--kct-color-danger, #d13a3a);
}

.kct-builder-actions {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: .55rem;
}

.kct-builder-spacer { flex: 1; }

@media (max-width: 640px) {
    .kct-builder-row {
        grid-template-columns: 1fr auto;
    }
    .kct-builder-value { grid-column: 1 / -1; }
}

/* ---- Grouping ---- */

.kct-group-control {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .5rem;
}

.kct-group-control .form-label { margin: 0; font-size: 13px; color: var(--kct-color-muted, #6b7280); }
.kct-group-control .form-select { width: auto; min-width: 9rem; }

.tabulator .tabulator-row.tabulator-group {
    background: var(--kct-color-surface-alt, #f6f7f9);
    border-bottom: 1px solid var(--kct-color-border, #d6dae1);
    font-weight: 500;
    color: var(--kct-color-text, #1f2430);
    padding: .4rem .6rem;
}

.tabulator .tabulator-row.tabulator-group:hover { background: var(--kct-color-surface-alt, #f6f7f9); }

/* Tabulator's own sheet paints every span in a group header red (its count style), so these say
   what they want explicitly rather than inheriting it. */
.tabulator .tabulator-row.tabulator-group span.kct-group-field {
    color: var(--kct-color-muted, #6b7280);
    font-weight: 400;
}

.tabulator .tabulator-row.tabulator-group span.kct-group-value {
    color: var(--kct-color-text, #1f2430);
    font-weight: 600;
}

/* The count reads as an aside, not as part of the value. */
.tabulator .tabulator-row.tabulator-group span.kct-group-count {
    margin-left: .4rem;
    padding: .05rem .4rem;
    border-radius: 999px;
    background: var(--kct-window-bg, #fff);
    border: 1px solid var(--kct-color-border, #d6dae1);
    font-size: 12px;
    font-weight: 400;
    color: var(--kct-color-muted, #6b7280);
}

/* ---- The row of controls above a grid ----
   The filter builder's toggle and the grouping control share one line; the builder's panel, when it
   opens, takes a line of its own beneath them. */

.kct-grid-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
}

/* The builder is two pieces that belong at different places in the row, so it stops being a box. */
.kct-grid-bar .kct-builder { display: contents; }
.kct-grid-bar .kct-builder-body { flex-basis: 100%; margin-top: 0; }
.kct-grid-bar .kct-group-control { margin-bottom: 0; }

/* The grouping control drifts to the end of the row, away from the filter controls. */
.kct-grid-bar .kct-group-control { margin-left: auto; }

@media (max-width: 40rem) {
    .kct-grid-bar .kct-group-control { margin-left: 0; }
}

/*
 * KCT framework — 20-forms.css
 * Form windows opened by FormService.ShowInWindow, form rhythm, module-page rhythm, admin lists.
 * Sizes come from --kct-window-* (FormService reads them at open time).
 */
/* ---- Form windows ---- */
/* Per-form size: add css="kct-window-sm" / "kct-window-lg" on <kct-form>.
   FormService reads --kct-window-* from the form element, so a form (or a
   theme rule targeting [data-form-name="X"]) can set its own window size. */
.kct-window-sm { --kct-window-width: var(--kct-window-width-sm); }
.kct-window-lg { --kct-window-width: var(--kct-window-width-lg); --kct-window-max-height: 88vh; }   /* editors need the room */

.kct-form-window {
    max-width: var(--kct-window-max-width);
}

.kct-form-window > .kct-window-body {
    overflow-y: auto;
    padding: var(--kct-window-padding);
    padding-bottom: 0;           /* the sticky action bar supplies the bottom spacing */
    box-sizing: border-box;
}

/* Action bar stays visible while the window content scrolls */
.kct-form-window .kct-form .button-tab {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: var(--kct-form-gap) 0 0;
    padding: var(--kct-form-gap) 0;
    background: var(--kct-window-bg);
    border-top: 1px solid var(--kct-field-border-color);
}

/* ---- Forms ---- */
.kct-form {
    min-width: var(--kct-form-min-width);
}

.kct-form .input-row,
.kct-form .form-check {
    margin-bottom: var(--kct-form-gap);
}

.kct-form label {
    color: var(--kct-label-color);
    font-weight: var(--kct-label-weight);
}

.kct-form .form-control {
    border-color: var(--kct-field-border-color);
}

/* ---- Module pages ---- */
/* Page templates should use container > row > col (Bootstrap 5). These classes
   give module pages consistent vertical rhythm with no theme applied. */
.kct-page-hero {
    padding: var(--kct-page-hero-padding);
}

.kct-page-modules {
    padding: var(--kct-page-section-padding);
}

.kct-page-modules .kct-module + .kct-module {
    margin-top: var(--kct-module-gap);
}

/* ---- Scrollable list region inside a form (e.g. page-module list) ---- */
.kct-list-scroll {
    max-height: var(--kct-list-max-height);
    overflow-y: auto;
}

/* ---- Admin list layouts (PageNavBar: page modules, permissions, group access) ---- */
.page-module-list li {
    min-width: 40px;
    margin-left: 5px;
    list-style-type: none;
    display: inline-block;
    padding: 2px;
}
#permissionsList, #groupAccess {
    margin: 10px;
}
#permissionsList .group-col-header {
    color: #fff;
    width: 200px;
}
#permissionsList .group-col-name {
    width: 200px;
}
#permissionsList .perm-col {
    width: 40px;
    text-align: center;
}
#permissionsList .group-header, #groupAccess .group-header {
    padding: 3px;
    margin-bottom: 3px;
}
#modulesList {
    margin: 10px;
}
#modulesList .group-col-header {
    color: #fff;
    width: 200px;
}
#modulesList .group-col-name {
    width: 200px;
}
#modulesList .group-header {
    padding: 3px;
    margin-bottom: 3px;
}

/* ------------------------------------------------------------------
   Uploads on the page (framework upload.js)
   .kct-dropzone: <label data-kct-dropzone> around an upload input — click or drop files.
   .kct-file-button: a button-styled <label> around a hidden upload input ("Replace PDF").
   ------------------------------------------------------------------ */
.kct-dropzone {
    position: relative;
    display: grid;
    justify-items: center;
    gap: var(--kct-space-2);
    padding: var(--kct-space-7) var(--kct-space-5);
    border: 2px dashed color-mix(in srgb, var(--kct-color-primary) 35%, var(--kct-color-border));
    border-radius: var(--kct-radius-lg);
    background: color-mix(in srgb, var(--kct-color-primary) 4%, var(--kct-color-surface));
    color: var(--kct-color-text);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--kct-transition), background-color var(--kct-transition);
}

.kct-dropzone:hover,
.kct-dropzone:focus-within,
.kct-dropzone.is-dragging {
    border-color: var(--kct-color-primary);
    background: color-mix(in srgb, var(--kct-color-primary) 9%, var(--kct-color-surface));
}

.kct-dropzone:focus-within { box-shadow: var(--kct-focus-ring); }
.kct-dropzone .kct-meta { font-size: var(--kct-text-xs); }

/* The input covers nothing and takes no space; the label opens it. */
.kct-dropzone input[type="file"],
.kct-file-button input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.kct-dropzone-icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3.5rem;
    border-radius: var(--kct-radius-sm);
    background: var(--kct-color-surface);
    border: var(--kct-border-width) solid var(--kct-color-border);
    color: var(--kct-color-primary);
    font-size: var(--kct-text-xs);
    font-weight: 800;
    letter-spacing: .04em;
}

.kct-file-button { position: relative; margin: 0; cursor: pointer; }
.kct-file-button:focus-within { box-shadow: var(--kct-focus-ring); }
.kct-dropzone .kct-upload-status,
.kct-file-button + .kct-upload-status { width: 100%; }

/* ---- Tabs inside a form (FormService, [data-tabstrip]) ----
   Replaces the Kendo TabStrip. Real buttons with tab roles, so the arrow keys work and a screen reader
   announces them as tabs. */
.kct-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem;
    margin: 0 0 var(--kct-form-gap, 1rem);
    padding: 0;
    list-style: none;
    border-bottom: var(--kct-border-width, 1px) solid var(--kct-color-border, #d6dae1);
}

.kct-tab-item { margin-bottom: -1px; }

.kct-tab {
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: var(--kct-radius-md, 8px) var(--kct-radius-md, 8px) 0 0;
    background: none;
    padding: .5rem .9rem;
    color: var(--kct-color-muted, #6b7280);
    font: inherit;
    cursor: pointer;
}

.kct-tab:hover { color: var(--kct-color-text, #1f2430); }

.kct-tab.is-active {
    border-color: var(--kct-color-border, #d6dae1);
    background: var(--kct-window-bg, #fff);
    color: var(--kct-color-text, #1f2430);
    font-weight: 600;
}

.kct-tab:focus-visible {
    outline: 2px solid var(--kct-color-primary, #2f6fed);
    outline-offset: -2px;
}

/* ---- Card select (framework/fields.js → cardselect) ------------------------------------------
   A list you choose from by looking: a picture or icon, a name, and a sentence. The <select> it
   replaces is still there, hidden, holding the value.
   Its own kct-pick-* names: the framework's .kct-card is the content card (products, videos), and
   sharing that name turned every product card into a picker row. */

.kct-pick {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: var(--kct-space-3, .75rem);
    margin-top: .35rem;
}

/* A category heading spans the whole row rather than sitting in a cell of its own. */
.kct-pick-group {
    grid-column: 1 / -1;
    margin: .4rem 0 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--kct-color-muted, #6b7280);
}

.kct-pick-group:first-child { margin-top: 0; }

.kct-pick-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "figure name"
        "figure note";
    align-items: start;
    gap: .1rem .6rem;
    padding: .7rem .75rem;
    border: 1px solid var(--kct-color-border, #d6dae1);
    border-radius: var(--kct-radius, 8px);
    background: var(--kct-window-bg, #fff);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--kct-transition, .15s ease),
                box-shadow var(--kct-transition, .15s ease),
                background-color var(--kct-transition, .15s ease);
}

.kct-pick-card:hover:not(:disabled) {
    border-color: var(--kct-color-primary, #2f6fed);
    box-shadow: var(--kct-shadow-sm, 0 1px 3px rgba(0, 0, 0, .08));
}

.kct-pick-card:focus-visible {
    outline: 2px solid var(--kct-color-primary, #2f6fed);
    outline-offset: 2px;
}

.kct-pick-card.is-selected {
    border-color: var(--kct-color-primary, #2f6fed);
    background: var(--kct-color-primary-soft, rgba(47, 111, 237, .08));
}

.kct-pick-card:disabled { opacity: .55; cursor: default; }

.kct-pick-figure {
    grid-area: figure;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--kct-radius-sm, 5px);
    background: var(--kct-color-surface-alt, #f6f7f9);
    color: var(--kct-color-muted, #6b7280);
    overflow: hidden;
}

.kct-pick-card.is-selected .kct-pick-figure {
    background: var(--kct-window-bg, #fff);
    color: var(--kct-color-primary, #2f6fed);
}

.kct-pick-figure svg { width: 1.25rem; height: 1.25rem; }
.kct-pick-figure img { width: 100%; height: 100%; object-fit: cover; }

.kct-pick-name {
    grid-area: name;
    font-weight: 600;
    font-size: 14px;
    color: var(--kct-color-text, #1f2430);
}

.kct-pick-note {
    grid-area: note;
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--kct-color-muted, #6b7280);
}

/* With pictures (fields.js adds .has-pictures when any option has one): cards like the Module library's —
   the picture across the top, then the name and the sentence. Options without a picture show their icon there. */
.kct-pick.has-pictures { grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); }
.kct-pick.has-pictures .kct-pick-card {
    grid-template-columns: 1fr;
    grid-template-areas: "figure" "name" "note";
    gap: .25rem;
    padding: 0 0 .75rem;
    overflow: hidden;
}
.kct-pick.has-pictures .kct-pick-figure {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    border-radius: 0;
    border-bottom: 1px solid var(--kct-color-border, #d6dae1);
    margin-bottom: .35rem;
}
.kct-pick.has-pictures .kct-pick-figure img { object-position: top; }
.kct-pick.has-pictures .kct-pick-figure svg { width: 2rem; height: 2rem; }
.kct-pick.has-pictures .kct-pick-name,
.kct-pick.has-pictures .kct-pick-note { padding-inline: .75rem; }

/* ---- Panel bar (framework/fields.js → panelbar) ----------------------------------------------
   Grouped navigation that opens a section at a time. Replaces the Kendo PanelBar the feature
   dashboards used; Core never had one. */

.kct-panelbar {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--kct-color-border, #d6dae1);
    border-radius: var(--kct-radius, 8px);
    overflow: hidden;
    background: var(--kct-window-bg, #fff);
}

.kct-panelbar-section + .kct-panelbar-section { border-top: 1px solid var(--kct-color-border, #d6dae1); }

.kct-panelbar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    width: 100%;
    padding: .6rem .75rem;
    border: 0;
    background: var(--kct-color-surface-alt, #f6f7f9);
    color: var(--kct-color-text, #1f2430);
    font-weight: 600;
    font-size: 13.5px;
    text-align: left;
    cursor: pointer;
}

.kct-panelbar-head::after {
    content: "";
    width: .5rem;
    height: .5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    opacity: .5;
    transition: transform var(--kct-transition, .15s ease);
}

.kct-panelbar-section.is-open > .kct-panelbar-head::after { transform: rotate(45deg); }
.kct-panelbar-head:hover { background: var(--kct-color-primary-soft, rgba(47, 111, 237, .08)); }
.kct-panelbar-head:focus-visible { outline: 2px solid var(--kct-color-primary, #2f6fed); outline-offset: -2px; }

.kct-panelbar-items { display: none; margin: 0; padding: 0; list-style: none; }
.kct-panelbar-section.is-open > .kct-panelbar-items { display: block; }

.kct-panelbar-link {
    display: block;
    width: 100%;
    padding: .5rem .75rem .5rem 1.25rem;
    border: 0;
    border-left: 3px solid transparent;
    background: none;
    color: var(--kct-color-text, #1f2430);
    font-size: 13.5px;
    text-align: left;
    cursor: pointer;
}

.kct-panelbar-link:hover { background: var(--kct-color-surface-alt, #f6f7f9); }
.kct-panelbar-link:focus-visible { outline: 2px solid var(--kct-color-primary, #2f6fed); outline-offset: -2px; }

.kct-panelbar-link.is-selected {
    border-left-color: var(--kct-color-primary, #2f6fed);
    background: var(--kct-color-primary-soft, rgba(47, 111, 237, .08));
    color: var(--kct-color-primary, #2f6fed);
    font-weight: 600;
}

/* Feedback / contact form: a comfortable width, centred, wherever it is placed. */
.kct-module-feedback { max-width: 44rem; margin-inline: auto; }

/* Sign-up honeypot (SignupGuard): off-screen, not display:none (some bots skip hidden fields). */
.kct-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Contact form (the 4.8 module): the message box was 300px tall; themes size the band around it. */
.kct-module-contactform textarea { height: 300px; }

/*
 * KCT framework — 25-editor.css
 * The framework rich-text editor (framework/editor.js): toolbar, writing area, HTML view, popovers, token chips.
 * Editors sit inside dialogs and forms, so the look follows the form tokens.
 */

.kct-editor {
    position: relative;
    display: flex;
    flex-direction: column;
    border: var(--kct-border-width) solid var(--kct-field-border-color, var(--kct-color-border));
    border-radius: var(--kct-radius);
    background: var(--kct-color-surface);
    color: var(--kct-color-text);
}

.kct-editor:focus-within { border-color: var(--kct-color-primary); box-shadow: var(--kct-focus-ring); }
.kct-editor.is-disabled { opacity: .6; pointer-events: none; }

/* ---- Toolbar ---- */
.kct-editor-toolbar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: var(--kct-space-1) var(--kct-space-2);
    padding: var(--kct-space-1) var(--kct-space-2);
    border-bottom: var(--kct-border-width) solid var(--kct-color-border);
    border-radius: var(--kct-radius) var(--kct-radius) 0 0;
    background: var(--kct-color-surface-alt);
}

.kct-editor-group { display: inline-flex; align-items: center; gap: 1px; }
.kct-editor-group + .kct-editor-group { padding-left: var(--kct-space-2); border-left: 1px solid var(--kct-color-border); }

.kct-editor-btn {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: var(--kct-radius-sm);
    background: transparent;
    color: var(--kct-color-text);
    cursor: pointer;
}

.kct-editor-btn svg { width: 1.1rem; height: 1.1rem; }
.kct-editor-btn:hover { background: color-mix(in srgb, var(--kct-color-primary) 10%, transparent); }
.kct-editor-btn.is-on,
.kct-editor-btn[aria-pressed="true"] { background: color-mix(in srgb, var(--kct-color-primary) 16%, transparent); color: var(--kct-color-primary); }
.kct-editor-btn:focus-visible { outline: none; box-shadow: var(--kct-focus-ring); }
.kct-editor-btn:disabled { opacity: .35; cursor: default; }

.kct-editor-block {
    height: 2rem;
    padding: 0 var(--kct-space-2);
    border: var(--kct-border-width) solid var(--kct-color-border);
    border-radius: var(--kct-radius-sm);
    background: var(--kct-color-surface);
    color: var(--kct-color-text);
    font-size: var(--kct-text-sm);
}

/* ---- Writing area (and the HTML view, which is the original textarea) ---- */
.kct-editor-surface,
.kct-editor .kct-editor-source {
    min-height: 16rem;
    max-height: 60vh;
    overflow: auto;
    resize: vertical;
    padding: var(--kct-space-4);
    border: 0;
    outline: none;
    background: transparent;
    color: inherit;
    font-family: var(--kct-font-body);
    font-size: var(--kct-text-base);
    line-height: var(--kct-line-height, 1.6);
}

.kct-editor .kct-editor-source { width: 100%; font-family: var(--kct-font-mono); font-size: var(--kct-text-sm); white-space: pre-wrap; }

.kct-editor-surface > :first-child { margin-top: 0; }
.kct-editor-surface > :last-child { margin-bottom: 0; }
.kct-editor-surface img { max-width: 100%; height: auto; }
.kct-editor-surface table { width: 100%; border-collapse: collapse; }
.kct-editor-surface td, .kct-editor-surface th { border: 1px dashed var(--kct-color-border); padding: var(--kct-space-1) var(--kct-space-2); min-width: 3rem; }
.kct-editor-surface blockquote { margin: var(--kct-space-3) 0; padding: var(--kct-space-2) var(--kct-space-4); border-left: 3px solid var(--kct-color-primary); color: var(--kct-color-text-muted); }
.kct-editor-surface a { color: var(--kct-color-link); text-decoration: underline; }
.kct-editor-surface .row { outline: 1px dashed var(--kct-color-border); outline-offset: 2px; }   /* show snippet columns while editing */

/* Merge fields: <#:FirstName#> shown as a chip */
.kct-token {
    display: inline-block;
    padding: 0 .4em;
    border-radius: var(--kct-radius-pill);
    background: color-mix(in srgb, var(--kct-color-accent) 16%, var(--kct-color-surface));
    color: color-mix(in srgb, var(--kct-color-accent) 70%, var(--kct-color-text));
    font-family: var(--kct-font-mono);
    font-size: .85em;
    white-space: nowrap;
    user-select: all;
}

/* ---- Popovers: link, picture, blocks, merge fields ---- */
.kct-editor-pop {
    position: absolute;
    z-index: 5;
    width: min(20rem, calc(100% - 1rem));
    padding: var(--kct-space-3);
    border: var(--kct-border-width) solid var(--kct-color-border);
    border-radius: var(--kct-radius);
    background: var(--kct-color-surface);
    box-shadow: var(--kct-shadow-lg);
}

.kct-editor-pop-body { display: grid; gap: var(--kct-space-2); font-size: var(--kct-text-sm); }
.kct-editor-pop label { display: grid; gap: .2rem; font-weight: 600; }
.kct-editor-pop input[type="text"] {
    padding: .35rem .5rem;
    border: var(--kct-border-width) solid var(--kct-field-border-color, var(--kct-color-border));
    border-radius: var(--kct-radius-sm);
    background: var(--kct-color-surface);
    color: var(--kct-color-text);
    font-weight: 400;
}
.kct-editor-pop .kct-editor-check { display: flex; align-items: center; gap: var(--kct-space-2); font-weight: 400; }
.kct-editor-pop-actions { display: flex; gap: var(--kct-space-2); }
.kct-editor-hint { margin: 0; color: var(--kct-color-text-muted); font-size: var(--kct-text-xs); }
.kct-editor-error { margin: 0; color: var(--kct-color-danger); font-size: var(--kct-text-xs); }

.kct-editor-menu { display: grid; max-height: 16rem; overflow: auto; }
.kct-editor-menu button {
    padding: .45rem .6rem;
    border: 0;
    border-radius: var(--kct-radius-sm);
    background: none;
    color: var(--kct-color-text);
    text-align: left;
    cursor: pointer;
}
.kct-editor-menu button:hover,
.kct-editor-menu button:focus-visible { background: var(--kct-color-surface-alt); outline: none; }

/* Snippet: callout block in content */
.kct-callout {
    padding: var(--kct-space-3) var(--kct-space-4);
    border-left: 4px solid var(--kct-color-accent);
    border-radius: 0 var(--kct-radius) var(--kct-radius) 0;
    background: color-mix(in srgb, var(--kct-color-accent) 8%, var(--kct-color-surface));
    color: var(--kct-color-text);
}

/*
 * KCT framework — 30-edit-chrome.css
 * In-place editing affordances for page designers (edit-chrome.js): a hovered module is framed and shows
 * an icon toolbar in its top-right corner. Uses --kct-edit-* only, deliberately independent of the brand.
 */
[data-kct-edit-chrome="on"] {
    position: relative;
}

[data-kct-edit-chrome="on"]:hover,
[data-kct-edit-chrome="on"]:focus-within {
    outline: var(--kct-edit-outline-width) var(--kct-edit-outline-style) var(--kct-edit-outline-color);
    outline-offset: var(--kct-edit-outline-offset);
    border-radius: 2px;
}

/* A section inside a module keeps a lighter frame so the two levels stay distinguishable. */
[data-kct-edit-scope][data-kct-edit-chrome="on"]:hover,
[data-kct-edit-scope][data-kct-edit-chrome="on"]:focus-within {
    outline-width: 2px;
    outline-style: dashed;
}

.kct-edit-chrome {
    position: absolute;
    top: var(--kct-edit-chrome-inset);
    right: var(--kct-edit-chrome-inset);
    z-index: 5;
    display: flex;
    gap: var(--kct-edit-chrome-gap);
    opacity: 0;
    transform: translateY(-.25rem);
    transition: opacity .12s ease-out, transform .12s ease-out;
    pointer-events: none;
}

[data-kct-edit-chrome="on"]:hover > .kct-edit-chrome,
[data-kct-edit-chrome="on"]:focus-within > .kct-edit-chrome {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.kct-edit-action {
    width: var(--kct-edit-action-size);
    height: var(--kct-edit-action-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--kct-edit-action-color);
    border-radius: var(--kct-edit-action-radius);
    background: var(--kct-edit-action-bg);
    color: var(--kct-edit-action-color);
    cursor: pointer;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}

.kct-edit-action svg {
    width: 62%;
    height: 62%;
}

.kct-edit-action:hover,
.kct-edit-action:focus-visible {
    background: var(--kct-edit-action-hover-bg);
    color: var(--kct-edit-action-hover-color);
    outline: none;
}

/* Destructive actions read as destructive. */
.kct-edit-action[data-action*="delete"],
.kct-edit-action[data-action*="remove"] {
    border-color: var(--kct-edit-action-danger);
    color: var(--kct-edit-action-danger);
}

.kct-edit-action[data-action*="delete"]:hover,
.kct-edit-action[data-action*="remove"]:hover {
    background: var(--kct-edit-action-danger);
    color: #fff;
}

/* Tooltip: explains the action in a sentence, not a one-word label. */
.kct-edit-action[data-kct-tip]::after {
    content: attr(data-kct-tip);
    position: absolute;
    top: calc(var(--kct-edit-action-size) + .35rem);
    right: 0;
    width: max-content;
    max-width: var(--kct-edit-tip-width);
    padding: .4rem .55rem;
    border-radius: .25rem;
    background: var(--kct-edit-tip-bg);
    color: var(--kct-edit-tip-color);
    font-size: .8125rem;
    font-weight: 400;
    line-height: 1.35;
    text-align: left;
    white-space: normal;
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s ease-out .25s;
    z-index: 6;
}

.kct-edit-action[data-kct-tip] {
    position: relative;
}

.kct-edit-action[data-kct-tip]:hover::after,
.kct-edit-action[data-kct-tip]:focus-visible::after {
    opacity: 1;
}

/* Touch devices have no hover: keep the tools visible rather than unreachable. */
@media (hover: none) {
    .kct-edit-chrome {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kct-edit-chrome,
    .kct-edit-action[data-kct-tip]::after {
        transition: none;
    }
}

/*
 * KCT framework — 35-designer.css
 * The page designer's own UI: the editor dock, dialogs, switches, choice cards and the module picker.
 * Deliberately NOT themed: everything sits inside .kct-admin, which sets its own neutral palette and system font,
 * so the tools read the same on every site theme (light, dark, serif, uppercase…). Override --kct-admin-* only
 * to recolour the tools themselves.
 */
.kct-admin {
    --kct-admin-bg: #ffffff;
    --kct-admin-surface: #f6f7f9;
    --kct-admin-text: #1f2328;
    --kct-admin-muted: #5b6573;
    --kct-admin-border: #d8dde3;
    --kct-admin-accent: #2563eb;
    --kct-admin-accent-soft: #e8efff;
    --kct-admin-on-accent: #ffffff;
    --kct-admin-danger: #c62828;
    --kct-admin-dock-bg: #111827;
    --kct-admin-dock-text: #f3f4f6;
    --kct-admin-radius: 10px;
    --kct-admin-font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    color-scheme: light;
    color: var(--kct-admin-text);
    font-family: var(--kct-admin-font);
    font-size: 15px;
    line-height: 1.5;
    text-transform: none;
    letter-spacing: normal;
}

.kct-admin h2, .kct-admin h3, .kct-admin h4 {
    color: var(--kct-admin-text);
    font-family: var(--kct-admin-font);
    font-weight: 650;
    text-transform: none;
    letter-spacing: -0.01em;
}

.kct-admin :focus-visible { outline: 3px solid color-mix(in srgb, var(--kct-admin-accent) 45%, transparent); outline-offset: 2px; box-shadow: none; }

/* ---- Buttons inside the tools ---- */
.kct-admin .kct-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .5rem .95rem;
    border: 1px solid var(--kct-admin-border);
    border-radius: 8px;
    background: var(--kct-admin-bg);
    color: var(--kct-admin-text);
    font: 600 14px/1.2 var(--kct-admin-font);
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}

.kct-admin .kct-btn:hover { background: var(--kct-admin-surface); }
.kct-admin .kct-btn.is-primary { background: var(--kct-admin-accent); border-color: var(--kct-admin-accent); color: var(--kct-admin-on-accent); }
.kct-admin .kct-btn.is-primary:hover { background: color-mix(in srgb, var(--kct-admin-accent) 88%, #000); }
.kct-admin .kct-btn.is-danger { color: var(--kct-admin-danger); }
.kct-admin .kct-btn.is-link { border-color: transparent; background: transparent; color: var(--kct-admin-accent); padding-inline: .4rem; }
.kct-admin .kct-btn svg { width: 1.1em; height: 1.1em; }

/* ------------------------------------------------------------------
   Editor dock: always visible, bottom-left, collapsible
   ------------------------------------------------------------------ */
.kct-dock {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    z-index: 10500;
    display: flex;
    align-items: center;
    gap: .25rem;
    padding: .35rem;
    border-radius: 14px;
    background: var(--kct-admin-dock-bg);
    color: var(--kct-admin-dock-text);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
}

.kct-dock-label {
    padding: 0 .6rem 0 .45rem;
    font-size: 12px;
    line-height: 1.2;
    color: #9ca3af;
    max-width: 12rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kct-dock-label strong { display: block; color: var(--kct-admin-dock-text); font-size: 13px; }

.kct-dock button {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .75rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font: 600 13px/1 var(--kct-admin-font);
    cursor: pointer;
}

.kct-dock button:hover { background: rgba(255, 255, 255, .1); }
.kct-dock button.is-primary { background: var(--kct-admin-accent); }
.kct-dock button.is-primary:hover { background: color-mix(in srgb, var(--kct-admin-accent) 85%, #fff); }
.kct-dock svg { width: 18px; height: 18px; }

/* Keep the end of the page reachable above the dock. */
body:has(> .kct-dock) { padding-bottom: 4.5rem; }

.kct-dock.is-collapsed .kct-dock-label,
.kct-dock.is-collapsed [data-dock-item] { display: none; }

@media (max-width: 575.98px) {
    .kct-dock { left: .5rem; right: .5rem; bottom: .5rem; overflow-x: auto; }
    .kct-dock-label { display: none; }
}

/* ------------------------------------------------------------------
   Dialog (native <dialog>)
   ------------------------------------------------------------------ */
dialog.kct-dialog {
    width: min(var(--kct-dialog-width, 680px), calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    padding: 0;
    border: 0;
    border-radius: 16px;
    background: var(--kct-admin-bg);
    box-shadow: 0 24px 64px rgba(0, 0, 0, .35);
    overflow: hidden;
}

/* Centred by margin:auto, said explicitly (client themes reset "* { margin: 0 }" and would pin it top-left). The
   dialog is a flex column; the <form> inside it (page and module dialogs) must be one too and allowed to shrink,
   otherwise a long form grows past the dialog's max-height and the body never gets its scrollbar. */
dialog.kct-dialog[open] { display: flex; flex-direction: column; margin: auto; inset: 0; }
dialog.kct-dialog > form { display: flex; flex-direction: column; min-height: 0; max-height: 100%; }
dialog.kct-dialog::backdrop { background: rgba(17, 24, 39, .55); backdrop-filter: blur(2px); }
dialog.kct-dialog.is-wide { --kct-dialog-width: 1080px; }

.kct-dialog-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.1rem 1.4rem .9rem;
    border-bottom: 1px solid var(--kct-admin-border);
}

.kct-dialog-header > div { flex: 1 1 auto; min-width: 0; }
.kct-dialog-header h2 { margin: 0; font-size: 19px; }
.kct-dialog-header p { margin: .15rem 0 0; color: var(--kct-admin-muted); font-size: 14px; }
.kct-dialog-close { border: 0; background: none; color: var(--kct-admin-muted); font-size: 24px; line-height: 1; cursor: pointer; }

.kct-dialog-body { padding: 1.2rem 1.4rem; overflow-y: auto; display: grid; gap: 1.4rem; flex: 1 1 auto; min-height: 0; }

.kct-dialog-footer {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .9rem 1.4rem;
    border-top: 1px solid var(--kct-admin-border);
    background: var(--kct-admin-surface);
}

.kct-dialog-footer .is-spacer { flex: 1 1 auto; }
.kct-dialog-error { margin: 0; color: var(--kct-admin-danger); font-size: 14px; }

/* Sections and fields */
.kct-section { display: grid; gap: .9rem; }
.kct-section > h3 { margin: 0; font-size: 15px; }
.kct-section > p { margin: -.5rem 0 0; color: var(--kct-admin-muted); font-size: 13px; }

.kct-field { display: grid; gap: .3rem; }
.kct-field > label, .kct-field > .kct-field-label { font-weight: 600; font-size: 14px; }
.kct-field .kct-help { color: var(--kct-admin-muted); font-size: 13px; }

.kct-admin input[type="text"], .kct-admin input[type="number"], .kct-admin input[type="url"],
.kct-admin input[type="search"], .kct-admin select, .kct-admin textarea {
    width: 100%;
    padding: .55rem .7rem;
    border: 1px solid var(--kct-admin-border);
    border-radius: 8px;
    background: #fff;
    color: var(--kct-admin-text);
    font: 15px/1.4 var(--kct-admin-font);
}

.kct-admin input:focus, .kct-admin select:focus, .kct-admin textarea:focus {
    border-color: var(--kct-admin-accent);
    outline: 3px solid color-mix(in srgb, var(--kct-admin-accent) 25%, transparent);
    outline-offset: 0;
}

.kct-address-input { display: flex; align-items: stretch; }
.kct-address-input span {
    display: grid;
    place-items: center;
    padding: 0 .6rem;
    border: 1px solid var(--kct-admin-border);
    border-right: 0;
    border-radius: 8px 0 0 8px;
    background: var(--kct-admin-surface);
    color: var(--kct-admin-muted);
    font-size: 14px;
    white-space: nowrap;
}
.kct-address-input input { border-radius: 0 8px 8px 0 !important; }

.kct-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .9rem; }

/* Switch: <label class="kct-switch"><input type="checkbox"><span>Label</span></label> */
.kct-switch { display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; font-weight: 500; }
.kct-switch input {
    appearance: none;
    flex: none;
    width: 2.4rem;
    height: 1.35rem;
    margin: 0;
    border-radius: 999px;
    /* Off: plainly grey, with a border so it reads as a control rather than a smudge. The accent below was once
       --kct-admin-accent, which is only defined inside .kct-admin — outside the page designer it resolved to nothing
       and on looked the same as off. */
    background: #aeb6c2;
    border: 1px solid #98a1af;
    position: relative;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}
.kct-switch input::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: calc(1.35rem - 6px);
    height: calc(1.35rem - 6px);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    transition: transform .15s;
}
.kct-switch input:checked {
    background: var(--kct-admin-accent, var(--kct-color-success, #1f8a4c));
    border-color: color-mix(in srgb, var(--kct-admin-accent, var(--kct-color-success, #1f8a4c)) 70%, #000);
}
.kct-switch input:checked::after { transform: translateX(1.05rem); }
.kct-switch input:disabled { opacity: .5; cursor: not-allowed; }

/* The word beside a switch, so "on" and "off" are readable and not only a colour. */
.kct-switch-state::after { content: "Off"; font-weight: 600; color: var(--kct-color-text-muted, #5b6573); }
.kct-switch input:checked ~ .kct-switch-state::after { content: "On"; color: var(--kct-admin-accent, var(--kct-color-success, #1f8a4c)); }

/* Checkbox pills (groups) */
.kct-check-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.kct-check-pills label {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .8rem;
    border: 1px solid var(--kct-admin-border);
    border-radius: 999px;
    cursor: pointer;
    font-size: 14px;
}
.kct-check-pills label:has(input:checked) { border-color: var(--kct-admin-accent); background: var(--kct-admin-accent-soft); color: var(--kct-admin-accent); }
.kct-check-pills input { accent-color: var(--kct-admin-accent); }

/* Choice cards (radio as big cards with a small drawing) */
.kct-choice-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .75rem; }
.kct-choice-cards label {
    display: grid;
    gap: .45rem;
    padding: .75rem;
    border: 2px solid var(--kct-admin-border);
    border-radius: var(--kct-admin-radius);
    cursor: pointer;
    font-size: 14px;
}
.kct-choice-cards label:has(input:checked) { border-color: var(--kct-admin-accent); background: var(--kct-admin-accent-soft); }
.kct-choice-cards input { position: absolute; opacity: 0; pointer-events: none; }
.kct-choice-cards small { color: var(--kct-admin-muted); }
.kct-choice-art { display: flex; gap: 4px; height: 44px; padding: 6px; border-radius: 6px; background: var(--kct-admin-surface); }
.kct-choice-art i { display: block; flex: 1 1 0; border-radius: 3px; background: #c7cfdb; }
.kct-choice-art i.is-this { background: var(--kct-admin-accent); }

/* Advanced options */
.kct-admin details.kct-more { border-top: 1px solid var(--kct-admin-border); padding-top: .9rem; }
.kct-admin details.kct-more > summary { cursor: pointer; font-weight: 600; color: var(--kct-admin-accent); list-style: none; }
.kct-admin details.kct-more > summary::before { content: "▸ "; }
.kct-admin details.kct-more[open] > summary::before { content: "▾ "; }
.kct-admin details.kct-more > .kct-section { margin-top: .9rem; }

/* Rows (modules on this page) */
.kct-rows { list-style: none; margin: 0; padding: 0; border: 1px solid var(--kct-admin-border); border-radius: var(--kct-admin-radius); }
.kct-rows li { display: flex; align-items: center; gap: .75rem; padding: .6rem .8rem; }
.kct-rows li + li { border-top: 1px solid var(--kct-admin-border); }
.kct-rows .kct-row-main { flex: 1 1 auto; min-width: 0; }
.kct-rows .kct-row-main strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kct-rows .kct-row-main small { color: var(--kct-admin-muted); }
.kct-rows .kct-row-order { color: var(--kct-admin-muted); font-variant-numeric: tabular-nums; width: 1.5rem; text-align: right; }
.kct-rows:empty::before { content: "No modules on this page yet."; display: block; padding: .8rem; color: var(--kct-admin-muted); }

/* Permissions table */
.kct-perm-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.kct-perm-table th, .kct-perm-table td { padding: .45rem .5rem; border-bottom: 1px solid var(--kct-admin-border); text-align: center; }
.kct-perm-table th:first-child, .kct-perm-table td:first-child { text-align: left; }
.kct-perm-table th { color: var(--kct-admin-muted); font-size: 12px; font-weight: 600; }

/* ------------------------------------------------------------------
   Module picker: search, categories, cards with live previews
   ------------------------------------------------------------------ */
.kct-picker-tools { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.kct-picker-tools input[type="search"] { flex: 1 1 16rem; }
.kct-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.kct-chips button {
    padding: .35rem .75rem;
    border: 1px solid var(--kct-admin-border);
    border-radius: 999px;
    background: #fff;
    color: var(--kct-admin-text);
    font: 600 13px/1.2 var(--kct-admin-font);
    cursor: pointer;
}
.kct-chips button[aria-pressed="true"] { background: var(--kct-admin-text); border-color: var(--kct-admin-text); color: #fff; }

.kct-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }

.kct-picker-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    border: 2px solid var(--kct-admin-border);
    border-radius: 12px;
    background: #fff;
    color: inherit;
    font: inherit;
    text-align: left;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .15s, transform .15s, box-shadow .15s;
}
.kct-picker-card:hover, .kct-picker-card:focus-visible { border-color: var(--kct-admin-accent); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, .12); }

.kct-picker-preview {
    position: relative;
    height: 150px;
    overflow: hidden;
    background: var(--kct-admin-surface);
    border-bottom: 1px solid var(--kct-admin-border);
}

/* The live preview: the showcase page at 1200px wide, drawn at a quarter size and not interactive. */
.kct-picker-preview iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 1200px;
    height: 600px;
    border: 0;
    transform: scale(.25);
    transform-origin: 0 0;
    pointer-events: none;
    background: #fff;
}

/* The Module library's picture of the module, when it has one (instant; the live preview loads a page). */
.kct-picker-preview img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }

.kct-picker-icon { position: absolute; inset: 0; display: grid; place-items: center; color: #9aa5b4; }
.kct-picker-icon svg { width: 44px; height: 44px; }
.kct-picker-body { padding: .7rem .85rem .85rem; display: grid; gap: .2rem; }
.kct-picker-body strong { font-size: 15px; }
.kct-picker-body span { color: var(--kct-admin-muted); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kct-picker-body em { font-style: normal; color: var(--kct-admin-accent); font-size: 12px; font-weight: 600; }
.kct-picker-empty { padding: 2rem; text-align: center; color: var(--kct-admin-muted); }

/* A page loaded as a module preview (…?kct-preview=1) shows only its modules. */
html.kct-preview body > :not(main):not(script):not(svg),
html.kct-preview .kct-page-hero,
html.kct-preview .kct-page-modules .alert[role="note"],
html.kct-preview .kct-edit-chrome { display: none !important; }
/* ...and no hover outline either: it promised tools that preview mode hides (Module library preview, 2026-09-21). */
html.kct-preview [data-kct-edit-chrome="on"]:hover,
html.kct-preview [data-kct-edit-chrome="on"]:focus-within { outline: none !important; }
/* Editors' upload controls are editing too (edit-chrome.js hides the edit/add/delete buttons in a preview). */
html.kct-preview .module-edit-toolbar,
html.kct-preview .kct-dropzone,
html.kct-preview label:has(> input[type="file"]) { display: none !important; }
html.kct-preview .kct-page-modules { padding: 1.5rem 0; }

/* ---- Site admin menu in the dock ---------------------------------------------------------------------------
   The staff tools this site has. It opens upward, because the dock sits at the bottom of the window.          */

.kct-dock-admin { position: relative; display: inline-flex; }

.kct-dock-menu {
    position: absolute;
    bottom: calc(100% + .5rem);
    left: 0;
    z-index: 10;
    min-width: 17rem;
    max-height: min(60vh, 32rem);
    overflow-y: auto;
    padding: .5rem;
    border-radius: var(--kct-admin-radius, 10px);
    background: var(--kct-admin-dock-bg, #111827);
    color: var(--kct-admin-dock-text, #f3f4f6);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .38);
}

.kct-dock-menu-group + .kct-dock-menu-group { margin-top: .35rem; padding-top: .35rem; border-top: 1px solid rgba(255, 255, 255, .12); }

.kct-dock-menu h3 {
    margin: 0;
    padding: .35rem .6rem .2rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .6;
}

.kct-dock-menu a {
    display: block;
    padding: .45rem .6rem;
    border-radius: 6px;
    color: inherit;
    text-decoration: none;
}

.kct-dock-menu a:hover,
.kct-dock-menu a:focus-visible { background: rgba(255, 255, 255, .12); }
.kct-dock-menu a strong { display: block; font-size: .85rem; font-weight: 600; }
.kct-dock-menu a span { display: block; font-size: .75rem; opacity: .65; }

.kct-dock.is-collapsed .kct-dock-menu { display: none; }

/*
 * KCT framework — 40-media.css
 * Slideshow, the native media player (media-player.js), the video library (Html5 Player) and Media Library.
 */

/* ------------------------------------------------------------------
   Slideshow module
   Server-rendered slides (.kct-slide, also .kctSlides for 4.8 theme CSS). Only .is-active shows; slides
   cross-fade. ‹ › and the dots are buttons; rotation pauses on hover/focus (slideshowviewer.module.js).
   ------------------------------------------------------------------ */
.kct-slideshow { position: relative; max-width: var(--kct-slideshow-max-width, none); margin-inline: auto; }   /* Width setting; 0 = full width */

.kct-module-slideshowviewer .slideshow-container {
    position: relative;
    display: grid;                       /* every slide in the same cell, so they can cross-fade */
    overflow: hidden;
    border-radius: var(--kct-slideshow-radius, var(--kct-radius-lg));
    background: var(--kct-color-surface-alt);
}

.kct-module-slideshowviewer .kct-slide {
    grid-area: 1 / 1;
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: opacity .8s ease-in-out, visibility 0s linear .8s;
}

.kct-module-slideshowviewer .kct-slide.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity .8s ease-in-out;
}

.kct-module-slideshowviewer .photo {
    position: relative;
    height: var(--kct-slideshow-height);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.kct-module-slideshowviewer .photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--kct-slideshow-overlay);
    pointer-events: none;
}

.kct-module-slideshowviewer .photo .container {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 1;
    padding: 0 var(--kct-space-7) var(--kct-space-6);
    color: var(--kct-slideshow-text);
}

.kct-slide-caption { max-width: 40rem; }
.kct-slide-caption p { margin: 0 0 var(--kct-space-3); opacity: .92; }

.kct-module-slideshowviewer .kct-slide-title {
    color: inherit;
    font-size: clamp(1.25rem, 3vw, 2rem);
    margin: 0 0 var(--kct-space-1);
    text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}

/* ‹ › */
.kct-slide-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    transform: translateY(-50%);
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .28);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--kct-transition), background-color var(--kct-transition);
}

.kct-slide-nav.is-prev { left: var(--kct-space-3); }
.kct-slide-nav.is-next { right: var(--kct-space-3); }
.kct-slideshow:hover .kct-slide-nav,
.kct-slide-nav:focus-visible { opacity: 1; }
.kct-slide-nav:hover { background: rgba(0, 0, 0, .5); }
.kct-slide-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (hover: none) { .kct-slide-nav { opacity: 1; } }

/* Dots */
.kct-module-slideshowviewer .dot-container {
    display: flex;
    justify-content: center;
    gap: var(--kct-space-2);
    padding: var(--kct-space-3) 0 0;
}

.kct-module-slideshowviewer .dot {
    width: .65rem;
    height: .65rem;
    padding: 0;
    border: 0;
    border-radius: var(--kct-radius-pill);
    background: var(--kct-slideshow-dot);
    cursor: pointer;
    transition: width var(--kct-transition), background-color var(--kct-transition);
}

.kct-module-slideshowviewer .dot.active { width: 1.6rem; background: var(--kct-slideshow-dot-active); }
.kct-module-slideshowviewer .dot:focus-visible { outline: none; box-shadow: var(--kct-focus-ring); }

/* Manage slides dialog */
.kct-slide-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--kct-space-2); counter-reset: slide; }
.kct-slide-list li {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr) auto;
    gap: var(--kct-space-3);
    align-items: center;
    padding: var(--kct-space-2);
    border: 1px solid var(--kct-color-border);
    border-radius: var(--kct-radius);
}
.kct-slide-list img { width: 6rem; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--kct-radius-sm); }
.kct-slide-list-text { display: grid; min-width: 0; }
.kct-slide-list-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kct-slide-list-tools { display: flex; flex-wrap: wrap; gap: var(--kct-space-1); justify-content: flex-end; }
.kct-slide-list li:first-child [data-action="slide-up"],
.kct-slide-list li:last-child [data-action="slide-down"] { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
    .kct-module-slideshowviewer .kct-slide,
    .kct-module-slideshowviewer .kct-slide.is-active { transition: none; }
}

@media (max-width: 575.98px) {
    .kct-module-slideshowviewer .photo .container { padding: 0 var(--kct-space-4) var(--kct-space-4); }
    .kct-slide-list li { grid-template-columns: 4.5rem minmax(0, 1fr); }
    .kct-slide-list-tools { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ------------------------------------------------------------------
   Media player (framework media-player.js)
   ------------------------------------------------------------------ */
.kct-media-video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;   /* holds the frame's shape before the file's metadata arrives */
    max-height: 70vh;
    background: #000;
    border-radius: var(--kct-radius-sm);
}

.kct-media-audio { display: block; width: 100%; }

.kct-media-dialog {
    width: min(960px, 95vw);
    padding: 0;
    border: 0;
    border-radius: var(--kct-radius-lg);
    background: var(--kct-color-surface);
    color: var(--kct-color-text);
    box-shadow: var(--kct-shadow-lg);
}

.kct-media-dialog::backdrop { background: var(--kct-color-overlay); backdrop-filter: blur(2px); }

.kct-media-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: var(--kct-space-3) var(--kct-space-5);
    border-bottom: var(--kct-border-width) solid var(--kct-color-border);
}

.kct-media-dialog-body { padding: var(--kct-space-5); }

/* ------------------------------------------------------------------
   Video library (Html5 Player)
   Featured video → one scrolling row per series → series browser.
   Rows scroll natively (touch, trackpad, shift+wheel) and snap to cards;
   the round arrows only appear on hover when there is more to see.
   ------------------------------------------------------------------ */

/* Play badge over a poster: bottom-right, so it never covers a title printed on the poster */
.kct-video-play {
    position: absolute;
    right: var(--kct-space-3);
    bottom: var(--kct-space-3);
    width: var(--kct-video-play-size);
    height: var(--kct-video-play-size);
    border-radius: 50%;
    background: var(--kct-video-play-bg);
    box-shadow: var(--kct-shadow);
    transition: transform var(--kct-transition), background-color var(--kct-transition);
}

.kct-video-play::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 54%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: .55em 0 .55em .9em;
    border-color: transparent transparent transparent var(--kct-video-play-color);
    font-size: calc(var(--kct-video-play-size) / 3.25);
}

button.kct-card-media,
.kct-video-feature-media {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    cursor: pointer;
}

.kct-card-media:hover .kct-video-play,
.kct-card-media:focus-visible .kct-video-play,
.kct-video-feature-media:hover .kct-video-play {
    transform: scale(1.1);
    background: var(--kct-color-on-primary);
}

/* Featured (latest) video */
.kct-video-feature {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: var(--kct-space-6);
    align-items: center;
    margin-bottom: var(--kct-space-7);
}

.kct-video-feature-media {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--kct-radius-lg);
    overflow: hidden;
    background: var(--kct-video-poster-bg);
    box-shadow: var(--kct-shadow);
}

.kct-video-feature-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.kct-video-feature .kct-video-play { --kct-video-play-size: 4rem; }

.kct-video-feature-body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--kct-space-3); }
.kct-video-feature-body h3 { margin: 0; font-size: var(--kct-h2); }
.kct-video-feature-text { color: var(--kct-color-text-muted); }
.kct-video-feature-text > :last-child { margin-bottom: 0; }

/* A series row */
.kct-video-row + .kct-video-row,
.kct-video-row + .kct-series-browser { margin-top: var(--kct-space-6); }
.kct-video-row { scroll-margin-top: var(--kct-space-6); }

.kct-video-row-header {
    display: flex;
    align-items: baseline;
    gap: var(--kct-space-3);
    margin-bottom: var(--kct-space-3);
}

.kct-video-row-header h3 { margin: 0; }
.kct-video-row-text { margin: calc(-1 * var(--kct-space-2)) 0 var(--kct-space-3); color: var(--kct-color-text-muted); max-width: 60ch; }

.kct-video-row.is-picked { animation: kct-row-in 350ms ease-out; }
@keyframes kct-row-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Horizontal rail */
.kct-rail { position: relative; }

.kct-rail-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--kct-video-card-width);
    gap: var(--kct-space-5);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: var(--kct-space-2) var(--kct-space-1) var(--kct-space-4);
    scrollbar-width: thin;
    scrollbar-color: var(--kct-color-border) transparent;
}

.kct-rail-track > * { scroll-snap-align: start; }

.kct-rail-arrow {
    position: absolute;
    top: calc(var(--kct-video-card-width) * 9 / 32);   /* centred on the 16:9 poster */
    z-index: 2;
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    border: var(--kct-border-width) solid var(--kct-color-border);
    border-radius: 50%;
    background: var(--kct-color-surface);
    color: var(--kct-color-text);
    font-size: 1.6rem;
    line-height: 1;
    box-shadow: var(--kct-shadow);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--kct-transition), transform var(--kct-transition);
}

.kct-rail-arrow.is-prev { left: calc(-1 * var(--kct-space-4)); }
.kct-rail-arrow.is-next { right: calc(-1 * var(--kct-space-4)); }
.kct-rail.can-prev:hover .kct-rail-arrow.is-prev,
.kct-rail.can-next:hover .kct-rail-arrow.is-next { opacity: 1; pointer-events: auto; }
.kct-rail-arrow:hover { transform: scale(1.08); }

/* Edges fade out while there is more to scroll */
.kct-rail::before,
.kct-rail::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: var(--kct-space-4);
    width: var(--kct-space-6);
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--kct-transition);
}

.kct-rail::before { left: 0; background: linear-gradient(to right, var(--kct-color-bg), transparent); }
.kct-rail::after { right: 0; background: linear-gradient(to left, var(--kct-color-bg), transparent); }
.kct-rail.can-prev::before, .kct-rail.can-next::after { opacity: 1; }

@media (hover: none) { .kct-rail-arrow { display: none; } }

/* Video card */
.kct-video-card .kct-card-body { padding: var(--kct-space-4); gap: var(--kct-space-1); }
.kct-video-card .kct-card-title {
    font-size: var(--kct-text-base);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Series browser: cards whose picture is the series' newest poster */
.kct-series-browser { margin-top: var(--kct-space-7); }
.kct-series-grid { --kct-grid-min: var(--kct-series-card-width); }

.kct-series-card {
    padding: 0;
    text-align: left;
    color: inherit;
    font: inherit;
}

.kct-series-card[aria-current="true"] {
    border-color: var(--kct-color-primary);
    box-shadow: 0 0 0 2px var(--kct-color-primary), var(--kct-card-shadow);
}

.kct-series-card .kct-card-body { padding: var(--kct-space-4); gap: var(--kct-space-1); }
.kct-series-card .kct-card-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kct-series-count {
    position: absolute;
    right: var(--kct-space-2);
    bottom: var(--kct-space-2);
    padding: .15rem .55rem;
    border-radius: var(--kct-radius-pill);
    background: rgba(0, 0, 0, .65);
    color: #fff;
    font-size: var(--kct-text-xs);
    font-weight: 600;
}

.kct-series-initial {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--kct-color-on-primary);
    font-family: var(--kct-font-heading);
    font-size: 3rem;
    font-weight: var(--kct-heading-weight);
    opacity: .9;
}

@media (max-width: 767.98px) {
    .kct-video-feature { grid-template-columns: 1fr; gap: var(--kct-space-4); }
}

/* ------------------------------------------------------------------
   Shared media layouts (Views/Shared/Media, js/modules/media-core.js)
   Showcase reuses the video feature / rail / series-browser styles above; these add the stage (inline
   player), the Playlist layout, Grid, Single, and bits every layout uses.
   ------------------------------------------------------------------ */
.kct-media { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--kct-space-6); }   /* minmax(0,…): a wide rail must scroll, not widen the page */

/* Inline player: starts as the poster with a play button, becomes the player on click. */
.kct-media-stage {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--kct-radius-lg);
    overflow: hidden;
    background: #0b0e13;
}

.kct-media-stage.is-portrait { aspect-ratio: 9 / 16; max-height: 80vh; margin-inline: auto; }
.kct-media-stage.is-audio { aspect-ratio: auto; min-height: 9rem; display: grid; align-items: end; padding: var(--kct-space-4);
    background: linear-gradient(135deg, var(--kct-color-primary), color-mix(in srgb, var(--kct-color-primary) 40%, #000)); }
.kct-media-stage > video,
.kct-media-stage > iframe { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; border: 0; border-radius: 0; }
.kct-media-stage.is-audio > audio { width: 100%; }

.kct-media-stage-poster {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.kct-media-stage-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kct-media-stage-poster .kct-video-play { position: relative; }
.kct-media-stage-poster:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--kct-color-on-primary); }
.kct-media-stage.is-audio .kct-media-stage-poster { position: static; min-height: 7rem; }

.kct-media-audio-art { font-size: 2.5rem; color: color-mix(in srgb, var(--kct-color-on-primary) 85%, transparent); }
.kct-video-card.is-audio .kct-card-media { background: linear-gradient(135deg, var(--kct-color-primary), color-mix(in srgb, var(--kct-color-primary) 45%, #000)); display: grid; place-items: center; }

.kct-media-duration {
    position: absolute;
    right: var(--kct-space-2);
    bottom: var(--kct-space-2);
    padding: .05rem .4rem;
    border-radius: var(--kct-radius-sm);
    background: rgba(0, 0, 0, .75);
    color: #fff;
    font-size: var(--kct-text-xs);
    font-variant-numeric: tabular-nums;
}

.kct-media-now { display: grid; gap: var(--kct-space-1); padding-top: var(--kct-space-3); }
.kct-media-now h3 { margin: 0; font-size: var(--kct-h4); }
.kct-media-now-text { color: var(--kct-color-text-muted); }
.kct-media-now-text:empty { display: none; }

.kct-media-problem {
    padding: var(--kct-space-3) var(--kct-space-4);
    border-left: 4px solid var(--kct-color-warning);
    border-radius: 0 var(--kct-radius) var(--kct-radius) 0;
    background: color-mix(in srgb, var(--kct-color-warning) 10%, var(--kct-color-surface));
    font-size: var(--kct-text-sm);
}
.kct-media-problem .kct-meta { display: block; margin-top: var(--kct-space-1); }

/* ---- Playlist: player | list ---- */
.kct-media-playlist-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
    gap: var(--kct-space-5);
    align-items: start;
}

.kct-media-list {
    display: flex;
    flex-direction: column;
    max-height: min(42rem, 80vh);
    border: var(--kct-border-width) solid var(--kct-color-border);
    border-radius: var(--kct-radius-lg);
    background: var(--kct-color-surface);
    overflow: hidden;
}

.kct-media-list-head { display: grid; gap: var(--kct-space-2); padding: var(--kct-space-3); border-bottom: var(--kct-border-width) solid var(--kct-color-border); background: var(--kct-color-surface-alt); }
.kct-media-items { list-style: none; margin: 0; padding: var(--kct-space-1); overflow-y: auto; }
.kct-media-items > li { position: relative; }
.kct-media-list > .kct-empty { margin: var(--kct-space-3); }

.kct-media-item {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: var(--kct-space-3);
    align-items: center;
    width: 100%;
    padding: var(--kct-space-2);
    border: 0;
    border-radius: var(--kct-radius);
    background: none;
    color: var(--kct-color-text);
    text-align: left;
    cursor: pointer;
}
.kct-media-item:hover { background: var(--kct-color-surface-alt); }
.kct-media-item:focus-visible { outline: none; box-shadow: var(--kct-focus-ring); }
.kct-media-item[aria-current="true"] { background: color-mix(in srgb, var(--kct-color-primary) 10%, var(--kct-color-surface)); }
.kct-media-item[aria-current="true"] .kct-media-item-title { color: var(--kct-color-primary); }

.kct-media-item-thumb {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    border-radius: var(--kct-radius-sm);
    overflow: hidden;
    background: color-mix(in srgb, var(--kct-color-primary) 18%, var(--kct-color-surface-alt));
    color: var(--kct-color-primary);
}
.kct-media-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.kct-media-item-text { display: grid; gap: .15rem; min-width: 0; }
.kct-media-item-title { font-weight: 600; font-size: var(--kct-text-sm); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kct-media-item .kct-meta { font-size: var(--kct-text-xs); }

/* ---- Grid / Single ---- */
.kct-media-section { display: grid; gap: var(--kct-space-3); }
.kct-media-grid { --kct-grid-min: 15rem; }
.kct-media-single { max-width: 60rem; }

@media (max-width: 991.98px) {
    .kct-media-playlist-body { grid-template-columns: 1fr; }
    .kct-media-list { max-height: 28rem; }
}

/* ---- YouTube module: settings dialog ---- */
.kct-yt-settings { display: grid; gap: var(--kct-space-5); }
.kct-yt-section { display: grid; gap: var(--kct-space-3); }
.kct-yt-section h3 { margin: 0; font-size: var(--kct-h4); display: flex; align-items: center; gap: var(--kct-space-2); }
.kct-yt-section > p { margin: 0; }

.kct-yt-sources { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--kct-space-2); }
.kct-yt-sources:empty { display: none; }
.kct-yt-source {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr) auto;
    gap: var(--kct-space-3);
    align-items: start;
    padding: var(--kct-space-3);
    border: var(--kct-border-width) solid var(--kct-color-border);
    border-radius: var(--kct-radius);
    background: var(--kct-color-surface);
}
.kct-yt-thumb {
    aspect-ratio: 16 / 9;
    border-radius: var(--kct-radius-sm);
    background: var(--kct-color-surface-alt) center / cover no-repeat;
    position: relative;
}
.kct-yt-thumb.is-playlist::after {
    content: "☰";
    position: absolute;
    inset: auto 0 0 auto;
    padding: .1rem .4rem;
    border-radius: var(--kct-radius-sm) 0 0 0;
    background: rgba(0, 0, 0, .7);
    color: #fff;
    font-size: var(--kct-text-xs);
}
.kct-yt-source-main { display: grid; gap: var(--kct-space-1); min-width: 0; }
.kct-yt-preview { font-size: var(--kct-text-sm); overflow-wrap: anywhere; }
.kct-yt-preview.is-error { color: var(--kct-color-danger); }
.kct-yt-warning { margin-top: .15rem; color: color-mix(in srgb, var(--kct-color-warning) 70%, var(--kct-color-text)); font-size: var(--kct-text-xs); }
.kct-yt-source-tools { display: flex; flex-direction: column; align-items: stretch; gap: var(--kct-space-1); }
.kct-yt-source:first-child [data-move="-1"],
.kct-yt-source:last-child [data-move="1"] { visibility: hidden; }

.kct-yt-add { display: flex; gap: var(--kct-space-2); }
.kct-yt-add .form-control { flex: 1 1 auto; }
.kct-yt-add[hidden] { display: none; }

/* Choice cards (layout, playlist display) */
.kct-yt-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--kct-space-2); }
.kct-yt-choices.is-compact { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.kct-yt-choices label {
    position: relative;
    display: grid;
    gap: .2rem;
    padding: var(--kct-space-3) var(--kct-space-3) var(--kct-space-3) 2.25rem;
    border: var(--kct-border-width) solid var(--kct-color-border);
    border-radius: var(--kct-radius);
    cursor: pointer;
    font-size: var(--kct-text-sm);
}
.kct-yt-choices label span { color: var(--kct-color-text-muted); font-size: var(--kct-text-xs); }
.kct-yt-choices input { position: absolute; left: .8rem; top: 1rem; }
.kct-yt-choices label:has(input:checked) { border-color: var(--kct-color-primary); background: color-mix(in srgb, var(--kct-color-primary) 7%, var(--kct-color-surface)); }
.kct-yt-choices label:focus-within { box-shadow: var(--kct-focus-ring); }

.kct-yt-key { padding: var(--kct-space-4); border-radius: var(--kct-radius); background: var(--kct-color-surface-alt); }
.kct-yt-help summary { cursor: pointer; font-weight: 600; color: var(--kct-color-link); }
.kct-yt-help ol { margin: var(--kct-space-2) 0; padding-left: 1.25rem; display: grid; gap: var(--kct-space-1); font-size: var(--kct-text-sm); }
.kct-yt-help p { font-size: var(--kct-text-sm); }

@media (max-width: 575.98px) {
    .kct-yt-source { grid-template-columns: 5rem minmax(0, 1fr); }
    .kct-yt-source-tools { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
}

/* Media item dialog: optional multi-format video sources tucked away */
.kct-media-advanced { margin: var(--kct-space-2) 0 var(--kct-space-3); padding: var(--kct-space-2) var(--kct-space-3); border: var(--kct-border-width) dashed var(--kct-color-border); border-radius: var(--kct-radius); }
.kct-media-advanced summary { cursor: pointer; font-weight: 600; font-size: var(--kct-text-sm); }
.kct-new-series { margin: calc(-1 * var(--kct-space-1)) 0 var(--kct-space-3); }
.kct-new-series-form { display: flex; gap: var(--kct-space-2); align-items: center; }
.kct-new-series-form[hidden] { display: none; }


/*
 * KCT framework — 45-hero.css
 * The hero band (PageHero view component): a video or picture filling the band, a tint over it, the words centred.
 * Configured per site (Site admin → Hero) and per page (Page settings → Hero band). Themes restyle .kct-hero and its
 * parts; the two custom properties come from the settings (height, how dark the tint is).
 */
:root {
    --kct-hero-height: 32rem;
    --kct-hero-overlay: .4;
    --kct-hero-color: #fff;
}

.kct-hero {
    position: relative;
    display: grid;
    place-items: center;
    min-height: var(--kct-hero-height);
    overflow: hidden;
    background: var(--kct-color-primary);
    color: var(--kct-hero-color);
    text-align: center;
    isolation: isolate;                      /* the media and the tint stack inside the band, never behind the page */
}

.kct-hero-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.kct-hero-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, var(--kct-hero-overlay)); z-index: 1; }

.kct-hero-body { position: relative; z-index: 2; padding: var(--kct-space-8) var(--kct-space-4); }

.kct-hero-heading {
    margin: 0;
    color: inherit;
    font-size: clamp(2rem, 5vw, 3.75rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.01em;
}

.kct-hero-sub { margin: var(--kct-space-3) 0 0; color: inherit; font-size: clamp(1.1rem, 2.2vw, 1.6rem); line-height: 1.3; opacity: .95; }

/* Outlined on the picture. Three classes, so the base rule that paints a bare .btn as the primary button loses. */
.kct-hero .kct-hero-button.btn {
    margin-top: var(--kct-space-5);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: currentColor;
    --bs-btn-color: inherit;
    --bs-btn-hover-bg: rgba(255, 255, 255, .15);
    --bs-btn-hover-border-color: currentColor;
    --bs-btn-hover-color: inherit;
    --bs-btn-active-bg: rgba(255, 255, 255, .25);
    --bs-btn-active-border-color: currentColor;
    --bs-btn-active-color: inherit;
    letter-spacing: .08em;
    text-transform: uppercase;
}

@media (max-width: 767px) {
    .kct-hero { min-height: min(var(--kct-hero-height), 70vh); }
}

/*
 * KCT framework — 50-commerce.css
 * Products List, View Product, Shopping Cart, Checkout, Order Summary, Subscriptions.
 * Shared pieces: .kct-price, .kct-qty (stepper), .kct-summary (totals panel), .kct-address (address card).
 */

/* ---- Price ---- */
.kct-price {
    color: var(--kct-price-color);
    font-weight: var(--kct-price-weight);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.kct-price-lg { font-size: var(--kct-h3); }
.kct-price small { color: var(--kct-color-text-muted); font-size: var(--kct-text-sm); font-weight: 400; }

/* ---- Quantity stepper: − [n] + ---- */
.kct-qty {
    display: inline-flex;
    align-items: stretch;
    border: var(--kct-border-width) solid var(--kct-field-border-color);
    border-radius: var(--kct-radius-pill);
    overflow: hidden;
    background: var(--kct-color-surface);
}

.kct-qty button {
    width: 2.25rem;
    border: 0;
    background: transparent;
    color: var(--kct-color-text);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.kct-qty button:hover { background: var(--kct-color-surface-alt); }
.kct-qty button:disabled { opacity: .35; cursor: default; }

.kct-qty input {
    width: 3rem;
    border: 0;
    background: transparent;
    color: var(--kct-color-text);
    text-align: center;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
}

.kct-qty input::-webkit-outer-spin-button,
.kct-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.kct-qty input:focus { outline: none; }

/* ---- Product image (picture or monogram placeholder) ---- */
.kct-product-media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, var(--kct-color-primary-soft), var(--kct-color-surface-alt));
    overflow: hidden;
}

.kct-product-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.kct-product-monogram {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: color-mix(in srgb, var(--kct-color-primary) 55%, transparent);
    font-family: var(--kct-font-heading);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: var(--kct-heading-weight);
    letter-spacing: .04em;
}

/* ---- Products List ---- */
.kct-product-group + .kct-product-group { margin-top: var(--kct-space-7); }
.kct-product-grid { --kct-grid-min: 15rem; }

.kct-product-card .kct-card-title a { color: inherit; text-decoration: none; }
.kct-product-card .kct-card-title a::after { content: ""; position: absolute; inset: 0; }   /* whole card clickable */
.kct-product-card .kct-card-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kct-product-card .kct-card-footer { position: relative; z-index: 1; }   /* buttons above the card link */

/* ---- View Product ---- */
.kct-product {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--kct-space-7);
    align-items: start;
}

.kct-gallery-main {
    border-radius: var(--kct-radius-lg);
    border: var(--kct-border-width) solid var(--kct-color-border);
    overflow: hidden;
}

.kct-gallery-main .kct-product-media { aspect-ratio: 1; }

.kct-gallery-thumbs {
    display: flex;
    gap: var(--kct-space-2);
    margin-top: var(--kct-space-3);
    overflow-x: auto;
}

.kct-gallery-thumbs button {
    flex: none;
    width: 4.5rem;
    aspect-ratio: 1;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--kct-radius-sm);
    overflow: hidden;
    background: var(--kct-color-surface-alt);
    cursor: pointer;
}

.kct-gallery-thumbs button[aria-current="true"] { border-color: var(--kct-color-primary); }
.kct-gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

.kct-product-info { display: flex; flex-direction: column; gap: var(--kct-space-4); }
.kct-product-info h2 { margin: 0; }
.kct-product-description { color: var(--kct-color-text); }
.kct-product-description > :last-child { margin-bottom: 0; }

.kct-specs { display: grid; grid-template-columns: max-content 1fr; gap: var(--kct-space-1) var(--kct-space-5); margin: 0; font-size: var(--kct-text-sm); }
.kct-specs dt { color: var(--kct-color-text-muted); font-weight: 500; }
.kct-specs dd { margin: 0; }

.kct-buy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kct-space-3);
    padding: var(--kct-space-4);
    border-radius: var(--kct-radius);
    background: var(--kct-summary-bg);
}

.kct-stock { font-size: var(--kct-text-sm); font-weight: 600; }
.kct-stock.is-in { color: var(--kct-color-success); }
.kct-stock.is-out { color: var(--kct-color-danger); }

/* ---- Cart + Checkout layout: content | sticky summary ---- */
.kct-cart,
.kct-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
    gap: var(--kct-space-6);
    align-items: start;
}

.kct-cart-lines { display: grid; gap: var(--kct-space-3); margin: 0; padding: 0; list-style: none; }

.kct-cart-line {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr) auto auto;
    gap: var(--kct-space-4);
    align-items: center;
    padding: var(--kct-space-3);
    border: var(--kct-border-width) solid var(--kct-color-border);
    border-radius: var(--kct-radius);
    background: var(--kct-color-surface);
}

.kct-cart-line .kct-product-media { border-radius: var(--kct-radius-sm); aspect-ratio: 1; }
.kct-cart-line .kct-product-monogram { font-size: 1.25rem; }
.kct-cart-line h3 { margin: 0; font-size: var(--kct-text-base); }
.kct-cart-line-total { min-width: 5.5rem; text-align: right; }
.kct-cart-remove { padding: 0; border: 0; background: none; color: var(--kct-color-text-muted); font-size: var(--kct-text-sm); text-decoration: underline; cursor: pointer; }
.kct-cart-remove:hover { color: var(--kct-color-danger); }

.kct-summary {
    position: sticky;
    top: calc(var(--kct-summary-sticky-top) + var(--kct-summary-offset, 0px));
    display: flex;
    flex-direction: column;
    gap: var(--kct-space-3);
    padding: var(--kct-space-5);
    border: var(--kct-border-width) solid var(--kct-color-border);
    border-radius: var(--kct-radius-lg);
    background: var(--kct-summary-bg);
}

.kct-summary h3 { margin: 0 0 var(--kct-space-1); font-size: var(--kct-h4); }
.kct-summary-row { display: flex; justify-content: space-between; gap: var(--kct-space-3); font-size: var(--kct-text-sm); }
.kct-summary-row > :last-child { font-variant-numeric: tabular-nums; }
.kct-summary-total {
    padding-top: var(--kct-space-3);
    border-top: var(--kct-border-width) solid var(--kct-color-border);
    font-size: var(--kct-text-lg);
    font-weight: 700;
    color: var(--kct-color-heading);
}

.kct-summary .btn { width: 100%; }
.kct-summary-note { margin: 0; color: var(--kct-color-text-muted); font-size: var(--kct-text-xs); text-align: center; }

/* Mini line list inside a summary (checkout, receipt) */
.kct-summary-items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--kct-space-2); font-size: var(--kct-text-sm); }
.kct-summary-items li { display: flex; justify-content: space-between; gap: var(--kct-space-3); }
.kct-summary-items .kct-meta { font-size: var(--kct-text-xs); }

/* ---- Checkout ---- */
.kct-checkout-steps { display: grid; gap: var(--kct-space-5); }

.kct-step {
    padding: var(--kct-space-5);
    border: var(--kct-border-width) solid var(--kct-color-border);
    border-radius: var(--kct-radius-lg);
    background: var(--kct-color-surface);
}

.kct-step-header { display: flex; align-items: center; gap: var(--kct-space-3); margin-bottom: var(--kct-space-4); }
.kct-step-header h3 { margin: 0; font-size: var(--kct-h4); flex: 1 1 auto; }

.kct-step-number {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--kct-color-primary);
    color: var(--kct-color-on-primary);
    font-size: var(--kct-text-sm);
    font-weight: 700;
}

.kct-addresses { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--kct-space-4); }

.kct-address {
    position: relative;
    padding: var(--kct-space-4);
    border: var(--kct-border-width) solid var(--kct-color-border);
    border-radius: var(--kct-radius);
    font-size: var(--kct-text-sm);
    line-height: 1.5;
}

.kct-address h4 {
    margin: 0 0 var(--kct-space-2);
    color: var(--kct-color-text-muted);
    font-size: var(--kct-text-xs);
    letter-spacing: var(--kct-eyebrow-tracking);
    text-transform: uppercase;
}

.kct-address .btn-link { position: absolute; top: var(--kct-space-2); right: var(--kct-space-2); font-size: var(--kct-text-sm); }

/* ---- Order Summary (receipt) ---- */

.kct-receipt-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kct-space-4);
    margin-bottom: var(--kct-space-6);
    padding: var(--kct-space-5);
    border-radius: var(--kct-radius-lg);
    background: color-mix(in srgb, var(--kct-color-success) 10%, var(--kct-color-surface));
    border: var(--kct-border-width) solid color-mix(in srgb, var(--kct-color-success) 30%, transparent);
}

.kct-receipt-check {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--kct-color-success);
    color: #fff;
    font-size: 1.4rem;
}

.kct-receipt-header h2 { margin: 0; font-size: var(--kct-h3); }
.kct-receipt-order { font-family: var(--kct-font-mono); font-size: var(--kct-text-sm); color: var(--kct-color-text-muted); overflow-wrap: anywhere; }

/* ---- Subscriptions: plan cards ---- */
.kct-plans { --kct-grid-min: 16rem; }
.kct-plan .kct-card-body { gap: var(--kct-space-3); }
.kct-plan-interval { color: var(--kct-color-text-muted); font-size: var(--kct-text-sm); }
.kct-plan.is-free { border-color: color-mix(in srgb, var(--kct-color-success) 40%, var(--kct-card-border)); }

/* ---- Narrow screens ---- */
@media (max-width: 991.98px) {
    .kct-cart, .kct-checkout, .kct-product { grid-template-columns: 1fr; }
    .kct-summary { position: static; }
}

@media (max-width: 575.98px) {
    .kct-cart-line { grid-template-columns: 4rem minmax(0, 1fr); }
    .kct-cart-line > .kct-qty, .kct-cart-line > .kct-cart-line-total { grid-column: 2; justify-self: start; text-align: left; }
}

/*
 * KCT framework — 60-content.css
 * Text, Text / Picture, Blog, Blog Feed.
 * Shared pieces: .kct-prose (rich text), .kct-date-badge, .kct-pager, .kct-thumbs (picture grid), .kct-lightbox.
 * Tokens only; a theme changes these through 00-variables.css.
 */

/* ---- Content tokens (themes may override) ---- */
:root {
    --kct-prose-measure: 72ch;                 /* comfortable line length for long reading (blog posts) */
    --kct-post-clamp: 12rem;                   /* height of a post before "Read more" */
    --kct-thumb-min: 9rem;                     /* smallest picture tile in a .kct-thumbs grid */
    --kct-date-badge-bg: var(--kct-color-primary);
    --kct-date-badge-color: var(--kct-color-on-primary);
}

/* ---- Rich text ---- */
/* Mild on purpose: this wraps content authored under 4.8 themes, so it only fixes rhythm and overflow. */
.kct-prose > :first-child { margin-top: 0; }
.kct-prose > :last-child { margin-bottom: 0; }
.kct-prose img { max-width: 100%; height: auto; }
.kct-prose table { max-width: 100%; }
.kct-prose blockquote {
    margin: var(--kct-space-4) 0;
    padding: var(--kct-space-2) var(--kct-space-4);
    border-left: 3px solid var(--kct-color-primary);
    color: var(--kct-color-text-muted);
}
.kct-prose pre,
.kct-prose code { font-family: var(--kct-font-mono); font-size: .9em; }
.kct-prose pre { padding: var(--kct-space-3); border-radius: var(--kct-radius-sm); background: var(--kct-color-surface-alt); overflow-x: auto; }

/* ---- Date badge: SEP / 19 ---- */
.kct-date-badge {
    flex: none;
    display: grid;
    grid-template-rows: auto 1fr;
    width: 3.5rem;
    border-radius: var(--kct-radius);
    overflow: hidden;
    text-align: center;
    line-height: 1;
    background: var(--kct-color-surface);
    border: var(--kct-border-width) solid var(--kct-color-border);
    box-shadow: var(--kct-shadow-sm);
}

.kct-date-badge span {
    padding: .3rem 0;
    background: var(--kct-date-badge-bg);
    color: var(--kct-date-badge-color);
    font-size: var(--kct-text-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.kct-date-badge strong {
    display: grid;
    place-items: center;
    padding: .35rem 0 .45rem;
    color: var(--kct-color-heading);
    font-family: var(--kct-font-heading);
    font-size: 1.4rem;
}

.kct-date-badge-sm { width: 2.75rem; }
.kct-date-badge-sm strong { font-size: 1.1rem; padding: .25rem 0 .3rem; }

/* ---- Blog ---- */
.kct-posts { display: grid; gap: var(--kct-space-6); }

.kct-post {
    display: flex;
    gap: var(--kct-space-5);
    align-items: flex-start;
    padding-bottom: var(--kct-space-6);
    border-bottom: var(--kct-border-width) solid var(--kct-color-border);
    scroll-margin-top: calc(var(--kct-summary-sticky-top, 5rem) + var(--kct-space-4));
}

.kct-post:last-child { border-bottom: 0; padding-bottom: 0; }
.kct-post:target .kct-post-title { color: var(--kct-color-primary); }

.kct-post-main { flex: 1 1 auto; min-width: 0; max-width: var(--kct-prose-measure); }
.kct-post-main > header { margin-bottom: var(--kct-space-3); }
.kct-post-title { margin: 0 0 var(--kct-space-1); font-size: var(--kct-h3); line-height: 1.25; }

.kct-post-body { position: relative; }
.kct-post-body > :first-child { margin-top: 0; }
.kct-post-body > :last-child { margin-bottom: 0; }
.kct-post-body img { max-width: 100%; height: auto; }

.kct-post-body[data-kct-clamp]:not(.is-open) {
    max-height: var(--kct-post-clamp);
    overflow: hidden;
}

/* Fade only when something is actually cut off (read-more.js sets .is-clamped). */
.kct-post-body.is-clamped:not(.is-open) {
    -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent);
            mask-image: linear-gradient(to bottom, #000 65%, transparent);
}

.kct-post-more {
    margin-top: var(--kct-space-2);
    padding: 0;
    border: 0;
    background: none;
    color: var(--kct-color-link);
    font-weight: 600;
    cursor: pointer;
}

.kct-post-more:hover { text-decoration: underline; }
.kct-post-more:focus-visible { outline: none; box-shadow: var(--kct-focus-ring); border-radius: var(--kct-radius-sm); }

.kct-post-tools { display: flex; gap: var(--kct-space-2); margin-top: var(--kct-space-3); }

/* ---- Pager (Blog; usable by any server-paged list) ---- */
.kct-pager {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kct-space-1);
    justify-content: center;
    margin-top: var(--kct-space-6);
}

.kct-pager > a,
.kct-pager > span {
    min-width: 2.25rem;
    padding: .4rem .75rem;
    border-radius: var(--kct-radius-pill);
    border: var(--kct-border-width) solid var(--kct-color-border);
    color: var(--kct-color-text);
    text-align: center;
    text-decoration: none;
    font-size: var(--kct-text-sm);
    font-variant-numeric: tabular-nums;
}

.kct-pager > a:hover { border-color: var(--kct-color-primary); color: var(--kct-color-primary); }
.kct-pager > [aria-current="page"] { background: var(--kct-color-primary); border-color: var(--kct-color-primary); color: var(--kct-color-on-primary); font-weight: 600; }

/* ---- Blog Feed ---- */
.kct-feed-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--kct-space-2) var(--kct-space-4);
    margin-bottom: var(--kct-space-4);
}

.kct-feed-title { margin: 0; font-size: var(--kct-h3); }
.kct-feed-all { font-size: var(--kct-text-sm); font-weight: 600; text-decoration: none; }
.kct-feed-all:hover { text-decoration: underline; }

.kct-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--kct-space-2); }

.kct-feed-item {
    position: relative;
    display: flex;
    gap: var(--kct-space-4);
    align-items: flex-start;
    padding: var(--kct-space-3);
    margin: 0 calc(-1 * var(--kct-space-3));
    border-radius: var(--kct-radius);
    transition: background-color var(--kct-transition);
}

.kct-feed-item:hover,
.kct-feed-item:focus-within { background: var(--kct-color-surface-alt); }

.kct-feed-main { min-width: 0; }
.kct-feed-link { color: var(--kct-color-heading); font-family: var(--kct-font-heading); font-size: var(--kct-text-lg); font-weight: 600; line-height: 1.3; text-decoration: none; }
.kct-feed-link::after { content: ""; position: absolute; inset: 0; }        /* whole item clickable */
.kct-feed-item:hover .kct-feed-link { color: var(--kct-color-primary); }
.kct-feed-excerpt {
    margin: var(--kct-space-1) 0;
    color: var(--kct-color-text-muted);
    font-size: var(--kct-text-sm);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.kct-feed-item .kct-meta { margin: 0; font-size: var(--kct-text-xs); }

/* ---- Text / Picture: sections ---- */
.kct-sections { display: grid; gap: var(--kct-space-7); }
.kct-section-title { margin: 0 0 var(--kct-space-3); font-size: var(--kct-h3); }
.kct-section-tools { display: flex; flex-wrap: wrap; gap: var(--kct-space-2); margin-bottom: var(--kct-space-3); }
.kct-section > .kct-prose + .kct-thumbs { margin-top: var(--kct-space-5); }

/* ---- Picture grid ---- */
.kct-thumbs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--kct-thumb-min), 1fr));
    gap: var(--kct-space-3);
}

/* Image Library: the pictures are the content. Same-size tiles, the rows centred as a block; a track never grows past
   12rem, so a stored 160x120 thumbnail is not blown up on a wide screen. */
.kct-thumbs-lg { --kct-thumb-min: 10rem; grid-template-columns: repeat(auto-fill, minmax(var(--kct-thumb-min), 12rem)); justify-content: center; }
.kct-thumbs-lg .kct-thumb-open { box-shadow: var(--kct-shadow-sm); }
.kct-thumbs-lg .kct-thumb-open:hover { box-shadow: var(--kct-shadow); }
.kct-thumbs-lg .kct-thumb[hidden] { display: none; }

/* "Show more": a library shows its first page of pictures; the button reveals the next page (lazy thumbnails,
   so a hidden tile costs nothing). The lightbox still pages through every picture. */
.kct-thumbs-more { display: flex; justify-content: center; margin-top: var(--kct-space-5); }
/* Pictures under their categories (Image Library): a chip per category to jump to, a heading per group. */
.kct-thumbs-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--kct-space-2); margin-bottom: var(--kct-space-5); }
.kct-thumbs-cats-count { opacity: .6; font-size: var(--kct-text-xs); font-variant-numeric: tabular-nums; margin-left: .25em; }
.kct-thumbs-group + .kct-thumbs-group { margin-top: var(--kct-space-6); }
.kct-thumbs-group-title { text-align: center; font-size: var(--kct-text-lg); margin: 0 0 var(--kct-space-3); }

.kct-thumb { position: relative; display: flex; flex-direction: column; gap: var(--kct-space-1); min-width: 0; }

.kct-thumb-open {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    padding: 0;
    border: 0;
    border-radius: var(--kct-radius);
    overflow: hidden;
    background: var(--kct-color-surface-alt);
    cursor: zoom-in;
}

.kct-thumb-open img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--kct-transition); }
.kct-thumb-open:hover img { transform: scale(1.04); }
.kct-thumb-open:focus-visible { outline: none; box-shadow: var(--kct-focus-ring); }
.kct-thumb-caption { color: var(--kct-color-text-muted); font-size: var(--kct-text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The file behind a tile is gone (the thumbnail failed to load, imagelibrary.module.js adds .is-missing): hidden for
   visitors, marked for an editor (.kct-thumbs.can-edit), who can remove the row. */
.kct-thumbs:not(.can-edit) .kct-thumb.is-missing { display: none; }
.kct-thumbs.can-edit .kct-thumb.is-missing .kct-thumb-open { outline: 2px dashed var(--kct-color-danger); outline-offset: -2px; }
.kct-thumbs.can-edit .kct-thumb.is-missing .kct-thumb-open::after { content: "File missing"; display: grid; place-items: center; height: 100%; color: var(--kct-color-danger); font-size: var(--kct-text-xs); }
.kct-thumbs.can-edit .kct-thumb.is-missing .kct-thumb-open img { display: none; }

.kct-thumb-tools { display: flex; gap: var(--kct-space-3); font-size: var(--kct-text-xs); }
.kct-thumb-tools button { padding: 0; border: 0; background: none; color: var(--kct-color-link); text-decoration: underline; cursor: pointer; }
.kct-thumb-tools button.is-danger { color: var(--kct-color-danger); }

/* ---- Lightbox (native <dialog>) ---- */
.kct-lightbox {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: var(--kct-space-6) var(--kct-space-8);
    border: 0;
    background: transparent;
    color: #fff;
}

.kct-lightbox::backdrop { background: rgba(8, 10, 14, .88); }

.kct-lightbox figure {
    height: 100%;
    margin: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    place-items: center;
    gap: var(--kct-space-3);
}

.kct-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--kct-radius-sm); box-shadow: var(--kct-shadow-lg); transition: opacity .15s; }
.kct-lightbox figure.is-loading img { opacity: .4; }
.kct-lightbox figcaption { display: flex; justify-content: center; gap: var(--kct-space-4); font-size: var(--kct-text-sm); opacity: .85; text-align: center; min-height: 1.5em; }
.kct-lightbox-count { white-space: nowrap; font-variant-numeric: tabular-nums; opacity: .7; }
.kct-lightbox-title:empty { display: none; }
.kct-lightbox figure.is-missing img { display: none; }
.kct-lightbox figure.is-missing::before { content: "\f03e"; font-family: "Font Awesome 6 Free", "Font Awesome 5 Free"; font-weight: 400; font-size: 4rem; opacity: .35; }

.kct-lightbox button {
    position: absolute;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

.kct-lightbox button:hover { background: rgba(255, 255, 255, .24); }
.kct-lightbox button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.kct-lightbox-close { top: var(--kct-space-4); right: var(--kct-space-4); }
.kct-lightbox-prev { left: var(--kct-space-3); top: 50%; transform: translateY(-50%); }
.kct-lightbox-next { right: var(--kct-space-3); top: 50%; transform: translateY(-50%); }

/* ---- 4.8 module frame ----
   Converted sites whose themes style the 4.8 ModuleViewer wrapper keep it in their Parts view:
   div#pnlModToolbar_<id>.ui-state-default.module_wrapper[data-type=ModuleViewer] > div. On 4.8 the framework's
   embedded ModuleBase.css painted over the jQuery-UI / theme wrapper background (themes set .module_wrapper to
   white, which otherwise hides a z-index:-1 background video behind it), zeroed its border and gave it a floor. */
.ui-state-default[data-type='ModuleViewer'] {
    background-color: transparent !important;
    background-image: none !important;
    color: inherit;
    border-width: 0;
    list-style: none;
}
.module_wrapper { min-height: 100px; }

/* ---- Document (PDF Viewer) ---- */
.kct-doc {
    border: var(--kct-border-width) solid var(--kct-color-border);
    border-radius: var(--kct-radius-lg);
    background: var(--kct-color-surface);
    overflow: hidden;
}

.kct-doc-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kct-space-3) var(--kct-space-4);
    padding: var(--kct-space-4) var(--kct-space-5);
    border-bottom: var(--kct-border-width) solid var(--kct-color-border);
}

.kct-doc-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 3.25rem;
    border-radius: var(--kct-radius-sm);
    background: color-mix(in srgb, var(--kct-color-danger) 12%, var(--kct-color-surface));
    color: var(--kct-color-danger);
    font-size: var(--kct-text-xs);
    font-weight: 800;
    letter-spacing: .04em;
}

.kct-doc-text { flex: 1 1 14rem; min-width: 0; display: grid; gap: .15rem; }
.kct-doc-title { margin: 0; font-size: var(--kct-h4); overflow-wrap: anywhere; }
.kct-doc-text .kct-meta { font-size: var(--kct-text-xs); }
.kct-doc-actions { display: flex; flex-wrap: wrap; gap: var(--kct-space-2); }
.kct-doc-description { padding: var(--kct-space-4) var(--kct-space-5) 0; color: var(--kct-color-text-muted); }

.kct-doc-frame {
    display: block;
    width: 100%;
    height: var(--kct-pdf-height, 720px);
    max-height: 85vh;
    margin-top: var(--kct-space-4);
    border: 0;
    border-top: var(--kct-border-width) solid var(--kct-color-border);
    background: var(--kct-color-surface-alt);
}

@media (max-width: 575.98px) {
    .kct-doc-frame { height: 70vh; }
}

/* ---- Search: one bar, then a ranked list (search.module.js renders the list) ---- */
.kct-module-search { max-width: var(--kct-search-width, 48rem); margin-inline: auto; }

/* The field and its button on one line; the field's own row wrapper takes the room. */
.kct-module-search .kct-search-bar {
    display: flex;
    gap: var(--kct-space-2);
    align-items: stretch;
}
.kct-module-search .kct-search-bar > .input-row { flex: 1 1 auto; display: flex; min-width: 0; margin: 0 !important; }   /* beats the field's Bootstrap mb-3, itself !important */
.kct-module-search .kct-search-bar .form-control { flex: 1 1 auto; min-height: 2.75rem; font-size: var(--kct-text-lg); }
.kct-module-search .kct-search-bar .btn { flex: none; padding-inline: var(--kct-space-5); }

.kct-search-results { margin-top: var(--kct-space-5); }
.kct-search-summary { margin: 0 0 var(--kct-space-3); color: var(--kct-color-text-muted); font-size: var(--kct-text-sm); }

.kct-search-list { list-style: none; margin: 0; padding: 0; }
.kct-search-result {
    padding: var(--kct-space-4) 0;
    border-top: var(--kct-border-width) solid var(--kct-color-border);
}
.kct-search-title { margin: 0; font-size: var(--kct-h4); overflow-wrap: anywhere; }
.kct-search-title a { color: var(--kct-color-link); text-decoration: none; }
.kct-search-title a:hover { text-decoration: underline; }
.kct-search-route { margin-top: .1rem; color: var(--kct-color-success); font-size: var(--kct-text-xs); overflow-wrap: anywhere; }
.kct-search-snippet {
    margin: var(--kct-space-2) 0 0;
    color: var(--kct-color-text);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.kct-search-result mark {
    padding: 0 .1em;
    border-radius: 2px;
    background: color-mix(in srgb, var(--kct-color-warning) 30%, transparent);
    color: inherit;
}

/* An outside index's own fields: a compact two-column list */
.kct-search-fields {
    display: grid;
    grid-template-columns: minmax(6rem, max-content) 1fr;
    gap: .1rem var(--kct-space-3);
    margin: var(--kct-space-2) 0 0;
    color: var(--kct-color-text-muted);
    font-size: var(--kct-text-xs);
}
.kct-search-fields dt { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kct-search-fields dd { margin: 0; overflow-wrap: anywhere; }

@media (max-width: 575.98px) {
    .kct-search-fields { grid-template-columns: 1fr; }
    .kct-search-fields dd { margin-bottom: var(--kct-space-1); }
}

/* Site Search (server-rendered) and Cloud Search setup notes */
.kct-search-title .kct-badge { margin-right: var(--kct-space-2); vertical-align: .15em; font-size: var(--kct-text-xs); }
.kct-search-list + .kct-pager { margin-top: var(--kct-space-5); }
.kct-sitesearch-status { margin-top: var(--kct-space-5); color: var(--kct-color-text-muted); font-size: var(--kct-text-sm); }
.kct-sitesearch-status .btn-link { padding: 0 0 0 var(--kct-space-2); vertical-align: baseline; }
.kct-cloudsearch-setup { margin-top: var(--kct-space-5); }
.kct-cloudsearch-setup summary { cursor: pointer; }
.kct-cloudsearch-setup ol { margin-top: var(--kct-space-3); padding-left: 1.25rem; }
.kct-sitesearch-bar { max-width: var(--kct-search-width, 48rem); }

/* ---- Calendar (calendar.module.js draws the grid and the list) ---- */
.kct-cal { display: grid; gap: var(--kct-space-3); }
.kct-cal-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kct-space-3); }
.kct-cal-title { margin: 0; flex: 1 1 auto; font-size: var(--kct-h4); text-align: center; }
.kct-cal-nav { display: flex; align-items: center; gap: var(--kct-space-1); }
.kct-cal-step {
    width: 2.25rem; height: 2.25rem;
    border: var(--kct-border-width) solid var(--kct-color-border);
    border-radius: 50%;
    background: var(--kct-color-surface);
    color: var(--kct-color-text);
    font-size: 1.25rem; line-height: 1;
    cursor: pointer;
}
.kct-cal-step:hover { border-color: var(--kct-color-primary); color: var(--kct-color-primary); }
.kct-cal-views { display: inline-flex; border: var(--kct-border-width) solid var(--kct-color-border); border-radius: var(--kct-radius-pill); overflow: hidden; }
.kct-cal-views button { padding: .3rem .9rem; border: 0; background: var(--kct-color-surface); color: var(--kct-color-text); font-size: var(--kct-text-sm); cursor: pointer; }
.kct-cal-views button[aria-pressed="true"] { background: var(--kct-color-primary); color: var(--kct-color-on-primary); }
.kct-cal-status { margin: 0; color: var(--kct-color-text-muted); font-size: var(--kct-text-sm); }
.kct-cal-status:empty { display: none; }

.kct-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border: var(--kct-border-width) solid var(--kct-color-border);
    border-radius: var(--kct-radius-lg);
    overflow: hidden;
    background: var(--kct-color-border);
    gap: var(--kct-border-width);
}
.kct-cal-dow { padding: .4rem; background: var(--kct-color-surface-alt); color: var(--kct-color-text-muted); font-size: var(--kct-text-xs); font-weight: 700; text-align: center; text-transform: uppercase; letter-spacing: .05em; }
.kct-cal-day { display: flex; flex-direction: column; gap: 2px; min-height: 6.5rem; padding: .3rem; background: var(--kct-color-surface); min-width: 0; }
.kct-cal-day.is-other { background: color-mix(in srgb, var(--kct-color-surface-alt) 60%, var(--kct-color-surface)); }
.kct-cal-day.is-other .kct-cal-date { color: var(--kct-color-text-muted); }
.kct-cal-date { align-self: flex-end; min-width: 1.6rem; padding: .05rem .35rem; border-radius: var(--kct-radius-pill); font-size: var(--kct-text-xs); font-weight: 600; text-align: center; }
.kct-cal-day.is-today .kct-cal-date { background: var(--kct-color-primary); color: var(--kct-color-on-primary); }

.kct-cal-chip {
    display: block; width: 100%;
    padding: .1rem .35rem;
    border: 0; border-radius: var(--kct-radius-sm);
    background: none;
    color: var(--kct-color-text);
    font-size: var(--kct-text-xs); line-height: 1.35; text-align: left;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    cursor: pointer;
}
.kct-cal-chip::before { content: ""; display: inline-block; width: .45rem; height: .45rem; margin-right: .3rem; border-radius: 50%; background: var(--kct-color-primary); vertical-align: middle; }
.kct-cal-chip:hover { background: var(--kct-color-surface-alt); }
.kct-cal-chip.is-allday { background: color-mix(in srgb, var(--kct-color-primary) 14%, var(--kct-color-surface)); color: color-mix(in srgb, var(--kct-color-primary) 75%, var(--kct-color-text)); font-weight: 600; }
.kct-cal-chip.is-allday::before { display: none; }
.kct-cal-chip.is-continued { opacity: .75; }
.kct-cal-chip:focus-visible, .kct-cal-item:focus-visible, .kct-cal-more:focus-visible { outline: none; box-shadow: var(--kct-focus-ring); }
.kct-cal-time { color: var(--kct-color-text-muted); font-variant-numeric: tabular-nums; }
.kct-cal-more { padding: 0 .35rem; border: 0; background: none; color: var(--kct-color-link); font-size: var(--kct-text-xs); font-weight: 600; text-align: left; cursor: pointer; }

.kct-cal-agenda { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--kct-space-2); }
.kct-cal-agenda > li { display: flex; gap: var(--kct-space-3); align-items: flex-start; }
.kct-cal-item { flex: 1 1 auto; display: grid; gap: .15rem; min-width: 0; padding: var(--kct-space-2) var(--kct-space-3); border: 0; border-radius: var(--kct-radius); background: none; color: var(--kct-color-text); text-align: left; cursor: pointer; }
.kct-cal-item:hover { background: var(--kct-color-surface-alt); }
.kct-cal-item .kct-cal-name { font-weight: 600; font-size: var(--kct-text-lg); color: var(--kct-color-heading); }
.kct-cal-item .kct-meta { font-size: var(--kct-text-sm); }

.kct-cal-embed iframe { display: block; width: 100%; border: 0; border-radius: var(--kct-radius-lg); background: var(--kct-color-surface); }

.kct-cal-popup { width: min(34rem, 94vw); padding: 0; border: 0; border-radius: var(--kct-radius-lg); box-shadow: var(--kct-shadow-lg); }
.kct-cal-popup::backdrop { background: rgba(8, 10, 14, .5); }
.kct-cal-popup > header { display: flex; align-items: center; gap: var(--kct-space-3); padding: var(--kct-space-3) var(--kct-space-4); border-bottom: var(--kct-border-width) solid var(--kct-color-border); }
.kct-cal-popup h3 { flex: 1 1 auto; margin: 0; font-size: var(--kct-h4); }
.kct-cal-detail-body, .kct-cal-daylist { display: grid; gap: var(--kct-space-2); padding: var(--kct-space-4); }
.kct-cal-detail-body p { margin: 0; }
.kct-cal-when-text { font-weight: 600; }
.kct-cal-description { max-height: 40vh; overflow: auto; }
.kct-cal-detail-tools { display: flex; flex-wrap: wrap; gap: var(--kct-space-2); padding-top: var(--kct-space-2); }
.kct-cal-daylist .kct-cal-chip { font-size: var(--kct-text-sm); padding: .35rem .5rem; }

/* Editor and settings */
.kct-cal-form fieldset { display: grid; gap: var(--kct-space-2); margin: 0; padding: 0; border: 0; }
.kct-cal-pair { display: flex; flex-wrap: wrap; gap: var(--kct-space-2); align-items: center; }
.kct-cal-pair > .form-control, .kct-cal-pair > .form-select { flex: 1 1 10rem; width: auto; }
.kct-cal-when { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--kct-space-3); align-items: end; }
/* "Ends (optional)": the hint sits inline on the label's line, and the columns align on their inputs either way. */
.kct-cal-form .form-label .kct-meta { display: inline; font-weight: 400; }
.kct-cal-every { display: inline-flex; align-items: center; gap: var(--kct-space-2); white-space: nowrap; }
.kct-cal-every input { width: 5rem; }
.kct-cal-days { display: flex; flex-wrap: wrap; gap: var(--kct-space-1); }
.kct-cal-days label { position: relative; }
.kct-cal-days input { position: absolute; opacity: 0; }
.kct-cal-days span { display: inline-block; min-width: 3rem; padding: .3rem .5rem; border: var(--kct-border-width) solid var(--kct-color-border); border-radius: var(--kct-radius-pill); text-align: center; font-size: var(--kct-text-sm); cursor: pointer; }
.kct-cal-days input:checked + span { background: var(--kct-color-primary); border-color: var(--kct-color-primary); color: var(--kct-color-on-primary); }
.kct-cal-days input:focus-visible + span { box-shadow: var(--kct-focus-ring); }
.kct-cal-choice { display: flex; gap: var(--kct-space-3); align-items: flex-start; padding: var(--kct-space-3); border: var(--kct-border-width) solid var(--kct-color-border); border-radius: var(--kct-radius); cursor: pointer; }
.kct-cal-choice:has(input:checked) { border-color: var(--kct-color-primary); background: color-mix(in srgb, var(--kct-color-primary) 7%, var(--kct-color-surface)); }
.kct-cal-choice span { display: grid; gap: .1rem; }
.kct-cal-choice small { color: var(--kct-color-text-muted); }

@media (max-width: 575.98px) {
    .kct-cal-day { min-height: 4rem; padding: .2rem; }
    .kct-cal-chip .kct-cal-time { display: none; }
    .kct-cal-title { order: -1; flex-basis: 100%; }
}

/* ---- Rich-text editor host inside dialogs (Kendo Editor today, kct-ui editor later) ---- */
.kct-editor-area { width: 100%; min-height: 22rem; }

/* ---- Narrow screens ---- */
@media (max-width: 575.98px) {
    .kct-post { flex-direction: column; gap: var(--kct-space-3); }
    .kct-post .kct-date-badge { display: none; }                 /* the byline carries the date */
    .kct-lightbox { padding: var(--kct-space-7) var(--kct-space-3); }
}

/* ---- Module Library (ModuleLibrary module) ---- */
.kct-library-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kct-space-3); justify-content: space-between; margin-bottom: var(--kct-space-5); }
.kct-chips { display: flex; flex-wrap: wrap; gap: var(--kct-space-2); }
.kct-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .8rem;
    border: var(--kct-border-width) solid var(--kct-color-border);
    border-radius: var(--kct-radius-pill);
    background: var(--kct-color-surface);
    color: var(--kct-color-text);
    font-size: var(--kct-text-sm);
    cursor: pointer;
}
.kct-chip span { color: var(--kct-color-text-muted); font-size: var(--kct-text-xs); font-variant-numeric: tabular-nums; }
.kct-chip:hover { border-color: var(--kct-color-primary); }
.kct-chip[aria-pressed="true"] { background: var(--kct-color-primary); border-color: var(--kct-color-primary); color: var(--kct-color-on-primary); }
.kct-chip[aria-pressed="true"] span { color: inherit; opacity: .8; }
.kct-chip:focus-visible { outline: none; box-shadow: var(--kct-focus-ring); }
.kct-library-search { max-width: 18rem; }

.kct-library-grid {
    --kct-library-cols: 4;
    display: grid;
    grid-template-columns: repeat(var(--kct-library-cols), minmax(0, 1fr));
    gap: var(--kct-space-4);
}

.kct-library-card {
    display: flex;
    flex-direction: column;
    border: var(--kct-border-width) solid var(--kct-color-border);
    border-radius: var(--kct-radius-lg);
    background: var(--kct-color-surface);
    overflow: hidden;
    transition: box-shadow var(--kct-transition), transform var(--kct-transition);
}
.kct-library-card:hover { box-shadow: var(--kct-shadow); transform: translateY(-2px); }
.kct-library-card.is-staff { background: color-mix(in srgb, var(--kct-color-surface-alt) 50%, var(--kct-color-surface)); }

/* Thumbnail: a picture, or the real page (preview mode) drawn at 1280px wide and scaled into the card. */
.kct-library-thumb {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: linear-gradient(135deg, var(--kct-color-primary-soft), var(--kct-color-surface-alt));
    border-bottom: var(--kct-border-width) solid var(--kct-color-border);
    container-type: inline-size;
}
.kct-library-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.kct-library-live {
    position: absolute;
    top: 0;
    left: 0;
    width: 1280px;
    height: 800px;
    border: 0;
    transform-origin: 0 0;
    transform: scale(var(--kct-thumb-scale, .25));   /* modulelibrary.module.js sets thumb width / 1280 */
    pointer-events: none;
    background: var(--kct-color-bg);
}
.kct-library-monogram {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: color-mix(in srgb, var(--kct-color-primary) 55%, transparent);
    font-family: var(--kct-font-heading);
    font-size: 3rem;
    font-weight: var(--kct-heading-weight);
}
.kct-library-badges { position: absolute; left: var(--kct-space-2); top: var(--kct-space-2); display: flex; gap: var(--kct-space-1); }
.kct-library-badges .kct-badge { box-shadow: var(--kct-shadow-sm); }

.kct-library-body { flex: 1 1 auto; display: grid; align-content: start; gap: var(--kct-space-1); padding: var(--kct-space-4) var(--kct-space-4) var(--kct-space-2); }
.kct-library-body h3 { margin: 0; font-size: var(--kct-text-lg); line-height: 1.3; }
.kct-library-body p { margin: 0; color: var(--kct-color-text-muted); font-size: var(--kct-text-sm); }
.kct-library-actions { display: flex; flex-wrap: wrap; gap: var(--kct-space-2); padding: var(--kct-space-2) var(--kct-space-4) var(--kct-space-4); }
.kct-library-actions .btn:disabled { opacity: .45; }
.kct-library-edit { display: flex; flex-wrap: wrap; gap: var(--kct-space-3); padding: 0 var(--kct-space-4) var(--kct-space-3); font-size: var(--kct-text-xs); }
.kct-library-edit + .kct-upload-status, .kct-library-edit .kct-upload-status { padding: 0 var(--kct-space-4); }

/* Pager buttons (the shared .kct-pager styles links/spans; the library pages in the browser) */
.kct-pager > button {
    min-width: 2.25rem;
    padding: .4rem .75rem;
    border-radius: var(--kct-radius-pill);
    border: var(--kct-border-width) solid var(--kct-color-border);
    background: var(--kct-color-surface);
    color: var(--kct-color-text);
    font-size: var(--kct-text-sm);
    cursor: pointer;
}
.kct-pager > button[aria-current="page"] { background: var(--kct-color-primary); border-color: var(--kct-color-primary); color: var(--kct-color-on-primary); font-weight: 600; }

/* Preview pop-up */
.kct-library-preview {
    width: min(72rem, 94vw);
    height: min(52rem, 90vh);
    padding: 0;
    border: 0;
    border-radius: var(--kct-radius-lg);
    box-shadow: var(--kct-shadow-lg);
    overflow: hidden;
}
.kct-library-preview[open] { display: flex; flex-direction: column; }
.kct-library-preview::backdrop { background: rgba(8, 10, 14, .6); }
.kct-library-preview header { display: flex; align-items: center; gap: var(--kct-space-3); padding: var(--kct-space-3) var(--kct-space-4); border-bottom: var(--kct-border-width) solid var(--kct-color-border); }
.kct-library-preview h2 { margin: 0; flex: 1 1 auto; font-size: var(--kct-h4); }
.kct-library-preview-body { flex: 1 1 auto; min-height: 0; overflow: auto; background: var(--kct-color-surface-alt); }
/* A page scrolls inside its own frame. An inline iframe left a baseline gap that gave the body a second scrollbar. */
.kct-library-preview-body:has(iframe) { overflow: hidden; }
.kct-library-preview-body iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--kct-color-bg); }
.kct-library-preview-body:has(img) { display: grid; place-items: center; padding: var(--kct-space-4); }
.kct-library-preview-body img { display: block; max-width: 100%; max-height: 100%; border-radius: var(--kct-radius); box-shadow: var(--kct-shadow); }

@media (max-width: 1199.98px) { .kct-library-grid { grid-template-columns: repeat(min(var(--kct-library-cols), 3), minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .kct-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kct-library-search { max-width: none; flex: 1 1 100%; } }
@media (max-width: 479.98px) { .kct-library-grid { grid-template-columns: 1fr; } }

/* ---- Content blocks: layouts an editor can use inside a Text module (see KCT-Content-Blocks.md) ----
   Tokens only, so every theme styles them. Each block is plain HTML with one class; nothing needs script. */
.kct-block { margin-block: var(--kct-space-7); }
.kct-block:first-child { margin-top: 0; }
.kct-block-intro { max-width: 46rem; margin-inline: auto; text-align: center; }
.kct-block-intro h2 { margin: 0; font-size: var(--kct-h2); }
.kct-block-intro .kct-lead { margin-top: var(--kct-space-3); }

/* A grid of cards: <div class="kct-features"><article class="kct-feature"><h3>…</h3><p>…</p><a>…</a></article>… */
/* At most three across (two for exactly two or four cards), so rows come out even: 3 × 3, 2 × 2. */
.kct-features {
    --kct-feature-cols: 3;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(15rem, calc((100% - (var(--kct-feature-cols) - 1) * var(--kct-space-4)) / var(--kct-feature-cols))), 1fr));
    gap: var(--kct-space-4);
    margin-top: var(--kct-space-5);
}
.kct-features:has(> :last-child:nth-child(4)),
.kct-features:has(> :last-child:nth-child(2)) { --kct-feature-cols: 2; }
.kct-feature { display: flex; flex-direction: column; gap: var(--kct-space-2); padding: var(--kct-space-5); border: 1px solid var(--kct-color-border); border-radius: var(--kct-radius); background: var(--kct-color-surface); }
.kct-feature h3 { margin: 0; font-size: var(--kct-h4); }
.kct-feature p { margin: 0; color: var(--kct-color-text-muted); }
.kct-feature > a:last-child { margin-top: auto; padding-top: var(--kct-space-2); font-weight: 600; }
.kct-feature-mark { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--kct-radius); background: var(--kct-color-primary-soft); color: var(--kct-color-primary); font-weight: 700; }

/* Two columns, text beside text or a picture: <div class="kct-split"><div>…</div><div>…</div></div> */
.kct-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--kct-space-6); align-items: start; }
.kct-split h2 { margin-top: 0; font-size: var(--kct-h3); }

/* A list with ticks: <ul class="kct-checks"><li>…</li></ul> */
.kct-checks { list-style: none; margin: var(--kct-space-3) 0; padding: 0; display: grid; gap: var(--kct-space-2); }
.kct-checks li { position: relative; padding-left: 1.75rem; }
.kct-checks li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--kct-color-primary); font-weight: 700; }

/* Numbered steps: <ol class="kct-numbered"><li><strong>Talk</strong> …</li></ol> */
.kct-numbered { list-style: none; counter-reset: kct-n; margin: var(--kct-space-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--kct-space-4); }
.kct-numbered li { counter-increment: kct-n; padding: var(--kct-space-4); border-top: 3px solid var(--kct-color-primary); background: var(--kct-color-surface-alt); border-radius: 0 0 var(--kct-radius) var(--kct-radius); }
.kct-numbered li::before { content: counter(kct-n); display: block; margin-bottom: var(--kct-space-2); color: var(--kct-color-primary); font-size: var(--kct-h3); font-weight: 700; line-height: 1; }
.kct-numbered strong { display: block; margin-bottom: var(--kct-space-1); }

/* A call to action band: <div class="kct-cta"><h2>…</h2><p>…</p><p><a class="btn btn-primary">…</a></p></div> */
.kct-cta { padding: var(--kct-space-6) var(--kct-space-5); border-radius: var(--kct-radius-lg); background: var(--kct-color-primary-soft); text-align: center; }
.kct-cta h2 { margin: 0 0 var(--kct-space-2); font-size: var(--kct-h3); }
.kct-cta p { margin: 0 auto var(--kct-space-4); max-width: 40rem; }
.kct-cta p:last-child { margin-bottom: 0; }
.kct-cta .btn + .btn { margin-left: var(--kct-space-2); }

/* Questions and answers: <div class="kct-faq"><details><summary>…</summary><p>…</p></details>… */
.kct-faq { display: grid; gap: var(--kct-space-2); margin-top: var(--kct-space-4); }
.kct-faq details { border: 1px solid var(--kct-color-border); border-radius: var(--kct-radius); background: var(--kct-color-surface); }
.kct-faq summary { cursor: pointer; padding: var(--kct-space-3) var(--kct-space-4); font-weight: 600; }
.kct-faq details[open] summary { border-bottom: 1px solid var(--kct-color-border); }
.kct-faq details > :not(summary) { margin: var(--kct-space-3) var(--kct-space-4); }

/* Small print at the top of a policy page */
.kct-updated { color: var(--kct-color-text-muted); font-size: var(--kct-text-sm); }
.kct-policy h2 { margin-top: var(--kct-space-6); font-size: var(--kct-h3); }
.kct-policy { max-width: var(--kct-prose-measure); }

/* =============================================================================================
   KCT framework — 65-forms-modules.css

   The modules that are a form on a page: feedback, contact, registration, subscribe, my account,
   sign-in, form submit. They share one shape, inherited from the 4.8 views:

       .kct-module
         .kct-form
           .border-wrapper            the panel around it
             .table-title             its heading
             .kct-survey-template     the stack of fields
               .input-row             one label + control
             .input-row.button-tab    the actions

   `.border-wrapper`, `.table-title` and `.kct-survey-template` had no styling at all, and
   `.input-row` / `.button-tab` were only dressed inside a dialog window (20-forms.css). On a page
   that left a form as bare labels and full-width boxes running the whole content column.

   Everything here is scoped to `.kct-module` — a page module. A form that FormService moves into a
   window leaves that subtree, so the window's own rules keep it and these never reach it.
   ============================================================================================= */

/* ---- The panel ---------------------------------------------------------------------------- */

.kct-module .border-wrapper {
    padding: var(--kct-space-5, 1.25rem);
    border: var(--kct-border-width, 1px) solid var(--kct-color-border, #d6dae1);
    border-radius: var(--kct-radius, 8px);
    background: var(--kct-window-bg, #fff);
}

/* A module that is only a form reads better as a column than as a band across the page. */
.kct-module .border-wrapper { max-width: var(--kct-form-module-width, 44rem); }

/* ...unless it holds something that genuinely wants the width, like a grid or a media list. */
.kct-module .border-wrapper:has(.tabulator),
.kct-module .border-wrapper:has(.kct-grid-tools),
.kct-module .border-wrapper:has(table) { max-width: none; }

/* ---- Its heading -------------------------------------------------------------------------- */

.kct-module .table-title {
    margin-bottom: var(--kct-space-4, 1rem);
    padding-bottom: var(--kct-space-2, .5rem);
    border-bottom: var(--kct-border-width, 1px) solid var(--kct-color-border, #d6dae1);
    color: var(--kct-color-heading, var(--kct-color-text, #1f2430));
    font-family: var(--kct-font-heading, inherit);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
}

/* ---- The fields --------------------------------------------------------------------------- */

.kct-module .kct-survey-template {
    display: grid;
    gap: var(--kct-space-4, 1rem);
}

/* The rows already carry Bootstrap's mb-3 in the views; the grid gap is the spacing that matters,
   so the margin would double it. */
.kct-module .kct-survey-template > .input-row { margin-bottom: 0 !important; }

.kct-module .input-row {
    display: grid;
    gap: var(--kct-space-1, .25rem);
}

.kct-module .input-row > .form-label {
    margin: 0;
    color: var(--kct-color-text, #1f2430);
    font-size: .8125rem;
    font-weight: 600;
}

/* A field's help text sits with the field, not adrift under it. */
.kct-module .input-row > .form-text,
.kct-module .input-row > small {
    color: var(--kct-color-muted, #6b7280);
    font-size: .78rem;
}

.kct-module .kct-survey-template textarea.form-control { min-height: 7rem; resize: vertical; }

/* ---- The actions -------------------------------------------------------------------------- */

.kct-module .button-tab {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kct-actions-gap, .5rem);
    margin-top: var(--kct-space-5, 1.25rem);
    padding-top: var(--kct-space-4, 1rem);
    border-top: var(--kct-border-width, 1px) solid var(--kct-color-border, #d6dae1);
}

/* A bare `btn` beside a primary one is the quiet choice; the views do not always say so. */
.kct-module .button-tab > .btn:not([class*="btn-"]) {
    border: var(--kct-border-width, 1px) solid var(--kct-color-border, #d6dae1);
    background: transparent;
    color: var(--kct-color-text, #1f2430);
}

.kct-module .button-tab > .btn:not([class*="btn-"]):hover {
    background: var(--kct-color-surface-alt, #f6f7f9);
}

/* ---- Two columns where a form is wide enough to want them ---------------------------------- */

@media (min-width: 40rem) {
    .kct-module .kct-survey-template.is-two-column {
        grid-template-columns: 1fr 1fr;
        column-gap: var(--kct-space-4, 1rem);
    }
    .kct-module .kct-survey-template.is-two-column > .input-row.is-wide { grid-column: 1 / -1; }
}

/* ---- Narrow screens ------------------------------------------------------------------------ */

@media (max-width: 40rem) {
    .kct-module .border-wrapper { padding: var(--kct-space-4, 1rem); }
    .kct-module .button-tab > .btn { flex: 1 1 auto; }
}

/* ==========================================================================
   Staff tools: settings pages made of panels, notes and read-only lists.
   Shared by Sign-in settings and any admin module that follows the same shape.
   ========================================================================== */

/* A short aside under a control: what the setting means, or what is true right now. */
.kct-note {
    margin: var(--kct-space-4) 0 0;
    padding: var(--kct-space-3) var(--kct-space-4);
    border-left: 3px solid var(--kct-color-border);
    border-radius: var(--kct-radius-sm);
    background: var(--kct-summary-bg);
    color: var(--kct-color-text-muted);
}

.kct-note strong { color: var(--kct-color-text); }

.kct-note.is-warning {
    border-left-color: var(--kct-color-warning, #c77700);
    background: color-mix(in srgb, var(--kct-color-warning, #c77700) 8%, var(--kct-color-surface));
}

/* ---- settings page ---- */

.kct-module-signin { display: grid; gap: var(--kct-space-5); }

.kct-signin-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kct-space-2) var(--kct-space-4);
    padding-bottom: var(--kct-space-3);
    border-bottom: var(--kct-border-width) solid var(--kct-color-border);
}

.kct-signin-nav a { color: var(--kct-color-text-muted); text-decoration: none; font-weight: 500; }
.kct-signin-nav a:hover { color: var(--kct-color-accent); text-decoration: underline; }

.kct-module-signin .kct-panel { display: grid; gap: var(--kct-space-4); scroll-margin-top: var(--kct-space-6); }
.kct-module-signin .kct-panel > header { display: grid; gap: var(--kct-space-1); }
.kct-module-signin .kct-panel > header h3 { margin: 0; }
.kct-module-signin .kct-panel > header p { margin: 0; color: var(--kct-color-text-muted); }

.kct-panel-actions { display: flex; flex-wrap: wrap; gap: var(--kct-space-3); align-items: center; }

.kct-field { display: grid; gap: var(--kct-space-1); max-width: 34rem; }
.kct-field-row { display: grid; gap: var(--kct-space-4); }

/* A switch with a heading and an explanation, stacked to the right of the control. */
.kct-field-row .kct-switch,
.kct-module-signin > section > .kct-switch { align-items: flex-start; font-weight: 400; }
.kct-field-row .kct-switch > span,
.kct-module-signin > section > .kct-switch > span { display: grid; gap: .15rem; }
.kct-switch small { color: var(--kct-color-text-muted); }
.kct-switch.is-inline { font-weight: 500; }

.kct-inline-row { display: flex; flex-wrap: wrap; gap: var(--kct-space-3); align-items: center; }
.kct-inline-row .form-select { max-width: 22rem; }

.kct-details {
    padding: var(--kct-space-3) var(--kct-space-4);
    border: var(--kct-border-width) solid var(--kct-color-border);
    border-radius: var(--kct-radius);
    background: var(--kct-color-surface);
}

.kct-details > summary { cursor: pointer; font-weight: 600; }
.kct-details[open] > summary { margin-bottom: var(--kct-space-4); }

/* ---- two-step rules ---- */

.kct-twostep { display: grid; gap: var(--kct-space-4); }

.kct-twostep-rule {
    border: var(--kct-border-width) solid var(--kct-color-border);
    border-radius: var(--kct-radius);
    background: var(--kct-color-surface);
    overflow: hidden;
}

.kct-twostep-rule > header {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kct-space-3);
    align-items: center;
    justify-content: space-between;
    padding: var(--kct-space-3) var(--kct-space-4);
    border-bottom: var(--kct-border-width) solid var(--kct-color-border);
}

.kct-twostep-rule > header h4 { margin: 0; font-size: 1rem; }
.kct-twostep-body { display: grid; gap: var(--kct-space-4); padding: var(--kct-space-4); }
.kct-twostep-add { display: grid; gap: var(--kct-space-1); max-width: 34rem; }

/* ---- providers (read-only) ---- */

.kct-provider-list { display: grid; gap: var(--kct-space-3); margin: 0; padding: 0; list-style: none; }

.kct-provider {
    padding: var(--kct-space-4);
    border: var(--kct-border-width) solid var(--kct-color-border);
    border-radius: var(--kct-radius);
    background: var(--kct-color-surface);
}

.kct-provider.is-default { border-color: color-mix(in srgb, var(--kct-color-accent) 45%, var(--kct-color-border)); }
.kct-provider.is-off { opacity: .7; }
.kct-provider h4 { margin: 0 0 var(--kct-space-1); font-size: 1rem; display: flex; flex-wrap: wrap; gap: var(--kct-space-2); align-items: center; }
.kct-provider p { margin: 0 0 var(--kct-space-1); }
.kct-provider code { word-break: break-all; }

.kct-sso-status ul { margin: var(--kct-space-2) 0 0 var(--kct-space-5); }

/* ---- password hint (registration) ---- */

.kct-password-hint { color: var(--kct-color-text-muted); }
.kct-password-hint.is-good { color: var(--kct-color-success); }

/* ---- editable lists (sign-in providers, identity providers) ---- */

.kct-provider-head { display: flex; flex-wrap: wrap; gap: var(--kct-space-3); align-items: flex-start; justify-content: space-between; }
.kct-provider-head > div:first-child { flex: 1 1 22rem; min-width: 0; }
.kct-provider-tools { display: flex; flex-wrap: wrap; gap: var(--kct-space-2); align-items: center; }

/* The one form each list edits into, below the rows. */
.kct-editor {
    display: grid;
    gap: var(--kct-space-4);
    padding: var(--kct-space-5);
    border: var(--kct-border-width) solid color-mix(in srgb, var(--kct-color-accent) 35%, var(--kct-color-border));
    border-radius: var(--kct-radius);
    background: var(--kct-color-surface);
}

.kct-editor > h4 { margin: 0; font-size: 1.05rem; }

/* ---- reading a provider's metadata ---- */

.kct-metadata {
    display: grid;
    gap: var(--kct-space-1);
    padding: var(--kct-space-4);
    border-radius: var(--kct-radius);
    background: var(--kct-summary-bg);
}

.kct-metadata .kct-inline-row .form-control { flex: 1 1 24rem; }
.kct-metadata-result { margin-top: var(--kct-space-2); font-size: .95em; }
.kct-metadata-result ul { margin: 0; padding-left: var(--kct-space-5); }
.kct-metadata-result li { margin-bottom: .2rem; }

/* ---- ways in, with the flow drawn for each ---- */

.kct-methods { display: grid; gap: var(--kct-space-4); }

.kct-method {
    display: grid;
    gap: var(--kct-space-3);
    padding: var(--kct-space-4);
    border: var(--kct-border-width) solid var(--kct-color-border);
    border-radius: var(--kct-radius);
    background: var(--kct-color-surface);
}

.kct-method.is-off { opacity: .72; }
.kct-method > header { display: flex; flex-wrap: wrap; gap: var(--kct-space-3); align-items: flex-start; justify-content: space-between; }
.kct-method > header h4 { margin: .1rem 0 .2rem; font-size: 1.05rem; }
.kct-method > header p { margin: 0; color: var(--kct-color-text-muted); }
.kct-method-badges { display: flex; flex-wrap: wrap; gap: var(--kct-space-2); }
.kct-method-link { margin: 0; }

/* The diagram: boxes in the page's own colours, scrolling sideways on a narrow screen rather than shrinking away. */
.kct-flow { margin: 0; display: grid; gap: var(--kct-space-2); }
.kct-flow > svg { display: block; width: 100%; min-width: 34rem; height: auto; overflow: visible; }
.kct-flow { overflow-x: auto; }
.kct-flow figcaption { color: var(--kct-color-text-muted); font-size: .95em; }

.kct-flow-step rect {
    fill: var(--kct-color-surface-alt, #f4f6f8);
    stroke: var(--kct-color-border);
    stroke-width: 1.5;
}

.kct-flow-step.is-site rect {
    fill: color-mix(in srgb, var(--kct-color-accent) 10%, var(--kct-color-surface));
    stroke: color-mix(in srgb, var(--kct-color-accent) 45%, var(--kct-color-border));
}

.kct-flow-step.is-away rect {
    fill: color-mix(in srgb, var(--kct-color-warning, #c77700) 10%, var(--kct-color-surface));
    stroke: color-mix(in srgb, var(--kct-color-warning, #c77700) 40%, var(--kct-color-border));
    stroke-dasharray: 5 3;
}

.kct-flow-label { font: 600 13px/1.2 inherit; fill: var(--kct-color-text); }
.kct-flow-detail { font: 400 11px/1.2 inherit; fill: var(--kct-color-text-muted); }
.kct-flow-arrow line { stroke: var(--kct-color-text-muted); stroke-width: 1.5; }
.kct-flow-arrow polygon { fill: var(--kct-color-text-muted); }

.kct-chooser ul { margin: var(--kct-space-2) 0 var(--kct-space-3) var(--kct-space-5); }
.kct-chooser li { margin-bottom: var(--kct-space-2); }

/* ---- what's installed / does this class work ---- */

.kct-detect-result { margin-top: var(--kct-space-2); font-size: .95em; }
.kct-detect-result ul { margin: 0; padding-left: var(--kct-space-5); }
.kct-detect-result li { margin-bottom: .25rem; }
.kct-detect-result .is-good { color: var(--kct-color-success); }
.kct-detect-result .is-bad { color: var(--kct-color-danger, #b3261e); }
.kct-details pre { margin: var(--kct-space-3) 0; padding: var(--kct-space-3); overflow-x: auto; border-radius: var(--kct-radius-sm); background: var(--kct-summary-bg); }
.kct-details pre code { font-size: .9em; }

/* ---- Site admin console: tools as tabs down the side ---- */

.kct-console { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: var(--kct-space-5); align-items: start; }

/* Sticks, and scrolls within the window on its own: a nav taller than the screen used to scroll away with the page,
   so seeing which tool was open meant scrolling all the way back up. */
.kct-console-nav {
    display: grid;
    gap: var(--kct-space-3);
    align-content: start;
    position: sticky;
    top: var(--kct-space-4);
    max-height: calc(100vh - 2 * var(--kct-space-4));
    overflow-y: auto;      /* its own scrollbar only when the list is taller than the window */
    padding-right: var(--kct-space-1);
    scrollbar-width: thin;
    /* No overscroll-behavior: contain here. When the list fits the window there is nothing to scroll, and
       "contain" then swallows the wheel entirely, so the page would not scroll with the mouse over the nav. */
}
.kct-console-group { display: grid; gap: .15rem; }

.kct-console-group h3 {
    margin: 0 0 .2rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--kct-color-text-muted);
}

.kct-console-nav button {
    display: block;
    width: 100%;
    padding: .3rem .6rem;
    line-height: 1.25;
    border: 0;
    border-radius: var(--kct-radius-sm);
    background: transparent;
    text-align: left;
    cursor: pointer;
    color: inherit;
}

.kct-console-nav button:hover { background: var(--kct-summary-bg); }

.kct-console-nav button[aria-selected="true"] {
    background: color-mix(in srgb, var(--kct-color-accent) 12%, var(--kct-color-surface));
    box-shadow: inset 3px 0 0 var(--kct-color-accent);
}

.kct-console-nav button strong { display: block; font-size: .88rem; font-weight: 600; }
.kct-console-nav button span { display: block; font-size: .72rem; line-height: 1.2; color: var(--kct-color-text-muted); }

.kct-console-panel { display: grid; gap: var(--kct-space-3); }

.kct-console-panel-head {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kct-space-3);
    align-items: center;
    justify-content: space-between;
}

.kct-console-panel-head h3 { margin: 0; }

.kct-console-frame {
    min-height: 26rem;
    border: var(--kct-border-width) solid var(--kct-color-border);
    border-radius: var(--kct-radius);
    background: var(--kct-color-surface);
    overflow: hidden;
}

.kct-console-frame > iframe { display: block; width: 100%; min-height: 26rem; border: 0; }   /* only the frame of a tool that still loads as a page — not iframes inside a rendered tool (library thumbnails) */
.kct-console-loading { padding: var(--kct-space-5); color: var(--kct-color-text-muted); }

/* Staff tools are grids and forms that want the room, so on a wide screen the console steps out of the site's
   reading column (centred on it, a gutter kept either side). The page's own column is untouched. */
@media (min-width: 75rem) {
    .kct-module-siteadmin {
        --kct-console-width: min(calc(100vw - 2 * var(--kct-space-7, 3rem)), 96rem);
        width: var(--kct-console-width);
        margin-left: calc(50% - var(--kct-console-width) / 2);
    }
}

/* A rendered tool sits inside the frame's border, so give its toolbar and grid some air. */
.kct-console-webpart { padding: var(--kct-space-4); }
.kct-console-webpart .kct-grid-tools { margin-bottom: var(--kct-space-3); }

/* Pages: [Show retired pages]   123 pages · 40 not in the menu */
.kct-pages-tools { align-items: center; justify-content: space-between; }
.kct-pages-title { display: grid; line-height: 1.25; }
.kct-pages-title span { color: var(--kct-color-text-muted); font-size: var(--kct-text-xs); overflow: hidden; text-overflow: ellipsis; }
.kct-pages-title.is-retired strong { color: var(--kct-color-text-muted); text-decoration: line-through; }

/* A live status in a staff list (Subscriptions: Active / Trial; Ended keeps the plain badge). */
.kct-badge.is-success {
    background: color-mix(in srgb, var(--kct-color-success) 14%, var(--kct-color-surface));
    color: color-mix(in srgb, var(--kct-color-success) 80%, var(--kct-color-text));
}

/* Site content: [Group key ▾] [Show] ........ [+ Add content] */
.kct-content-tools { align-items: flex-end; justify-content: space-between; }
.kct-content-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--kct-space-2); }
.kct-content-filter > .input-row { margin: 0 !important; min-width: 16rem; }   /* beats the field's Bootstrap mb-3 */
.kct-content-filter .form-label { margin-bottom: .2rem; font-size: var(--kct-text-xs); color: var(--kct-color-text-muted); }

@media (max-width: 62rem) {
    .kct-console { grid-template-columns: minmax(0, 1fr); }
    .kct-console-nav { position: static; }
}

/* ---- the wording panel ---- */

.kct-message { display: grid; gap: .25rem; padding-bottom: var(--kct-space-4); }
.kct-message + .kct-message { border-top: var(--kct-border-width) solid var(--kct-color-border); padding-top: var(--kct-space-4); }
.kct-message .form-label { display: flex; flex-wrap: wrap; gap: var(--kct-space-2); align-items: center; font-weight: 600; }
.kct-message .form-text { margin: 0; }
.kct-badge-muted { background: var(--kct-color-surface-alt); color: var(--kct-color-text-muted); }

/* ---- payments ---- */

.kct-pay-account { display: grid; gap: var(--kct-space-3); padding: var(--kct-space-4); border: var(--kct-border-width) solid var(--kct-color-border); border-radius: var(--kct-radius); background: var(--kct-color-surface); }
.kct-pay-account h4 { margin: 0; font-size: 1rem; display: flex; gap: var(--kct-space-2); align-items: center; }

/* ---- cloud services ---- */

.kct-cloud-profile { display: grid; gap: var(--kct-space-3); padding: var(--kct-space-4); border: var(--kct-border-width) solid var(--kct-color-border); border-radius: var(--kct-radius); background: var(--kct-color-surface); }
.kct-cloud-profile > header h4 { margin: .1rem 0 0; font-size: 1rem; }
.kct-cloud-rows { width: 100%; border-collapse: collapse; font-size: .92rem; }
.kct-cloud-rows th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--kct-color-text-muted); padding: .3rem .5rem; }
.kct-cloud-rows td { padding: .45rem .5rem; border-top: var(--kct-border-width) solid var(--kct-color-border); vertical-align: middle; }
.kct-cloud-rows td:first-child { display: flex; flex-wrap: wrap; gap: var(--kct-space-2); align-items: center; }
.kct-cloud-tools { display: flex; flex-wrap: wrap; gap: var(--kct-space-2); justify-content: flex-end; }
.kct-cloud-result { font-size: .95em; }
.kct-cloud-result .is-good { color: var(--kct-color-success); }
.kct-cloud-result .is-bad { color: var(--kct-color-danger, #b3261e); }

/* ---- {{Token}} completion (framework/token-input.js) ----
   The chips under a message, and the list that opens as you type "{{". The list is appended to <body>
   and positioned in script, so it must not inherit the panel's stacking or overflow. */

.kct-tokens {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kct-space-2, .35rem);
    margin-top: var(--kct-space-2, .35rem);
}

.kct-tokens-lead {
    font-size: 13px;
    color: var(--kct-admin-muted, #6b7280);
}

.kct-tokens-lead code {
    padding: 0 .25rem;
    border-radius: 3px;
    background: rgba(0, 0, 0, .06);
    font-size: 12px;
}

.kct-token {
    border: 1px solid var(--kct-color-border, #d6dae1);
    border-radius: 999px;
    background: var(--kct-color-surface, #fff);
    padding: .1rem .55rem;
    font-family: var(--kct-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 12px;
    color: var(--kct-color-text, #1f2430);
    cursor: pointer;
}

.kct-token:hover,
.kct-token:focus-visible {
    border-color: var(--kct-color-primary, #2f6fed);
    color: var(--kct-color-primary, #2f6fed);
}

/* ---- the completion list ---- */
.kct-token-hints {
    position: fixed;                /* viewport coordinates: right in <body> and inside a dialog alike */
    z-index: 1100;
    margin: 0;
    padding: .25rem;
    list-style: none;
    max-height: 15rem;
    overflow-y: auto;
    border: 1px solid var(--kct-color-border, #d6dae1);
    border-radius: var(--kct-radius-md, 8px);
    background: var(--kct-color-surface, #fff);
    box-shadow: var(--kct-shadow-lg, 0 12px 32px rgba(0, 0, 0, .18));
}

.kct-token-hint {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: .6rem;
    padding: .3rem .5rem;
    border-radius: var(--kct-radius-sm, 5px);
    cursor: pointer;
}

.kct-token-hint.is-active,
.kct-token-hint:hover { background: rgba(47, 111, 237, .1); }

.kct-token-hint-name {
    font-family: var(--kct-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 12.5px;
    font-weight: 600;
    color: #1f377f;                 /* the same blue the email service gives a token name */
    white-space: nowrap;
}

.kct-token-hint-what {
    font-size: 12.5px;
    color: var(--kct-admin-muted, #6b7280);
}

.kct-token-hint-sample {
    font-size: 12px;
    color: var(--kct-color-text, #1f2430);
    opacity: .8;
    white-space: nowrap;
}

/* ---- Products (ProductManager web part) ---- */
.kct-pm-cell-thumb { display: block; width: 2.75rem; height: 2.75rem; object-fit: cover; border-radius: var(--kct-radius-sm); }
.kct-pm-cell-thumb.is-monogram { display: grid; place-items: center; background: var(--kct-color-surface-alt); color: var(--kct-color-text-muted); font-weight: 600; font-size: var(--kct-text-sm); }
.kct-pm-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--kct-space-4); }
.kct-pm-fields .kct-pm-wide { grid-column: 1 / -1; }
.kct-pm-form .form-label .kct-meta { display: inline; }
.kct-pm-pictures { margin-top: var(--kct-space-4); }
.kct-pm-thumbs { list-style: none; margin: 0 0 var(--kct-space-3); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: var(--kct-space-3); }
.kct-pm-thumbs > li { position: relative; border: 1px solid var(--kct-color-border); border-radius: var(--kct-radius); overflow: hidden; background: var(--kct-color-surface); }
.kct-pm-thumbs img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.kct-pm-thumb-tools { display: flex; justify-content: space-between; align-items: center; gap: var(--kct-space-1); padding: var(--kct-space-1); }
.kct-pm-thumbs > li.kct-pm-empty { grid-column: 1 / -1; border-style: dashed; padding: var(--kct-space-3); color: var(--kct-color-text-muted); font-size: var(--kct-text-sm); }
@media (max-width: 36rem) { .kct-pm-fields { grid-template-columns: 1fr; } }

/* ---- Reports (Sign-ins, Visitors) and the SVG charts from js/framework/kct-chart.js ---- */
:root {
    --kct-chart-1: var(--kct-color-primary);
    --kct-chart-2: var(--kct-color-accent);
    --kct-chart-3: var(--kct-color-success);
}
.kct-badge.is-warning { background: color-mix(in srgb, var(--kct-color-warning) 22%, transparent); color: var(--kct-color-text); }
.kct-badge.is-danger { background: color-mix(in srgb, var(--kct-color-danger) 18%, transparent); color: var(--kct-color-danger); }
.kct-report-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--kct-space-3); margin-bottom: var(--kct-space-4); }
.kct-report-tile { padding: var(--kct-space-3) var(--kct-space-4); border: 1px solid var(--kct-color-border); border-radius: var(--kct-radius); background: var(--kct-color-surface); }
.kct-report-tile strong { display: block; font-size: 1.6rem; line-height: 1.2; }
.kct-report-tile span { color: var(--kct-color-text-muted); font-size: var(--kct-text-sm); }
.kct-report-tile.is-warning { border-color: var(--kct-color-warning); }
.kct-inline-field { display: inline-flex; align-items: center; gap: var(--kct-space-2); font-size: var(--kct-text-sm); }
.kct-inline-field .form-control { width: auto; }
.kct-report-chart { margin: var(--kct-space-3) 0 var(--kct-space-4); }
.kct-chart { display: block; width: 100%; height: auto; max-height: 18rem; }
.kct-chart-grid { stroke: var(--kct-color-border); stroke-width: 1; }
.kct-chart-axis { fill: var(--kct-color-text-muted); font-size: 11px; }
.kct-chart-bar.kct-chart-s1 { fill: var(--kct-chart-1); }
.kct-chart-bar.kct-chart-s2 { fill: var(--kct-chart-2); }
.kct-chart-line { fill: none; stroke-width: 2; }
.kct-chart-line.kct-chart-s1 { stroke: var(--kct-chart-1); }
.kct-chart-line.kct-chart-s2 { stroke: var(--kct-chart-2); }
.kct-chart-dot.kct-chart-s1 { fill: var(--kct-chart-1); }
.kct-chart-dot.kct-chart-s2 { fill: var(--kct-chart-2); }
.kct-chart-legend { display: flex; gap: var(--kct-space-4); justify-content: center; font-size: var(--kct-text-sm); color: var(--kct-color-text-muted); }
.kct-chart-key::before { content: ""; display: inline-block; width: .8rem; height: .8rem; margin-right: .35rem; vertical-align: -.1rem; border-radius: 2px; }
.kct-chart-key.is-line::before { height: 3px; vertical-align: .2rem; }
.kct-chart-key.kct-chart-s1::before { background: var(--kct-chart-1); }
.kct-chart-key.kct-chart-s2::before { background: var(--kct-chart-2); }
.kct-report-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--kct-space-4); }
.kct-report-lists h4 { font-size: var(--kct-text-base); margin: 0 0 var(--kct-space-2); }
.kct-report-list { list-style: none; margin: 0; padding: 0; }
.kct-report-list li { display: flex; justify-content: space-between; gap: var(--kct-space-3); padding: .3rem 0; border-bottom: 1px solid var(--kct-color-border); font-size: var(--kct-text-sm); }
.kct-report-list li span { overflow-wrap: anywhere; }
.kct-report-table { margin-top: var(--kct-space-4); }
.kct-report-table summary { cursor: pointer; font-size: var(--kct-text-sm); }

/* ---- Storage browser (Cloud services → Browse) ---- */
.kct-storage-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem; margin-bottom: var(--kct-space-1); }
.kct-storage-crumbs [aria-current] { font-weight: 600; text-decoration: none; color: var(--kct-color-text); }
.kct-storage-list { margin-bottom: var(--kct-space-2); }
.kct-storage-list td:first-child { overflow-wrap: anywhere; }
.kct-storage-list td:nth-child(2), .kct-storage-list td:nth-child(3) { white-space: nowrap; color: var(--kct-color-text-muted); font-size: var(--kct-text-sm); }

/* ---- Theme picker (SiteTheme web part) ---- */
.kct-theme-cards { list-style: none; margin: var(--kct-space-4) 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--kct-space-4); }
.kct-theme-card { display: flex; flex-direction: column; border: 1px solid var(--kct-color-border); border-radius: var(--kct-radius); overflow: hidden; background: var(--kct-color-surface); }
.kct-theme-card.is-active { border-color: var(--kct-color-primary); box-shadow: 0 0 0 2px var(--kct-color-primary-soft); }
.kct-theme-picture { aspect-ratio: 16 / 10; background: var(--kct-color-surface-alt); display: grid; place-items: center; overflow: hidden; }
.kct-theme-picture img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.kct-theme-picture span { color: var(--kct-color-text-muted); font-weight: 600; }
.kct-theme-body { padding: var(--kct-space-3); display: flex; flex-direction: column; gap: var(--kct-space-2); flex: 1; }
.kct-theme-body h4 { margin: 0; font-size: var(--kct-text-base); }
.kct-theme-badges { min-height: 1.4rem; }
.kct-theme-actions { display: flex; gap: var(--kct-space-2); margin-top: auto; }

/* ---- Module library showcase (/library/preview/<tool>): a staff tool with demo data ---- */
.kct-bare main { padding: 0; }
.kct-showcase-banner {
    position: sticky; top: 0; z-index: 50;
    padding: var(--kct-space-2) var(--kct-space-4);
    background: var(--kct-color-primary-soft); color: var(--kct-color-text);
    border-bottom: 1px solid var(--kct-color-border);
    font-size: var(--kct-text-sm); text-align: center;
}
.kct-showcase-banner strong { margin-right: var(--kct-space-2); color: var(--kct-color-primary); text-transform: uppercase; letter-spacing: .06em; font-size: var(--kct-text-xs); }
.kct-showcase-body { padding-block: var(--kct-space-5); }

/* ---- store settings ---- */

.kct-module-store { display: grid; gap: var(--kct-space-5); }

.kct-store-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kct-space-2) var(--kct-space-4);
    padding-bottom: var(--kct-space-3);
    border-bottom: var(--kct-border-width) solid var(--kct-color-border);
}

.kct-store-nav a { color: var(--kct-color-text-muted); text-decoration: none; font-weight: 500; }
.kct-store-nav a:hover { color: var(--kct-color-accent); text-decoration: underline; }

.kct-module-store .kct-panel { display: grid; gap: var(--kct-space-4); scroll-margin-top: var(--kct-space-6); }
.kct-module-store .kct-panel > header { display: grid; gap: var(--kct-space-1); }
.kct-module-store .kct-panel > header h3 { margin: 0; }
.kct-module-store .kct-panel > header p { margin: 0; color: var(--kct-color-text-muted); }

/* A Bootstrap row of small numbered fields: the full width, not the 34rem a .kct-field gets. */
.kct-module-store .kct-store-fields { max-width: none; }
.kct-store-hint { color: var(--kct-color-text-muted); }

/* Sales tax: one box per state, as many across as fit. */
/* Sixty-odd states and provinces: a scrolling block rather than a page of boxes. */
.kct-tax-grid {
    max-height: 22rem;
    overflow-y: auto;
    padding: var(--kct-space-2);
    border: var(--kct-border-width) solid var(--kct-color-border);
    border-radius: var(--kct-radius);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: var(--kct-space-3);
}

.kct-tax { display: grid; grid-template-columns: 1fr auto; gap: var(--kct-space-2); align-items: center; font-weight: 500; }
.kct-tax small { color: var(--kct-color-text-muted); font-weight: 400; margin-left: .25rem; }
.kct-tax .input-group { width: 8.5rem; }

/* The product lists, side by side while there is room. */
.kct-lists {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: var(--kct-space-4);
}

.kct-list { display: grid; gap: var(--kct-space-3); align-content: start; }
.kct-list > header { display: grid; gap: var(--kct-space-1); }
.kct-list > header h4 { margin: 0; }
.kct-list > header p { margin: 0; color: var(--kct-color-text-muted); font-size: var(--kct-font-size-sm, .875rem); }
.kct-list-table { margin: 0; }
.kct-list-table td { vertical-align: middle; }
.kct-list-table td:first-child { width: 45%; }
.kct-list-table .form-control { min-width: 5rem; }
.kct-list-table .kct-count { text-align: right; color: var(--kct-color-text-muted); }
.kct-list-table .kct-row-actions { display: flex; gap: var(--kct-space-1); justify-content: flex-end; }
.kct-list-add { display: flex; flex-wrap: wrap; gap: var(--kct-space-2); align-items: center; }
.kct-list-add .form-control { flex: 1 1 8rem; min-width: 8rem; }

/* ---- orders ---- */

.kct-module-orders { display: grid; gap: var(--kct-space-5); }

.kct-order-filters {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: var(--kct-space-3);
    align-items: end;
}

.kct-order-filters .kct-field { max-width: none; }

.kct-order-table td small { display: block; color: var(--kct-color-text-muted); }
.kct-order-table .kct-money, .kct-order-items .kct-money { text-align: right; }
.kct-order-table code { font-size: .85em; }
.kct-order-table tbody tr { cursor: pointer; }
.kct-quiet { color: var(--kct-color-text-muted); }

.kct-order-detail { scroll-margin-top: var(--kct-space-6); }
.kct-order-detail-body { display: grid; grid-template-columns: 2fr 1fr; gap: var(--kct-space-5); align-items: start; }
.kct-order-detail-body h4 { margin: 0 0 var(--kct-space-2); }

.kct-order-totals {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--kct-space-1) var(--kct-space-4);
    margin: 0;
    justify-content: end;
}
.kct-order-totals dt { color: var(--kct-color-text-muted); font-weight: 400; text-align: right; }
.kct-order-totals dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

.kct-order-history { margin: 0; padding-left: var(--kct-space-4); display: grid; gap: var(--kct-space-1); }
.kct-order-history li { color: var(--kct-color-text-muted); }

@media (max-width: 62rem) {
    .kct-order-filters { grid-template-columns: 1fr 1fr; }
    .kct-order-detail-body { grid-template-columns: 1fr; }
}

/* Payment providers, one card each. */
.kct-providers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
    gap: var(--kct-space-4);
}

.kct-provider {
    display: grid;
    gap: var(--kct-space-3);
    align-content: start;
    padding: var(--kct-space-4);
    border: var(--kct-border-width) solid var(--kct-color-border);
    border-radius: var(--kct-radius);
    background: var(--kct-color-surface);
}

.kct-provider.is-chosen { border-color: var(--kct-color-accent); box-shadow: var(--kct-card-shadow); }
.kct-provider.is-planned { opacity: .7; }
.kct-provider > header { display: grid; gap: var(--kct-space-1); }
.kct-provider > header h4 { margin: 0; }
.kct-provider > header p { margin: 0; color: var(--kct-color-text-muted); font-size: var(--kct-font-size-sm, .875rem); }

.kct-provider-keys { display: grid; gap: var(--kct-space-1); padding-top: var(--kct-space-3); border-top: var(--kct-border-width) solid var(--kct-color-border); }
.kct-provider-keys h5 { margin: 0 0 var(--kct-space-1); font-size: 1rem; }
.kct-provider-keys .form-label { margin: var(--kct-space-1) 0 0; }

/* The one button a shopper sees when payment happens on the provider's pages. */
.kct-pay-with { display: grid; gap: var(--kct-space-3); justify-items: start; padding: var(--kct-space-4) 0; }

/* ---- jobs ---- */

.kct-module-jobs { display: grid; gap: var(--kct-space-5); }
.kct-module-jobs .kct-panel { display: grid; gap: var(--kct-space-3); }
.kct-module-jobs .kct-panel > header h3 { margin: 0; }
.kct-module-jobs .kct-panel > header p { margin: 0; color: var(--kct-color-text-muted); }
.kct-jobs-table td, .kct-jobs-history td { vertical-align: top; }
.kct-jobs-table td small, .kct-jobs-history td small { display: block; color: var(--kct-color-text-muted); }
.kct-jobs-table [data-job-cadence] { max-width: 11rem; display: inline-block; }
.kct-jobs-table .kct-badge { margin-left: var(--kct-space-1); }
.kct-jobs-result { min-width: 14rem; }
.kct-badge.is-ok { background: color-mix(in srgb, var(--kct-color-success, #1a7f37) 15%, var(--kct-color-surface)); color: var(--kct-color-success, #1a7f37); }

/* Custom fields (SiteFields) — the definitions table, and the fields themselves on registration/profile */
.kct-module-fields { display: grid; gap: var(--kct-space-5); }
.kct-module-fields .kct-panel { display: grid; gap: var(--kct-space-3); }
.kct-module-fields .kct-panel > header h3 { margin: 0; }
.kct-module-fields .kct-panel > header p { margin: 0; color: var(--kct-color-text-muted); }
.kct-fields-table td { vertical-align: top; }
.kct-fields-table code { font-size: 0.85em; }
.kct-fields-table .kct-fields-choices { margin-top: var(--kct-space-1); min-width: 12rem; }
.kct-fields-table .kct-fields-order { width: 4.5rem; }
.kct-fields-check { text-align: center; }
.kct-fields-retired { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--kct-space-2); }
.kct-fields-retired li { display: flex; gap: var(--kct-space-2); align-items: center; }
.kct-fields-retired small { color: var(--kct-color-text-muted); }
.kct-custom-field-items { display: flex; flex-wrap: wrap; gap: var(--kct-space-1) var(--kct-space-3); }

/* Email & contacts (SiteEmail) */
.kct-module-email { display: grid; gap: var(--kct-space-5); }
.kct-module-email .kct-panel { display: grid; gap: var(--kct-space-3); }
.kct-module-email .kct-panel > header h3 { margin: 0; }
.kct-module-email .kct-panel > header p { margin: 0; color: var(--kct-color-text-muted); }
.kct-email-providers { display: grid; gap: var(--kct-space-3); grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.kct-email-provider { border: 1px solid var(--kct-color-border); border-radius: var(--kct-radius, .5rem); padding: var(--kct-space-3); display: grid; gap: var(--kct-space-2); }
.kct-email-provider.is-chosen { border-color: var(--kct-color-primary); box-shadow: 0 0 0 1px var(--kct-color-primary) inset; }
.kct-email-provider > header h4 { margin: 0; font-size: 1rem; }
.kct-email-provider > header small { color: var(--kct-color-text-muted); }
.kct-email-test { display: flex; gap: var(--kct-space-2); max-width: 36rem; }
.kct-email-test-result { margin: 0; min-height: 1.5em; }
.kct-email-test-result.is-danger { color: var(--kct-color-danger, #b02a37); }
.kct-email-map td { vertical-align: middle; }
.kct-email-map td small { display: block; }
.kct-email-map input[type="text"] { max-width: 18rem; }
.kct-email-preview { background: var(--kct-color-surface-2, #f6f7f9); border: 1px solid var(--kct-color-border); border-radius: var(--kct-radius, .5rem); padding: var(--kct-space-3); font-size: .85rem; max-height: 24rem; overflow: auto; margin: 0; }
.kct-email-connect { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--kct-space-2); max-width: 44rem; align-items: start; }
.kct-email-connections th[scope="row"] { white-space: nowrap; width: 9rem; }
.kct-email-connections th[scope="row"] .kct-badge { margin-left: var(--kct-space-1); }
.kct-email-connections td, .kct-email-connections th { vertical-align: top; }
.kct-email-connections tr.is-current > * { background: color-mix(in srgb, var(--kct-color-primary) 5%, transparent); }
.kct-email-conn-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kct-space-1) var(--kct-space-2); }
.kct-email-row-actions { white-space: nowrap; width: 1%; }
.kct-email-row-actions .btn { display: block; width: 100%; margin-bottom: var(--kct-space-1); }
.kct-email-copy { margin-top: var(--kct-space-1); }
.kct-email-sender-warning { color: var(--kct-color-danger, #b02a37); }
.kct-email-domain-notes { flex-basis: 100%; }
.kct-panel-quiet > details.kct-more > summary { font-weight: 500; color: var(--kct-color-text-muted); }
.kct-webpart-sitelogs .kct-logs-cell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.kct-webpart-sitelogs .tabulator-row { cursor: pointer; }
.kct-webpart-sitelogs .kct-grid-tools.is-request { outline: 2px solid var(--kct-color-primary); outline-offset: 4px; border-radius: var(--kct-radius, .5rem); }
.kct-webpart-sitelogs .kct-grid-tools.is-request [data-action="clear-request"] { font-weight: 600; }
.kct-logs-detail { margin-top: var(--kct-space-3); }
.kct-logs-message { font-weight: 500; white-space: pre-wrap; word-break: break-word; }
.kct-logs-exception, .kct-logs-properties { background: var(--kct-color-surface-2, #f6f7f9); border: 1px solid var(--kct-color-border); border-radius: var(--kct-radius, .5rem); padding: var(--kct-space-3); font-size: .8rem; max-height: 22rem; overflow: auto; white-space: pre-wrap; word-break: break-word; }
.kct-badge.is-info { background: color-mix(in srgb, var(--kct-color-primary) 15%, transparent); color: var(--kct-color-text); }
@media (max-width: 48rem) {
  .kct-email-connect { grid-template-columns: 1fr; }
  .kct-email-connections thead { display: none; }
  .kct-email-connections tr { display: grid; }
  .kct-email-connections th[scope="row"] { width: auto; }
  .kct-email-row-actions { white-space: normal; width: auto; }
}
.kct-email-tenant { display: grid; grid-template-columns: max-content 1fr; gap: var(--kct-space-1) var(--kct-space-3); margin: 0; }
.kct-email-tenant dt { font-weight: 600; }
.kct-email-tenant dd { margin: 0; }
.kct-email-domain { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kct-space-2); margin-bottom: var(--kct-space-1); }
.kct-email-domain details { flex-basis: 100%; }
.kct-email-dns td, .kct-email-dns th { font-size: .85rem; }
.kct-email-dns code { word-break: break-all; }
.kct-email-advanced { margin-top: var(--kct-space-2); }
.kct-module-email details.kct-more > summary { cursor: pointer; font-weight: 600; }
.kct-module-email details.kct-more > :not(summary) { margin-top: var(--kct-space-2); }
.kct-email-map-group th { background: var(--kct-color-surface-2, #f6f7f9); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--kct-color-text-muted); padding-top: var(--kct-space-3); }
.kct-email-events { border-top: 1px solid var(--kct-color-border); padding-top: var(--kct-space-3); margin-top: var(--kct-space-2); display: grid; gap: var(--kct-space-2); }
.kct-email-events h5 { margin: 0; font-size: .95rem; }

/* ---- Media picker (js/framework/media-picker.js), Files and Media tools (Site admin) ---- */
.kct-media-picker-window { --kct-window-max-height: 88vh; }
.kct-media-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kct-space-2); margin-bottom: var(--kct-space-3); border-bottom: var(--kct-border-width) solid var(--kct-color-border); }
.kct-media-tabs [role="tab"] { padding: var(--kct-space-2) var(--kct-space-3); border: 0; border-bottom: 2px solid transparent; background: none; color: var(--kct-color-text-muted); font-weight: 600; cursor: pointer; }
.kct-media-tabs [role="tab"][aria-selected="true"] { color: var(--kct-color-primary); border-bottom-color: var(--kct-color-primary); }
.kct-media-hint { margin-left: auto; font-size: var(--kct-text-sm); color: var(--kct-color-text-muted); }
.kct-media-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kct-space-3); margin-bottom: var(--kct-space-3); }
.kct-media-toolbar .form-select { width: auto; max-width: 18rem; }
.kct-media-upload-btn { margin-left: auto; cursor: pointer; }
.kct-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: var(--kct-space-3); align-content: start; min-height: 8rem; max-height: 60vh; overflow: auto; padding: 2px; }
.kct-media-group { grid-column: 1 / -1; margin: var(--kct-space-3) 0 0; font-size: var(--kct-text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--kct-color-text-muted); }
.kct-media-group:first-child { margin-top: 0; }
.kct-media-folder { display: flex; align-items: center; min-height: 3rem; padding: var(--kct-space-2) var(--kct-space-3); border: var(--kct-border-width) solid var(--kct-color-border); border-radius: var(--kct-radius); background: var(--kct-color-surface-alt); text-align: left; font-weight: 600; cursor: pointer; }
.kct-media-folder:hover { border-color: var(--kct-color-primary); }
.kct-media-tile { display: flex; flex-direction: column; gap: var(--kct-space-1); padding: var(--kct-space-1); border: 2px solid transparent; border-radius: var(--kct-radius); background: var(--kct-color-surface); text-align: left; cursor: pointer; }
.kct-media-tile:hover { border-color: var(--kct-color-border); }
.kct-media-tile.is-selected { border-color: var(--kct-color-primary); box-shadow: var(--kct-focus-ring); }
.kct-media-tile.is-static { cursor: default; }
.kct-media-thumb { display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--kct-radius-sm); background: var(--kct-color-surface-alt); }
.kct-media-thumb img { width: 100%; height: 100%; object-fit: cover; }
.kct-media-glyph { font-family: "Font Awesome 6 Free", "Font Awesome 5 Free"; font-style: normal; font-weight: 400; font-size: 2.2rem; color: var(--kct-color-text-muted); }
.kct-media-name { font-size: var(--kct-text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kct-media-meta { font-size: var(--kct-text-xs); color: var(--kct-color-text-muted); }
.kct-media-tools { display: flex; gap: var(--kct-space-2); font-size: var(--kct-text-xs); }
.kct-files-thumb { width: 2rem; height: 1.5rem; object-fit: cover; border-radius: 2px; margin-right: var(--kct-space-2); vertical-align: middle; }
.kct-address-input { display: flex; gap: var(--kct-space-2); }
.kct-address-input input { flex: 1; min-width: 0; }
.kct-media-uses { font-size: var(--kct-text-xs); color: var(--kct-color-text-muted); line-height: 1.3; }
.kct-media-uses a { color: var(--kct-color-link); }
.kct-media-uses.is-free { color: var(--kct-color-success, #1a7f37); }
.kct-media-preview { position: fixed; z-index: 20000; width: 360px; max-width: calc(100vw - 16px); padding: 4px; border-radius: var(--kct-radius); background: #fff; box-shadow: var(--kct-shadow-lg); pointer-events: none; }
.kct-media-preview img, .kct-media-preview video { display: block; width: 100%; max-height: 260px; object-fit: contain; border-radius: var(--kct-radius-sm); background: #000; }
.kct-media-preview-cap { padding: 4px 6px 2px; font-size: var(--kct-text-xs); color: var(--kct-color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Hover actions on a tile: eye (pin a preview), link (where used), trash (remove; greyed while in use). */
.kct-media-thumb { position: relative; }
.kct-media-actions { position: absolute; top: 4px; right: 4px; display: flex; gap: 4px; opacity: 0; transition: opacity var(--kct-transition); }
.kct-media-tile:hover .kct-media-actions, .kct-media-tile:focus-within .kct-media-actions { opacity: 1; }
.kct-media-action { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--kct-color-text); box-shadow: var(--kct-shadow-sm); cursor: pointer; }
.kct-media-action i { font-family: "Font Awesome 6 Free", "Font Awesome 5 Free"; font-style: normal; font-weight: 400; font-size: .85rem; }
.kct-media-action:hover { background: #fff; color: var(--kct-color-primary); }
.kct-media-action.is-danger:hover { color: var(--kct-color-danger); }
.kct-media-action:disabled { opacity: .45; cursor: not-allowed; }
.kct-media-action:disabled:hover { color: var(--kct-color-text); background: rgba(255, 255, 255, .92); }
.kct-media-preview.is-pinned { pointer-events: auto; }
.kct-media-preview-close { position: absolute; top: 2px; right: 4px; border: 0; background: none; font-size: 1.2rem; line-height: 1; color: var(--kct-color-text-muted); cursor: pointer; }
.kct-media-uses-list { margin: 0; padding: 4px 6px 6px 22px; font-size: var(--kct-text-sm); }
.kct-media-uses-list li { margin: 2px 0; }
dialog .kct-media-preview { position: fixed; }