/* ==========================================================================
   Castalore design system
   Vanilla CSS. No framework, no build step.

   Principles
     Restraint over decoration. Colour carries meaning (YES, NO, status,
     reputation, interaction) and is never applied for mood alone.
     Hairlines and precise radii over heavy shadow, so the product reads as an
     instrument rather than a consumer app.
     Every primitive is built for the data-dense forecasting views that follow,
     not only for the pages that exist today.

   Contents
     1.  Tokens: colour
     2.  Tokens: type, space, radius, elevation, motion
     3.  Reset and base
     4.  Typography
     5.  Layout: shell, containers, page header, grids
     6.  Header and navigation
     7.  Buttons
     8.  Panels and cards
     9.  Metrics
     10. Probability and data visualisation
     11. Data rows and meta lists
     12. Tags, pills, badges, status
     13. Tabs and segmented controls
     14. Forms
     15. Alerts and notes
     16. Empty states and checklists
     17. Landing sections
     18. Footer
     19. Utilities
     20. Responsive
   ========================================================================== */


/* 1. Tokens: colour
   ========================================================================== */

:root {
    /* Paper and surface. Warm, low-saturation neutrals: the product should feel
       printed and considered rather than screen-bright. 2026 refresh: a touch
       lighter and warmer, matching the redesign comps. */
    --kz-paper:        #FAF8F3;
    --kz-paper-sunk:   #F0EDE4;
    --kz-surface:      #FFFFFF;
    --kz-surface-2:    #FBFAF6;

    --kz-line:         #E6E0D3;
    --kz-line-strong:  #D9D3C4;
    --kz-line-soft:    #F0ECE2;

    /* Ink scale */
    --kz-ink:          #1C1F1C;
    --kz-ink-2:        #2C302C;
    --kz-ink-3:        #40453F;
    --kz-ink-4:        #6B7069;
    --kz-ink-5:        #9AA09A;

    /* Emerald: the Castalore identity. Used for brand, primary action, and YES.
       --kz-em-700 is the primary. --kz-em-900 is the dark-panel green. */
    --kz-em-900:       #0A3D29;
    --kz-em-800:       #084A2F;
    --kz-em-700:       #0A5C3A;
    --kz-em-600:       #0E6B52;
    --kz-em-500:       #12996B;
    --kz-em-mint:      #7FD3A8;
    --kz-em-200:       #BEDCD1;
    --kz-em-100:       #E7F0EA;
    --kz-em-50:        #EDF6F1;

    /* Clay: the counterweight. Used for NO and for negative movement. */
    --kz-clay-700:     #8A3418;
    --kz-clay-600:     #B8481F;
    --kz-clay-100:     #F7E2D7;
    --kz-clay-50:      #FBEEE7;

    /* Bronze: reputation and standing. Deliberately distinct from points. */
    --kz-bronze-700:   #7A6534;
    --kz-bronze-600:   #8A6A28;
    --kz-bronze-100:   #F2E6C9;
    --kz-bronze-50:    #F3F0E7;

    /* Azure: evidence, information, neutral system messages. */
    --kz-azure-700:    #1A4F6B;
    --kz-azure-100:    #D6E6EE;
    --kz-azure-50:     #EDF4F8;

    /* Semantic aliases. Views reference these, never raw ramps. */
    --kz-yes:          var(--kz-em-700);
    --kz-yes-soft:     var(--kz-em-50);
    --kz-no:           var(--kz-clay-600);
    --kz-no-soft:      var(--kz-clay-50);
    --kz-positive:     var(--kz-em-700);
    --kz-negative:     var(--kz-clay-600);
    --kz-reputation:   var(--kz-bronze-700);
    --kz-info:         var(--kz-azure-700);

    /* Product streams carry their own colour on tags and tabs. */
    --kz-stream-questions: var(--kz-em-700);
    --kz-stream-trending:  var(--kz-clay-600);
    --kz-stream-banter:    var(--kz-bronze-700);

    --kz-focus-ring:   0 0 0 3px rgba(10, 92, 58, 0.26);
}


/* 2. Tokens: type, space, radius, elevation, motion
   ========================================================================== */

:root {
    /* System stack. Kept dependency-free and offline-safe; hierarchy is carried
       by scale, weight, and tracking rather than by a downloaded display face.
       --kz-font-display is the same stack rendered heavy and tight to stand in
       for the comps' Archivo headings without shipping a web font. */
    --kz-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text",
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --kz-font-display: "Segoe UI Variable Display", ui-sans-serif, system-ui,
               -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --kz-font-num: ui-sans-serif, system-ui, "Segoe UI Variable Text", "Segoe UI",
                   Roboto, Arial, sans-serif;

    /* Type scale */
    --kz-t-display: clamp(2.6rem, 1.4rem + 4.4vw, 4.25rem);
    --kz-t-h1:      clamp(2rem, 1.4rem + 2.6vw, 3rem);
    --kz-t-h2:      clamp(1.5rem, 1.24rem + 1.15vw, 2.05rem);
    --kz-t-h3:      1.1875rem;
    --kz-t-h4:      1rem;
    --kz-t-body:    1rem;
    --kz-t-sm:      0.9375rem;
    --kz-t-xs:      0.8125rem;
    --kz-t-micro:   0.75rem;

    /* Data numerals */
    --kz-t-metric:  clamp(1.75rem, 1.5rem + 0.9vw, 2.15rem);
    --kz-t-figure:  clamp(2.25rem, 1.8rem + 1.6vw, 3rem);

    /* Space scale */
    --kz-1:  0.25rem;
    --kz-2:  0.5rem;
    --kz-3:  0.75rem;
    --kz-4:  1rem;
    --kz-5:  1.25rem;
    --kz-6:  1.5rem;
    --kz-7:  2rem;
    --kz-8:  2.5rem;
    --kz-9:  3.5rem;
    --kz-10: 5rem;

    /* Radii. Tighter than before: precision reads as competence. */
    --kz-r-xs:   4px;
    --kz-r-sm:   6px;
    --kz-r-md:   8px;
    --kz-r-lg:   12px;
    --kz-r-xl:   14px;
    --kz-r-pill: 999px;

    /* Elevation. Soft layers, used sparingly. --kz-e-lift is the card hover in
       the redesign; --kz-e-pop is for dropdowns and the featured panel. */
    --kz-e-1: 0 1px 1px rgba(12, 22, 19, 0.04);
    --kz-e-2: 0 1px 2px rgba(20, 35, 26, 0.05), 0 2px 6px rgba(20, 35, 26, 0.05);
    --kz-e-3: 0 2px 4px rgba(20, 35, 26, 0.05), 0 12px 28px rgba(20, 35, 26, 0.09);
    --kz-e-lift: 0 10px 26px rgba(20, 35, 26, 0.11);
    --kz-e-pop: 0 12px 32px rgba(20, 35, 26, 0.15);

    /* Motion */
    --kz-dur-1: 120ms;
    --kz-dur-2: 200ms;
    --kz-dur-3: 320ms;
    --kz-ease:  cubic-bezier(0.2, 0, 0, 1);

    /* Measure */
    --kz-w-page:  95rem;
    --kz-w-wide:  105rem;
    --kz-w-prose: 42rem;
    --kz-w-form:  26.5rem;
}


/* 3. Reset and base
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--kz-paper);
    color: var(--kz-ink-3);
    font-family: var(--kz-font);
    font-size: var(--kz-t-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; }
svg { display: block; }

/* The user-agent stylesheet gives these a 40px side margin, which silently
   offsets and overflows any full-width component built on them. */
figure, blockquote, dl, dd { margin: 0; }

a {
    color: var(--kz-em-700);
    text-decoration: none;
    text-underline-offset: 0.18em;
    transition: color var(--kz-dur-1) var(--kz-ease);
}

a:hover { color: var(--kz-em-600); text-decoration: underline; }

:focus-visible {
    outline: 2px solid var(--kz-em-600);
    outline-offset: 2px;
    border-radius: var(--kz-r-xs);
}

hr, .kz-rule {
    height: 1px;
    margin: 0;
    border: 0;
    background: var(--kz-line);
}

.kz-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    padding: var(--kz-3) var(--kz-4);
    background: var(--kz-ink);
    color: #fff;
    border-radius: 0 0 var(--kz-r-md) 0;
    font-size: var(--kz-t-sm);
    font-weight: 600;
}

.kz-skip-link:focus { left: 0; text-decoration: none; color: #fff; }


/* 4. Typography
   ========================================================================== */

h1, h2, h3, h4 {
    margin: 0 0 var(--kz-3);
    color: var(--kz-ink);
    font-family: var(--kz-font-display);
    font-weight: 730;
    line-height: 1.14;
    letter-spacing: -0.026em;
    text-wrap: balance;
}

h1 { font-size: var(--kz-t-h1); letter-spacing: -0.03em; }
h2 { font-size: var(--kz-t-h2); }
h3 { font-size: var(--kz-t-h3); line-height: 1.3; }
h4 { font-size: var(--kz-t-h4); line-height: 1.4; }

p { margin: 0 0 var(--kz-4); }
p:last-child { margin-bottom: 0; }

/* Display tier: reserved for the single most important statement on a page.
   Heavy and tight so the system font reads as a display face. */
.kz-display {
    margin: 0 0 var(--kz-5);
    color: var(--kz-ink);
    font-family: var(--kz-font-display);
    font-size: var(--kz-t-display);
    font-weight: 820;
    line-height: 1.03;
    letter-spacing: -0.038em;
    text-wrap: balance;
}

.kz-lead {
    max-width: 48ch;
    color: var(--kz-ink-3);
    font-size: 1.0625rem;
    line-height: 1.62;
}

.kz-lead--lg { font-size: 1.15rem; line-height: 1.58; }

/* Eyebrow: small, tracked, structural. Marks the start of a section. */
.kz-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--kz-2);
    margin: 0 0 var(--kz-3);
    color: var(--kz-em-700);
    font-size: var(--kz-t-micro);
    font-weight: 680;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.kz-eyebrow::before {
    content: "";
    width: 1.25rem;
    height: 1px;
    background: currentColor;
    opacity: 0.55;
}

.kz-eyebrow--plain::before { display: none; }

/* Numeric type: tabular everywhere a figure can change. */
.kz-num {
    font-family: var(--kz-font-num);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
}

.kz-prose { max-width: var(--kz-w-prose); overflow-wrap: anywhere; }


/* 5. Layout: shell, containers, page header, grids
   ========================================================================== */

.kz-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.kz-main {
    flex: 1 0 auto;
    padding: var(--kz-8) 0 var(--kz-9);
}

.kz-main--flush { padding: 0; }

.kz-container {
    width: 100%;
    max-width: var(--kz-w-page);
    margin: 0 auto;
    padding: 0 clamp(0.85rem, 2vw, 1.5rem);
}

.kz-container--wide   { max-width: var(--kz-w-wide); }
.kz-container--prose  { max-width: var(--kz-w-prose); }
.kz-container--form   { max-width: var(--kz-w-form); }
.kz-container--narrow { max-width: 64rem; }
.kz-container--app    { max-width: 74rem; }

/* Page header: eyebrow, title, supporting line, optional aside. */
.kz-pagehead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--kz-6);
    padding-bottom: var(--kz-6);
    margin-bottom: var(--kz-7);
    border-bottom: 1px solid var(--kz-line);
}

.kz-pagehead__main { min-width: 0; }
.kz-pagehead__title { margin-bottom: var(--kz-2); }

.kz-pagehead__sub {
    max-width: 56ch;
    margin: 0;
    color: var(--kz-ink-4);
    font-size: var(--kz-t-sm);
}

.kz-pagehead__aside {
    display: flex;
    align-items: center;
    gap: var(--kz-2);
    flex: none;
}

/* Section header used inside long pages. */
.kz-sectionhead {
    max-width: 54ch;
    margin-bottom: var(--kz-7);
}

.kz-sectionhead__text {
    margin: 0;
    color: var(--kz-ink-4);
    font-size: 1.0625rem;
}

.kz-grid { display: grid; gap: var(--kz-5); }
.kz-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kz-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kz-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kz-grid--tight { gap: var(--kz-4); }

/* Workspace: primary column plus a supporting rail. */
.kz-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
    gap: var(--kz-6);
    align-items: start;
}

.kz-rail {
    display: flex;
    flex-direction: column;
    gap: var(--kz-5);
    position: sticky;
    top: 5.25rem;
}


/* 6. Header and navigation
   ========================================================================== */

/* The 5px brand rule at the very top of every page. Scrolls away under the
   sticky header. */
.kz-topbar {
    height: 5px;
    background: var(--kz-em-700);
}

.kz-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(250, 248, 243, 0.90);
    backdrop-filter: saturate(1.4) blur(9px);
    -webkit-backdrop-filter: saturate(1.4) blur(9px);
    border-bottom: 1px solid var(--kz-line);
    transition: border-color var(--kz-dur-2) var(--kz-ease),
                box-shadow var(--kz-dur-2) var(--kz-ease),
                background-color var(--kz-dur-2) var(--kz-ease);
}

/* Elevation appears only once the page has scrolled beneath it. */
.kz-header.is-stuck {
    background: rgba(250, 248, 243, 0.95);
    box-shadow: var(--kz-e-1);
}

.kz-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kz-5);
    min-height: 4.25rem;
}

.kz-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--kz-3);
    color: var(--kz-ink);
    font-size: 1.0625rem;
    font-weight: 680;
    letter-spacing: -0.025em;
}

.kz-brand:hover { color: var(--kz-ink); text-decoration: none; }

.kz-brand__mark {
    width: 1.625rem;
    height: 1.625rem;
    flex: none;
    transition: transform var(--kz-dur-2) var(--kz-ease);
}

.kz-brand:hover .kz-brand__mark { transform: translateY(-1px); }

.kz-brand__text { line-height: 1; }

.kz-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    background: var(--kz-surface);
    border: 1px solid var(--kz-line);
    border-radius: var(--kz-r-md);
    color: var(--kz-ink-2);
    cursor: pointer;
    transition: border-color var(--kz-dur-1) var(--kz-ease),
                background-color var(--kz-dur-1) var(--kz-ease);
}

.kz-nav-toggle:hover { border-color: var(--kz-line-strong); }

.kz-nav-toggle__bars { display: block; }
.kz-nav-toggle__close { display: none; }
.kz-nav-toggle[aria-expanded="true"] .kz-nav-toggle__bars { display: none; }
.kz-nav-toggle[aria-expanded="true"] .kz-nav-toggle__close { display: block; }

.kz-nav {
    display: flex;
    align-items: center;
    gap: var(--kz-6);
}

.kz-nav__links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--kz-1);
    row-gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Second header row: a horizontally scrollable strip of category pills under a
   quiet "Categories" label. The scrollbar is hidden; the row still scrolls by
   wheel, drag, or keyboard. */
.kz-catbar {
    display: flex;
    align-items: center;
    gap: var(--kz-2);
    padding: var(--kz-2) 0 0.65rem;
    border-top: 1px solid var(--kz-line-soft);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.kz-catbar::-webkit-scrollbar { display: none; }

.kz-catbar__label {
    flex: none;
    padding: var(--kz-1) var(--kz-2) var(--kz-1) 2px;
    color: var(--kz-ink-5);
    font-size: var(--kz-t-micro);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.kz-cat-pill {
    flex: none;
    padding: 0.35rem 0.8rem;
    border-radius: var(--kz-r-pill);
    background: var(--kz-paper-sunk);
    color: var(--kz-ink-3);
    font-size: var(--kz-t-xs);
    font-weight: 700;
    white-space: nowrap;
    transition: color var(--kz-dur-1) var(--kz-ease),
                background-color var(--kz-dur-1) var(--kz-ease);
}

.kz-cat-pill:hover {
    background: var(--kz-em-50);
    color: var(--kz-em-700);
    text-decoration: none;
}

.kz-cat-pill[aria-current="page"] {
    background: var(--kz-em-100);
    color: var(--kz-em-800);
}

/* Active state is a filled chip rather than a hairline underline: legible at a
   glance, and it survives the mobile panel without redesign. */
.kz-nav__link {
    display: inline-flex;
    align-items: center;
    padding: var(--kz-2) var(--kz-3);
    border-radius: var(--kz-r-md);
    color: var(--kz-ink-3);
    font-size: var(--kz-t-sm);
    font-weight: 560;
    transition: color var(--kz-dur-1) var(--kz-ease),
                background-color var(--kz-dur-1) var(--kz-ease);
}

.kz-nav__link:hover {
    background: var(--kz-paper-sunk);
    color: var(--kz-ink);
    text-decoration: none;
}

.kz-nav__link[aria-current="page"] {
    background: var(--kz-em-50);
    color: var(--kz-em-800);
    font-weight: 620;
}

.kz-nav__actions {
    display: flex;
    align-items: center;
    gap: var(--kz-3);
}

.kz-nav__divider {
    width: 1px;
    align-self: stretch;
    margin: var(--kz-2) 0;
    background: var(--kz-line);
}

/* Identity block: avatar, name, and live points reading. Links to the profile. */
.kz-identity {
    display: inline-flex;
    align-items: center;
    gap: var(--kz-3);
    padding: var(--kz-1) var(--kz-2);
    border-radius: var(--kz-r-md);
    transition: background-color var(--kz-dur-1) var(--kz-ease);
}

a.kz-identity:hover { background: var(--kz-paper-sunk); text-decoration: none; }
a.kz-identity:hover .kz-identity__name { color: var(--kz-em-800); }

.kz-identity__meta {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.kz-identity__name {
    color: var(--kz-ink);
    font-size: var(--kz-t-sm);
    font-weight: 620;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 12rem;
}

.kz-identity__points {
    color: var(--kz-ink-4);
    font-size: var(--kz-t-micro);
    font-variant-numeric: tabular-nums;
}

.kz-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: none;
    border-radius: var(--kz-r-md);
    background: var(--kz-em-800);
    color: #fff;
    font-size: var(--kz-t-xs);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.kz-logout-form { display: inline; margin: 0; }

/* Points pill in the header: a live balance reading, quiet and rounded. */
.kz-pointspill {
    display: inline-flex;
    align-items: center;
    gap: var(--kz-2);
    padding: 0.4rem 0.7rem;
    border-radius: var(--kz-r-pill);
    background: var(--kz-paper-sunk);
    color: var(--kz-ink-3);
    font-size: var(--kz-t-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.kz-pointspill::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    flex: none;
    border-radius: 50%;
    background: var(--kz-em-700);
}

a.kz-pointspill:hover { color: var(--kz-em-800); text-decoration: none; }

/* Icon-only header button (the settings gear). */
.kz-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: none;
    border-radius: var(--kz-r-md);
    color: var(--kz-ink-5);
    transition: color var(--kz-dur-1) var(--kz-ease),
                background-color var(--kz-dur-1) var(--kz-ease);
}

.kz-iconbtn svg { width: 17px; height: 17px; flex: none; }

.kz-iconbtn:hover { background: var(--kz-paper-sunk); color: var(--kz-em-700); text-decoration: none; }

/* Dropdown menu: Categories in the nav, and the Alerts panel. Progressive
   enhancement -- the panel is a plain [hidden] element toggled by JS; with JS
   off the trigger is a normal link to the fallback page. */
.kz-menu { position: relative; display: inline-flex; }

.kz-menu__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--kz-2);
    padding: var(--kz-2) var(--kz-3);
    border: 0;
    border-radius: var(--kz-r-md);
    background: transparent;
    color: var(--kz-ink-4);
    font-family: inherit;
    font-size: var(--kz-t-sm);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--kz-dur-1) var(--kz-ease),
                background-color var(--kz-dur-1) var(--kz-ease);
}

.kz-menu__btn:hover,
.kz-menu__btn[aria-expanded="true"] { background: var(--kz-paper-sunk); color: var(--kz-em-700); }

.kz-menu__caret { width: 10px; height: 10px; flex: none; opacity: 0.75; }
.kz-menu__btn svg { flex: none; }

.kz-menu__panel {
    position: absolute;
    top: calc(100% + var(--kz-2));
    z-index: 80;
    min-width: 12rem;
    padding: var(--kz-2);
    background: var(--kz-surface);
    border: 1px solid var(--kz-line);
    border-radius: var(--kz-r-lg);
    box-shadow: var(--kz-e-pop);
}

.kz-menu__panel--start { left: 0; }
.kz-menu__panel--end { right: 0; }

.kz-menu__link {
    display: block;
    padding: var(--kz-2) var(--kz-3);
    border-radius: var(--kz-r-sm);
    color: var(--kz-ink-3);
    font-size: var(--kz-t-sm);
    font-weight: 600;
}

.kz-menu__link:hover { background: var(--kz-paper-sunk); color: var(--kz-em-700); text-decoration: none; }

/* Without JS the trigger cannot open the panel, so reveal it inline and drop
   the dead button. Categories also remain reachable from the Markets filters. */
html.no-js .kz-menu__btn { display: none; }
html.no-js .kz-menu__panel[hidden] {
    display: block;
    position: static;
    min-width: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
}

/* Alerts panel: a wider menu with a header and scrollable list. */
.kz-alerts__panel { width: 20rem; max-width: calc(100vw - 2rem); padding: 0; }

.kz-alerts__head {
    padding: var(--kz-3) var(--kz-4);
    border-bottom: 1px solid var(--kz-line-soft);
    font-family: var(--kz-font-display);
    font-size: var(--kz-t-xs);
    font-weight: 800;
    letter-spacing: 0.02em;
}

.kz-alerts__list { max-height: 22rem; overflow-y: auto; }

.kz-alerts__item {
    display: block;
    padding: var(--kz-3) var(--kz-4);
    border-bottom: 1px solid var(--kz-line-soft);
    color: var(--kz-ink-3);
}

.kz-alerts__item:hover { background: var(--kz-surface-2); text-decoration: none; }
.kz-alerts__item:last-child { border-bottom: 0; }

.kz-alerts__title { display: block; color: var(--kz-ink); font-size: var(--kz-t-xs); font-weight: 700; }
.kz-alerts__body  { display: block; margin-top: 2px; font-size: var(--kz-t-xs); color: var(--kz-ink-4); }
.kz-alerts__time  { display: block; margin-top: var(--kz-1); font-size: 0.6875rem; color: var(--kz-ink-5); }

.kz-alerts__empty { padding: var(--kz-5) var(--kz-4); font-size: var(--kz-t-xs); color: var(--kz-ink-4); }

.kz-alerts__foot {
    padding: var(--kz-3) var(--kz-4);
    border-top: 1px solid var(--kz-line-soft);
    background: var(--kz-surface-2);
    font-size: var(--kz-t-xs);
    font-weight: 700;
}

/* Unread marker on the Alerts trigger. */
.kz-menu__btn .kz-dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--kz-clay-600);
}


/* 7. Buttons
   ========================================================================== */

.kz-btn {
    --kz-btn-bg: transparent;
    --kz-btn-fg: var(--kz-ink-2);
    --kz-btn-bd: transparent;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--kz-2);
    padding: 0.6rem 1rem;
    background: var(--kz-btn-bg);
    color: var(--kz-btn-fg);
    border: 1px solid var(--kz-btn-bd);
    border-radius: var(--kz-r-md);
    font-family: inherit;
    font-size: var(--kz-t-sm);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.005em;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--kz-dur-1) var(--kz-ease),
                border-color var(--kz-dur-1) var(--kz-ease),
                color var(--kz-dur-1) var(--kz-ease),
                box-shadow var(--kz-dur-1) var(--kz-ease),
                transform var(--kz-dur-1) var(--kz-ease);
}

.kz-btn:hover { text-decoration: none; }
.kz-btn:active { transform: translateY(1px); }

.kz-btn--primary {
    --kz-btn-bg: var(--kz-em-700);
    --kz-btn-fg: #fff;
    --kz-btn-bd: var(--kz-em-800);
    box-shadow: var(--kz-e-1);
}

.kz-btn--primary:hover {
    --kz-btn-bg: var(--kz-em-800);
    --kz-btn-fg: #fff;
    box-shadow: var(--kz-e-2);
}

.kz-btn--secondary {
    --kz-btn-bg: var(--kz-surface);
    --kz-btn-fg: var(--kz-ink);
    --kz-btn-bd: var(--kz-line-strong);
    box-shadow: var(--kz-e-1);
}

.kz-btn--secondary:hover {
    --kz-btn-bg: var(--kz-surface);
    --kz-btn-bd: var(--kz-ink-5);
    --kz-btn-fg: var(--kz-ink);
}

.kz-btn--ghost { --kz-btn-fg: var(--kz-ink-3); }

.kz-btn--ghost:hover {
    --kz-btn-bg: var(--kz-paper-sunk);
    --kz-btn-fg: var(--kz-ink);
}

.kz-btn--quiet {
    --kz-btn-fg: var(--kz-ink-4);
    padding-left: var(--kz-2);
    padding-right: var(--kz-2);
    font-size: var(--kz-t-xs);
}

.kz-btn--quiet:hover { --kz-btn-fg: var(--kz-ink); }

.kz-btn--lg   { padding: 0.78rem 1.35rem; font-size: 1rem; border-radius: var(--kz-r-lg); }
.kz-btn--sm   { padding: 0.4rem 0.7rem; font-size: var(--kz-t-xs); }
.kz-btn--block { width: 100%; }

.kz-btn--danger {
    --kz-btn-bg: var(--kz-surface);
    --kz-btn-fg: var(--kz-clay-700);
    --kz-btn-bd: var(--kz-line-strong);
}
.kz-btn--danger:hover { --kz-btn-bd: var(--kz-clay-600); --kz-btn-fg: var(--kz-clay-700); }

.kz-btn__icon { flex: none; }

.kz-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kz-3);
}

.kz-btn-row--center { justify-content: center; }


/* 8. Panels and cards
   ========================================================================== */

/* Panel: the workhorse container for data. Hairline bounded, square-ish, with a
   distinct header band so a toolbar can be added later without redesign. */
.kz-panel {
    background: var(--kz-surface);
    border: 1px solid var(--kz-line);
    border-radius: var(--kz-r-xl);
    box-shadow: var(--kz-e-1);
    overflow: hidden;
}

.kz-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kz-4);
    padding: var(--kz-4) var(--kz-5);
    border-bottom: 1px solid var(--kz-line-soft);
    background: var(--kz-surface);
}

.kz-panel__title {
    display: flex;
    align-items: center;
    gap: var(--kz-2);
    margin: 0;
    color: var(--kz-ink);
    font-size: var(--kz-t-sm);
    font-weight: 650;
    letter-spacing: -0.005em;
}

.kz-panel__tools {
    display: flex;
    align-items: center;
    gap: var(--kz-2);
    flex: none;
}

.kz-panel__body { padding: var(--kz-5); }
.kz-panel__body--flush { padding: 0; }

.kz-panel__foot {
    padding: var(--kz-3) var(--kz-5);
    border-top: 1px solid var(--kz-line-soft);
    background: var(--kz-surface-2);
    color: var(--kz-ink-4);
    font-size: var(--kz-t-xs);
}

/* Card: lighter container for editorial content. */
.kz-card {
    background: var(--kz-surface);
    border: 1px solid var(--kz-line);
    border-radius: var(--kz-r-lg);
    box-shadow: var(--kz-e-1);
    transition: border-color var(--kz-dur-2) var(--kz-ease),
                box-shadow var(--kz-dur-2) var(--kz-ease),
                transform var(--kz-dur-2) var(--kz-ease);
}

.kz-card__body { padding: var(--kz-6); }

.kz-card--raised:hover {
    border-color: var(--kz-line-strong);
    box-shadow: var(--kz-e-2);
    transform: translateY(-2px);
}


/* 9. Metrics
   ========================================================================== */

.kz-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    background: var(--kz-surface);
    border: 1px solid var(--kz-line);
    border-radius: var(--kz-r-xl);
    box-shadow: var(--kz-e-1);
    overflow: hidden;
}

/* Dividers rather than gaps: reads as one instrument panel, not four cards. */
.kz-metric {
    display: flex;
    flex-direction: column;
    gap: var(--kz-2);
    padding: var(--kz-5);
    border-left: 1px solid var(--kz-line-soft);
    position: relative;
}

.kz-metric:first-child { border-left: 0; }

.kz-metric__label {
    display: flex;
    align-items: center;
    gap: var(--kz-2);
    color: var(--kz-ink-4);
    font-size: var(--kz-t-micro);
    font-weight: 650;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.kz-metric__value {
    color: var(--kz-ink);
    font-family: var(--kz-font-num);
    font-size: var(--kz-t-metric);
    font-weight: 660;
    letter-spacing: -0.03em;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

.kz-metric__meta {
    color: var(--kz-ink-4);
    font-size: var(--kz-t-xs);
    line-height: 1.45;
}

/* Accent bar keys the metric to its meaning without colouring the whole tile. */
.kz-metric__key {
    position: absolute;
    top: var(--kz-5);
    left: 0;
    width: 2px;
    height: 1.15rem;
    border-radius: 0 2px 2px 0;
    background: var(--kz-ink-5);
}

.kz-metric--points  .kz-metric__key { background: var(--kz-em-600); }
.kz-metric--rep     .kz-metric__key { background: var(--kz-bronze-600); }
.kz-metric--active  .kz-metric__key { background: var(--kz-azure-700); }
.kz-metric--history .kz-metric__key { background: var(--kz-ink-5); }


/* 10. Probability and data visualisation
   ========================================================================== */

/* Split bar: the core forecasting primitive. One track, YES from the left and
   NO from the right, so the two always read as one complete distribution. */
.kz-prob { display: block; }

.kz-prob__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--kz-4);
    margin-bottom: var(--kz-2);
}

.kz-prob__side {
    display: inline-flex;
    align-items: baseline;
    gap: var(--kz-2);
    font-size: var(--kz-t-xs);
    font-weight: 640;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.kz-prob__side--yes { color: var(--kz-yes); }
.kz-prob__side--no  { color: var(--kz-no); }

.kz-prob__pct {
    font-family: var(--kz-font-num);
    font-size: 1.0625rem;
    font-weight: 680;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    text-transform: none;
}

.kz-prob__track {
    position: relative;
    display: flex;
    height: 0.625rem;
    border-radius: var(--kz-r-pill);
    background: var(--kz-clay-100);
    overflow: hidden;
}

.kz-prob__fill {
    height: 100%;
    background: var(--kz-yes);
    transition: width var(--kz-dur-3) var(--kz-ease);
}

.kz-prob__track--slim { height: 0.375rem; }

/* Marker for a personal forecast against the community line. */
.kz-prob__marker {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    background: var(--kz-ink);
    border-radius: 1px;
    box-shadow: 0 0 0 2px var(--kz-surface);
    transition: left var(--kz-dur-3) var(--kz-ease);
}

.kz-prob__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kz-2) var(--kz-4);
    margin-top: var(--kz-3);
    color: var(--kz-ink-4);
    font-size: var(--kz-t-micro);
}

.kz-prob__legend b {
    color: var(--kz-ink-2);
    font-weight: 640;
    font-variant-numeric: tabular-nums;
}

.kz-swatch {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-right: var(--kz-1);
    border-radius: 2px;
    vertical-align: baseline;
}

.kz-swatch--yes { background: var(--kz-yes); }
.kz-swatch--no  { background: var(--kz-clay-100); border: 1px solid var(--kz-clay-600); }
.kz-swatch--you { background: var(--kz-ink); }

/* Figure block: a single dominant number with a caption. */
.kz-figure {
    display: flex;
    flex-direction: column;
    gap: var(--kz-1);
}

.kz-figure__value {
    color: var(--kz-ink);
    font-family: var(--kz-font-num);
    font-size: var(--kz-t-figure);
    font-weight: 660;
    line-height: 1;
    letter-spacing: -0.035em;
    font-variant-numeric: tabular-nums;
}

.kz-figure__caption {
    color: var(--kz-ink-4);
    font-size: var(--kz-t-micro);
    font-weight: 620;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}


/* 11. Data rows and meta lists
   ========================================================================== */

.kz-rows { margin: 0; padding: 0; list-style: none; }

.kz-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kz-4);
    padding: var(--kz-4) var(--kz-5);
    border-top: 1px solid var(--kz-line-soft);
}

.kz-rows > .kz-row:first-child { border-top: 0; }

.kz-row--interactive { transition: background-color var(--kz-dur-1) var(--kz-ease); }
.kz-row--interactive:hover { background: var(--kz-surface-2); }

.kz-row__main { min-width: 0; }

.kz-row__title {
    display: block;
    color: var(--kz-ink);
    font-size: var(--kz-t-sm);
    font-weight: 600;
    line-height: 1.4;
}

.kz-row__meta {
    display: block;
    margin-top: 2px;
    color: var(--kz-ink-4);
    font-size: var(--kz-t-xs);
}

.kz-row__value {
    flex: none;
    color: var(--kz-ink);
    font-family: var(--kz-font-num);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.kz-row__value--credit { color: var(--kz-positive); }
.kz-row__value--debit  { color: var(--kz-negative); }

/* Compact label/value list for account and question metadata. */
.kz-meta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--kz-3) var(--kz-5);
    margin: 0;
}

.kz-meta dt {
    color: var(--kz-ink-4);
    font-size: var(--kz-t-xs);
    font-weight: 560;
}

.kz-meta dd {
    margin: 0;
    color: var(--kz-ink);
    font-size: var(--kz-t-xs);
    font-weight: 600;
    text-align: right;
    overflow-wrap: anywhere;
}

/* Left-aligned variant: for metadata whose values are sentences or links rather
   than short figures, so long text stays readable instead of ragged-right. */
.kz-meta--rows {
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: var(--kz-3) var(--kz-4);
}

.kz-meta--rows dt { padding-top: 1px; }

.kz-meta--rows dd {
    text-align: left;
    font-weight: 500;
    line-height: 1.55;
}

@media (max-width: 40rem) {
    .kz-meta--rows { grid-template-columns: minmax(0, 1fr); gap: var(--kz-1) 0; }
    .kz-meta--rows dt { padding-top: var(--kz-2); }
}

/* Read-only label/value blocks for a reviewed candidate: label above the value,
   value full width, so a paragraph of resolution criteria reads as a paragraph. */
.kz-defs { display: flex; flex-direction: column; gap: var(--kz-4); }

.kz-def__label {
    display: block;
    margin-bottom: 3px;
    color: var(--kz-ink-4);
    font-size: var(--kz-t-micro);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.kz-def__value {
    margin: 0;
    color: var(--kz-ink);
    font-size: var(--kz-t-sm);
    line-height: 1.55;
    overflow-wrap: anywhere;
}

/* Horizontal stat strip, for question metadata such as closing and volume. */
.kz-statline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kz-5);
    margin: 0;
    padding: 0;
}

.kz-statline__item { display: flex; flex-direction: column; gap: 2px; }

.kz-statline__label {
    color: var(--kz-ink-4);
    font-size: var(--kz-t-micro);
    font-weight: 620;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.kz-statline__value {
    color: var(--kz-ink);
    font-family: var(--kz-font-num);
    font-size: var(--kz-t-sm);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}


/* 12. Tags, pills, badges, status
   ========================================================================== */

.kz-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--kz-1);
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--kz-line);
    border-radius: var(--kz-r-pill);
    background: var(--kz-surface);
    color: var(--kz-ink-3);
    font-size: var(--kz-t-micro);
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.kz-taglist {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kz-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.kz-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--kz-2);
    padding: 0.2rem 0.6rem;
    border-radius: var(--kz-r-sm);
    font-size: var(--kz-t-micro);
    font-weight: 660;
    line-height: 1.5;
    white-space: nowrap;
}

.kz-pill--points { background: var(--kz-em-50); color: var(--kz-em-800); font-variant-numeric: tabular-nums; }
.kz-pill--muted  { background: var(--kz-paper-sunk); color: var(--kz-ink-4); }
.kz-pill--rep    { background: var(--kz-bronze-50); color: var(--kz-bronze-700); }
.kz-pill--info   { background: var(--kz-azure-50); color: var(--kz-azure-700); }

.kz-badge {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    border-radius: var(--kz-r-xs);
    background: var(--kz-paper-sunk);
    color: var(--kz-ink-4);
    font-size: 0.6875rem;
    font-weight: 680;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.kz-badge--example {
    background: var(--kz-bronze-50);
    color: var(--kz-bronze-700);
    border: 1px solid var(--kz-bronze-100);
}

.kz-badge--open { background: var(--kz-em-50); color: var(--kz-em-800); }

/* Status dot with label. */
.kz-status {
    display: inline-flex;
    align-items: center;
    gap: var(--kz-2);
    color: var(--kz-ink-3);
    font-size: var(--kz-t-xs);
    font-weight: 600;
}

.kz-status__dot {
    width: 0.4375rem;
    height: 0.4375rem;
    flex: none;
    border-radius: 50%;
    background: var(--kz-ink-5);
}

.kz-status--active .kz-status__dot {
    background: var(--kz-em-600);
    box-shadow: 0 0 0 3px var(--kz-em-50);
}

.kz-status--pending .kz-status__dot {
    background: var(--kz-bronze-600);
    box-shadow: 0 0 0 3px var(--kz-bronze-50);
}


/* 13. Tabs and segmented controls
   Defined for the Markets, My Predictions, and Profile views that follow.
   ========================================================================== */

.kz-tabs {
    display: flex;
    gap: var(--kz-1);
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid var(--kz-line);
}

.kz-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--kz-2);
    padding: var(--kz-3) var(--kz-3);
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: var(--kz-ink-4);
    font-size: var(--kz-t-sm);
    font-weight: 580;
    transition: color var(--kz-dur-1) var(--kz-ease),
                border-color var(--kz-dur-1) var(--kz-ease);
}

.kz-tab:hover { color: var(--kz-ink); text-decoration: none; }

.kz-tab[aria-selected="true"],
.kz-tab[aria-current="page"] {
    color: var(--kz-ink);
    border-bottom-color: var(--kz-em-600);
    font-weight: 650;
}

.kz-segmented {
    display: inline-flex;
    padding: 2px;
    background: var(--kz-paper-sunk);
    border: 1px solid var(--kz-line);
    border-radius: var(--kz-r-md);
}

.kz-segmented__item {
    padding: 0.3rem 0.7rem;
    border: 0;
    border-radius: var(--kz-r-sm);
    background: transparent;
    color: var(--kz-ink-4);
    font-family: inherit;
    font-size: var(--kz-t-xs);
    font-weight: 620;
    cursor: pointer;
    transition: background-color var(--kz-dur-1) var(--kz-ease),
                color var(--kz-dur-1) var(--kz-ease);
}

.kz-segmented__item[aria-pressed="true"] {
    background: var(--kz-surface);
    color: var(--kz-ink);
    box-shadow: var(--kz-e-1);
}


/* 14. Forms
   ========================================================================== */

.kz-form { display: flex; flex-direction: column; gap: var(--kz-5); }

.kz-field { display: flex; flex-direction: column; gap: var(--kz-2); }

.kz-label {
    color: var(--kz-ink);
    font-size: var(--kz-t-sm);
    font-weight: 620;
    letter-spacing: -0.005em;
}

.kz-input {
    width: 100%;
    padding: 0.68rem 0.8rem;
    background: var(--kz-surface);
    border: 1px solid var(--kz-line-strong);
    border-radius: var(--kz-r-md);
    color: var(--kz-ink);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.4;
    transition: border-color var(--kz-dur-1) var(--kz-ease),
                box-shadow var(--kz-dur-1) var(--kz-ease);
}

.kz-input::placeholder { color: var(--kz-ink-5); }

.kz-input:hover { border-color: var(--kz-ink-5); }

.kz-input:focus {
    outline: none;
    border-color: var(--kz-em-600);
    box-shadow: var(--kz-focus-ring);
}

.kz-input[aria-invalid="true"] { border-color: var(--kz-clay-600); }

.kz-input[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px rgba(176, 74, 43, 0.22);
}

.kz-hint { color: var(--kz-ink-4); font-size: var(--kz-t-xs); }

.kz-error {
    display: flex;
    align-items: flex-start;
    gap: var(--kz-2);
    color: var(--kz-clay-700);
    font-size: var(--kz-t-xs);
    font-weight: 560;
}

.kz-form__foot {
    color: var(--kz-ink-4);
    font-size: var(--kz-t-xs);
    text-align: center;
}


/* 15. Alerts and notes
   ========================================================================== */

.kz-alert {
    display: flex;
    gap: var(--kz-3);
    padding: var(--kz-4);
    border: 1px solid transparent;
    border-radius: var(--kz-r-md);
    font-size: var(--kz-t-sm);
    line-height: 1.55;
}

.kz-alert__icon { flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.16rem; }

.kz-alert--success { background: var(--kz-em-50);    border-color: var(--kz-em-200);     color: var(--kz-em-800); }
.kz-alert--error   { background: var(--kz-clay-50);  border-color: var(--kz-clay-100);   color: var(--kz-clay-700); }
.kz-alert--info    { background: var(--kz-azure-50); border-color: var(--kz-azure-100);  color: var(--kz-azure-700); }

/* Note: quieter than an alert, for standing disclosures. */
.kz-note {
    display: flex;
    gap: var(--kz-3);
    padding: var(--kz-4);
    border: 1px dashed var(--kz-line-strong);
    border-radius: var(--kz-r-md);
    background: var(--kz-surface-2);
    color: var(--kz-ink-4);
    font-size: var(--kz-t-xs);
    line-height: 1.55;
}

.kz-note__icon { flex: none; width: 1rem; height: 1rem; margin-top: 0.14rem; }


/* 16. Empty states and checklists
   ========================================================================== */

/* Deliberate, not unfinished: an empty state is a status report. */
.kz-empty {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--kz-6);
    align-items: start;
    padding: var(--kz-7) var(--kz-6);
}

.kz-empty__art { width: 8.5rem; flex: none; }

.kz-empty__title { margin-bottom: var(--kz-2); font-size: var(--kz-t-h3); }

.kz-empty__text {
    max-width: 52ch;
    margin-bottom: var(--kz-5);
    color: var(--kz-ink-4);
    font-size: var(--kz-t-sm);
}

.kz-empty__actions { margin-top: var(--kz-5); }

/* Readiness checklist: reports real account state, never a mock. */
.kz-checklist {
    display: flex;
    flex-direction: column;
    gap: var(--kz-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.kz-checkitem {
    display: flex;
    align-items: flex-start;
    gap: var(--kz-3);
    font-size: var(--kz-t-sm);
}

.kz-checkitem__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
    margin-top: 0.12rem;
    border-radius: 50%;
    border: 1px solid var(--kz-line-strong);
    background: var(--kz-surface);
    color: var(--kz-ink-5);
}

.kz-checkitem--done .kz-checkitem__mark {
    background: var(--kz-em-600);
    border-color: var(--kz-em-700);
    color: #fff;
}

.kz-checkitem--pending .kz-checkitem__mark {
    border-style: dashed;
    border-color: var(--kz-bronze-600);
    color: var(--kz-bronze-600);
}

.kz-checkitem__text { color: var(--kz-ink-2); }
.kz-checkitem__text b { font-weight: 640; }

.kz-checkitem__note {
    display: block;
    color: var(--kz-ink-4);
    font-size: var(--kz-t-xs);
}


/* 17. Landing sections
   ========================================================================== */

.kz-hero {
    position: relative;
    padding: var(--kz-9) 0 var(--kz-8);
    background:
        radial-gradient(46rem 26rem at 8% -14%, var(--kz-em-50), transparent 62%),
        radial-gradient(34rem 20rem at 100% -8%, var(--kz-bronze-50), transparent 60%);
    border-bottom: 1px solid var(--kz-line);
    overflow: hidden;
}

.kz-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: var(--kz-9);
    align-items: center;
}

.kz-hero__lead {
    max-width: 42ch;
    margin-bottom: var(--kz-6);
    color: var(--kz-ink-3);
    font-size: 1.1875rem;
    line-height: 1.58;
}

.kz-hero__actions { margin-bottom: var(--kz-5); }

/* Landing hero: centred lead copy with the actions nudged in to sit under it. */
.kz-hero__lead--center { max-width: none; text-align: center; }
.kz-hero__actions--nudge { justify-content: center; padding-left: clamp(0rem, 3vw, 2rem); }
@media (max-width: 60rem) {
    .kz-hero__actions--nudge { padding-left: 0; }
}

.kz-hero__trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kz-2) var(--kz-4);
    margin: 0;
    color: var(--kz-ink-4);
    font-size: var(--kz-t-xs);
}

.kz-hero__trust-item {
    display: inline-flex;
    align-items: center;
    gap: var(--kz-2);
}

.kz-hero__trust svg { color: var(--kz-em-600); flex: none; }

/* Example question card: the product's core object, shown as an illustration. */
.kz-example {
    background: var(--kz-surface);
    border: 1px solid var(--kz-line-strong);
    border-radius: var(--kz-r-xl);
    box-shadow: var(--kz-e-3);
    overflow: hidden;
}

.kz-example__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kz-3);
    padding: var(--kz-3) var(--kz-5);
    background: var(--kz-surface-2);
    border-bottom: 1px solid var(--kz-line);
}

.kz-example__label {
    color: var(--kz-ink-4);
    font-size: var(--kz-t-micro);
    font-weight: 660;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.kz-example__body { padding: var(--kz-5); }

.kz-example__meta {
    display: flex;
    align-items: center;
    gap: var(--kz-2);
    margin-bottom: var(--kz-3);
}

.kz-example__question {
    margin-bottom: var(--kz-5);
    color: var(--kz-ink);
    font-size: 1.15rem;
    font-weight: 640;
    line-height: 1.38;
    letter-spacing: -0.015em;
}

.kz-example__divider {
    height: 1px;
    margin: var(--kz-5) 0;
    background: var(--kz-line-soft);
}

.kz-example__foot {
    padding: var(--kz-3) var(--kz-5);
    background: var(--kz-surface-2);
    border-top: 1px solid var(--kz-line);
    color: var(--kz-ink-4);
    font-size: var(--kz-t-micro);
    line-height: 1.5;
}

.kz-section {
    padding: var(--kz-10) 0;
}

.kz-section--tight { padding: var(--kz-9) 0; }

.kz-section--alt {
    background: var(--kz-surface);
    border-top: 1px solid var(--kz-line);
    border-bottom: 1px solid var(--kz-line);
}

.kz-feature__title { margin-bottom: var(--kz-2); font-size: 1.0625rem; }

.kz-feature__text { color: var(--kz-ink-4); font-size: var(--kz-t-sm); }

/* Steps: editorial numbering on a hairline grid. */
.kz-steps {
    counter-reset: kz-step;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--kz-line);
}

.kz-step {
    counter-increment: kz-step;
    padding: var(--kz-6) var(--kz-6) var(--kz-6) 0;
    border-left: 1px solid var(--kz-line);
    padding-left: var(--kz-6);
}

.kz-step:first-child { border-left: 0; padding-left: 0; }

.kz-step::before {
    content: counter(kz-step, decimal-leading-zero);
    display: block;
    margin-bottom: var(--kz-4);
    color: var(--kz-em-600);
    font-family: var(--kz-font-num);
    font-size: var(--kz-t-sm);
    font-weight: 700;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
}

.kz-step__title { margin-bottom: var(--kz-2); font-size: 1.0625rem; }
.kz-step__text { margin: 0; color: var(--kz-ink-4); font-size: var(--kz-t-sm); }

/* Closing call to action. */
.kz-cta {
    position: relative;
    padding: var(--kz-9) var(--kz-8);
    border-radius: var(--kz-r-xl);
    background:
        radial-gradient(38rem 20rem at 12% 0%, rgba(18, 128, 99, 0.22), transparent 60%),
        var(--kz-em-900);
    color: #C6D6D0;
    text-align: center;
    overflow: hidden;
}

.kz-cta h2 { color: #fff; }

.kz-cta__text {
    max-width: 50ch;
    margin: 0 auto var(--kz-6);
    font-size: 1.0625rem;
}

.kz-cta .kz-btn--primary {
    --kz-btn-bg: #fff;
    --kz-btn-fg: var(--kz-em-900);
    --kz-btn-bd: #fff;
}

.kz-cta .kz-btn--primary:hover {
    --kz-btn-bg: #EDF5F1;
    --kz-btn-fg: var(--kz-em-900);
}

.kz-cta .kz-btn--secondary {
    --kz-btn-bg: transparent;
    --kz-btn-fg: #fff;
    --kz-btn-bd: rgba(255, 255, 255, 0.32);
    box-shadow: none;
}

.kz-cta .kz-btn--secondary:hover {
    --kz-btn-bg: rgba(255, 255, 255, 0.09);
    --kz-btn-bd: rgba(255, 255, 255, 0.55);
    --kz-btn-fg: #fff;
}


/* 17b. Hero visual, category bar, quote
   ========================================================================== */

.kz-hero__visual {
    position: relative;
    display: block;
}

/* The hero artwork is a transparent PNG whose continent silhouette is part of
   the image, so it sits directly on the page canvas with no frame or plate. */
.kz-hero__art {
    display: block;
    width: 100%;
    max-width: 30rem;
    height: auto;
    margin: 0 auto;
    filter: drop-shadow(0 22px 44px rgba(12, 22, 19, 0.20));
}

/*
 * Example card overlays the lower third of the artwork on wide screens, sitting
 * across southern Africa. Its natural height is close to 30% of the image
 * height at this width, so anchoring it to the bottom produces that coverage
 * without pinning a fixed height that would clip the text.
 * On phones it returns to normal flow, where overlap would cost legibility.
 */
.kz-example--float {
    position: absolute;
    left: 50%;
    bottom: 1%;
    transform: translateX(-50%);
    width: min(96%, 23rem);
    z-index: 2;
}

.kz-example--compact .kz-example__body { padding: var(--kz-4); }
.kz-example--compact .kz-example__question { font-size: 0.95rem; margin-bottom: var(--kz-4); }
.kz-example--compact .kz-example__head,
.kz-example--compact .kz-example__foot { padding: var(--kz-2) var(--kz-4); }
.kz-example--compact .kz-example__foot { font-size: 0.6875rem; }

/* Pull quote */
.kz-quote {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding-left: var(--kz-6);
    border-left: 2px solid var(--kz-em-200);
}

.kz-quote__text {
    margin-bottom: var(--kz-4);
    color: var(--kz-ink-2);
    font-size: 1.15rem;
    font-style: italic;
    line-height: 1.5;
    letter-spacing: -0.015em;
}

.kz-quote__by {
    color: var(--kz-ink-4);
    font-size: var(--kz-t-xs);
    font-weight: 620;
}

/* Compact header for narrow form pages */
.kz-formhead {
    margin-bottom: var(--kz-6);
    text-align: center;
}

.kz-formhead h1 { margin-bottom: var(--kz-2); font-size: var(--kz-t-h2); }
.kz-formhead p { margin: 0; color: var(--kz-ink-4); font-size: var(--kz-t-sm); }


/* 17c. Marketplace: toolbar, filters, market cards
   Reused later by market detail, my predictions, profile, and admin lists.
   ========================================================================== */

/* Toolbar groups search and filters into one control band under the header. */
.kz-toolbar {
    display: flex;
    flex-direction: column;
    gap: var(--kz-4);
    padding-bottom: var(--kz-5);
    margin-bottom: var(--kz-5);
    border-bottom: 1px solid var(--kz-line);
}

.kz-toolbar__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kz-4);
    flex-wrap: wrap;
}

/* Search */
.kz-search { display: flex; width: 100%; max-width: 30rem; }

.kz-search__field {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
}

.kz-search__icon {
    position: absolute;
    left: 0.8rem;
    width: 1.05rem;
    height: 1.05rem;
    color: var(--kz-ink-5);
    pointer-events: none;
}

.kz-search__input {
    width: 100%;
    padding: 0.68rem 0.8rem 0.68rem 2.5rem;
    background: var(--kz-surface);
    border: 1px solid var(--kz-line-strong);
    border-radius: var(--kz-r-md) 0 0 var(--kz-r-md);
    color: var(--kz-ink);
    font-family: inherit;
    font-size: var(--kz-t-sm);
    line-height: 1.4;
    transition: border-color var(--kz-dur-1) var(--kz-ease),
                box-shadow var(--kz-dur-1) var(--kz-ease);
}

.kz-search__input::placeholder { color: var(--kz-ink-5); }
.kz-search__input:hover { border-color: var(--kz-ink-5); }

.kz-search__input:focus {
    outline: none;
    border-color: var(--kz-em-600);
    box-shadow: var(--kz-focus-ring);
    z-index: 1;
}

.kz-search__submit {
    flex: none;
    border-radius: 0 var(--kz-r-md) var(--kz-r-md) 0;
    margin-left: -1px;
}

.kz-search__clear { flex: none; margin-left: var(--kz-2); }

/* Filter chips. Horizontally scrollable on narrow screens. */
.kz-chips {
    display: flex;
    gap: var(--kz-2);
    margin: 0;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
}

.kz-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--kz-2);
    padding: 0.36rem 0.75rem;
    background: var(--kz-surface);
    border: 1px solid var(--kz-line);
    border-radius: var(--kz-r-pill);
    color: var(--kz-ink-3);
    font-size: var(--kz-t-xs);
    font-weight: 600;
    white-space: nowrap;
    transition: background-color var(--kz-dur-1) var(--kz-ease),
                border-color var(--kz-dur-1) var(--kz-ease),
                color var(--kz-dur-1) var(--kz-ease);
}

.kz-chip:hover {
    border-color: var(--kz-line-strong);
    color: var(--kz-ink);
    text-decoration: none;
}

.kz-chip[aria-current="true"] {
    background: var(--kz-em-800);
    border-color: var(--kz-em-800);
    color: #fff;
}

.kz-chip[aria-current="true"]:hover { color: #fff; }

.kz-chip__count {
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
}

/* Result summary line */
.kz-resultbar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--kz-4);
    flex-wrap: wrap;
    margin-bottom: var(--kz-5);
}

.kz-resultbar__count {
    color: var(--kz-ink);
    font-size: var(--kz-t-sm);
    font-weight: 640;
    font-variant-numeric: tabular-nums;
}

.kz-resultbar__note { color: var(--kz-ink-4); font-size: var(--kz-t-xs); }

/* Explore-markets page head: eyebrow + display title, supporting line at right. */
.kz-markethead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--kz-6);
    flex-wrap: wrap;
    padding: var(--kz-2) 0 var(--kz-6);
}

.kz-markethead__title { margin: 0; max-width: 16ch; }
.kz-markethead__sub { max-width: 40ch; margin: 0; color: var(--kz-ink-3); font-size: 1rem; }

/* Sticky filter band beneath the header. */
.kz-filterbar {
    position: sticky;
    top: 4.25rem;
    z-index: 40;
    background: var(--kz-paper);
    border-top: 1px solid var(--kz-line);
    border-bottom: 1px solid var(--kz-line);
    padding: var(--kz-4) 0;
}

.kz-filterbar.is-stuck { box-shadow: var(--kz-e-1); }

.kz-filterbar__row {
    display: flex;
    align-items: center;
    gap: var(--kz-4);
    flex-wrap: wrap;
    margin-bottom: var(--kz-3);
}

.kz-filterbar__chips {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kz-4) var(--kz-6);
    flex-wrap: wrap;
}

/* Segmented control usable as buttons or as links. */
.kz-segmented__item {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.85rem;
    border: 0;
    border-radius: var(--kz-r-sm);
    background: transparent;
    color: var(--kz-ink-3);
    font-family: inherit;
    font-size: var(--kz-t-xs);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--kz-dur-1) var(--kz-ease), color var(--kz-dur-1) var(--kz-ease);
}

.kz-segmented__item[aria-pressed="true"] {
    background: var(--kz-em-700);
    color: #fff;
    box-shadow: var(--kz-e-1);
}

.kz-segmented__item:not([aria-pressed="true"]):hover { color: var(--kz-em-700); }

/* Featured market: a dark, prominent card at the top of the unfiltered board. */
.kz-featured {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(15rem, 1fr);
    background: var(--kz-em-900);
    border-radius: var(--kz-r-xl);
    overflow: hidden;
    margin-bottom: var(--kz-6);
    box-shadow: var(--kz-e-lift);
    color: #CFE0D6;
}

.kz-featured:hover { text-decoration: none; }
.kz-featured__main { padding: var(--kz-7); }

.kz-featured__label {
    display: inline-block;
    margin-bottom: var(--kz-4);
    padding: 0.25rem 0.6rem;
    border-radius: var(--kz-r-sm);
    background: var(--kz-em-mint);
    color: var(--kz-em-900);
    font-size: var(--kz-t-micro);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.kz-featured__q {
    display: block;
    color: #fff;
    font-family: var(--kz-font-display);
    font-size: clamp(1.4rem, 1rem + 1.6vw, 2rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.025em;
    max-width: 24ch;
}

.kz-featured__blurb { margin: var(--kz-4) 0 0; font-size: var(--kz-t-sm); color: #A9C3B4; max-width: 44ch; }

.kz-featured__side {
    padding: var(--kz-7);
    background: rgba(0, 0, 0, 0.14);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--kz-3);
}

.kz-featured__row { display: flex; align-items: baseline; justify-content: space-between; }
.kz-featured__yes { font-size: var(--kz-t-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--kz-em-mint); }

.kz-featured__pct {
    font-family: var(--kz-font-display);
    font-size: 2.6rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #fff;
}

.kz-featured__track { height: 9px; border-radius: 5px; background: rgba(244, 247, 242, 0.16); overflow: hidden; }
.kz-featured__fill { height: 100%; background: var(--kz-em-mint); border-radius: 5px; }
.kz-featured__meta { display: flex; justify-content: space-between; font-size: var(--kz-t-xs); color: #A9C3B4; }

/* Market grid + card. */
.kz-marketgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20.5rem, 1fr));
    gap: var(--kz-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.kz-mcard {
    display: flex;
    flex-direction: column;
    gap: var(--kz-4);
    height: 100%;
    padding: var(--kz-5);
    background: var(--kz-surface);
    border: 1px solid var(--kz-line);
    border-radius: var(--kz-r-lg);
    box-shadow: var(--kz-e-1);
    color: var(--kz-ink);
    transition: border-color var(--kz-dur-2) var(--kz-ease),
                box-shadow var(--kz-dur-2) var(--kz-ease),
                transform var(--kz-dur-2) var(--kz-ease);
}

.kz-mcard:hover {
    border-color: var(--kz-line-strong);
    box-shadow: var(--kz-e-lift);
    transform: translateY(-2px);
    text-decoration: none;
}

.kz-mcard__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--kz-2); flex-wrap: wrap; }
.kz-mcard__tags { display: flex; gap: var(--kz-2); flex-wrap: wrap; }

.kz-mcard__q {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 680;
    line-height: 1.34;
    letter-spacing: -0.012em;
}

.kz-mcard__blurb {
    margin: 0;
    color: var(--kz-ink-4);
    font-size: var(--kz-t-sm);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kz-mcard__prob { margin-top: auto; }

.kz-mcard__awaiting {
    margin: 0;
    padding: var(--kz-3) var(--kz-4);
    border: 1px dashed var(--kz-line-strong);
    border-radius: var(--kz-r-md);
    background: var(--kz-surface-2);
    color: var(--kz-ink-4);
    font-size: var(--kz-t-xs);
}

.kz-mcard__result { display: flex; align-items: center; gap: var(--kz-3); flex-wrap: wrap; }
.kz-mcard__resultnote { color: var(--kz-ink-4); font-size: var(--kz-t-xs); }

.kz-mcard__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kz-3);
    padding-top: var(--kz-3);
    border-top: 1px solid var(--kz-line-soft);
    color: var(--kz-ink-4);
    font-size: var(--kz-t-xs);
    font-variant-numeric: tabular-nums;
}

.kz-mcard__yours { color: var(--kz-em-800); font-weight: 700; }

/* Resolved verdict chip (also used on the forecast card). */
.kz-verdict {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    border-radius: var(--kz-r-sm);
    font-size: var(--kz-t-xs);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.kz-verdict--yes { background: var(--kz-em-50); color: var(--kz-em-800); }
.kz-verdict--no  { background: var(--kz-clay-50); color: var(--kz-clay-700); }

.kz-badge--closingsoon { background: var(--kz-bronze-100); color: var(--kz-bronze-700); }

/* Empty and no-result states sit inside a panel so the page keeps its frame. */
.kz-noresults {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--kz-9) var(--kz-6);
}

.kz-noresults__art { width: 5.5rem; margin-bottom: var(--kz-5); }
.kz-noresults__title { margin-bottom: var(--kz-3); font-size: var(--kz-t-h3); }

.kz-noresults__text {
    max-width: 52ch;
    margin-bottom: var(--kz-6);
    color: var(--kz-ink-4);
    font-size: var(--kz-t-sm);
}

.kz-noresults__cats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--kz-2);
    margin-top: var(--kz-6);
    padding-top: var(--kz-5);
    border-top: 1px dashed var(--kz-line);
    max-width: 34rem;
}


/* 18. Footer
   ========================================================================== */

.kz-footer {
    --kz-footer-fg:   #C4D8CC;
    --kz-footer-dim:  #8CA79A;
    --kz-footer-link: #E7F1EB;
    --kz-footer-rule: rgba(255, 255, 255, 0.12);

    flex: none;
    background: var(--kz-em-900);
    border-top: 3px solid var(--kz-em-mint);
    color: var(--kz-footer-fg);
    font-size: var(--kz-t-sm);
}

.kz-footer__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--kz-2);
    color: #fff;
    font-family: var(--kz-font-display);
    font-size: 1.55rem;
    font-weight: 820;
    letter-spacing: -0.03em;
}
.kz-footer__brand svg { flex: none; }
.kz-footer__brand--sm { font-size: 1.05rem; }

.kz-footer a { color: var(--kz-footer-link); text-decoration: none; transition: color 0.14s ease; }
.kz-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* -- Mini: a slim strip used on every application page -------------------- */
.kz-footer--mini { padding: var(--kz-6) 0; }

.kz-footer__miniinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--kz-3);
    text-align: center;
}
.kz-footer__minilegal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--kz-1) var(--kz-3);
    font-size: var(--kz-t-xs);
    color: var(--kz-footer-dim);
}
.kz-footer__sep { color: var(--kz-footer-rule); }

/* Legacy single-line strip (kept for any view still using it). */
.kz-footer__legalinner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kz-3) var(--kz-6);
    justify-content: center;
    font-size: var(--kz-t-xs);
    color: var(--kz-footer-dim);
}

/* -- Full: the marketing footer on the landing page --------------------- */
.kz-footer--full .kz-footer__inner {
    padding: clamp(3rem, 6vw, 4.75rem) 0 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.75rem, 3.5vw, 2.5rem);
}

.kz-footer__lockup { display: flex; flex-direction: column; align-items: center; gap: var(--kz-3); }

.kz-footer__note {
    max-width: 52ch;
    margin: 0;
    line-height: 1.65;
    color: var(--kz-footer-fg);
    font-size: 1rem;
}

.kz-footer__alpha {
    display: inline-flex;
    align-items: center;
    gap: var(--kz-2);
    padding: 0.3rem 0.8rem;
    border: 1px solid rgba(127, 211, 168, 0.4);
    border-radius: 999px;
    font-size: var(--kz-t-xs);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--kz-em-mint);
}
.kz-footer__alpha::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--kz-em-mint);
}

/* Rows of links, centred and wrapping. */
.kz-footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: var(--kz-3) clamp(1rem, 3vw, 1.9rem);
    max-width: 54rem;
}
.kz-footer__links--primary a { font-weight: 620; font-size: 1.0625rem; color: #fff; }
.kz-footer__links--primary a:hover { color: var(--kz-em-mint); }
.kz-footer__links--secondary a { font-size: var(--kz-t-sm); color: var(--kz-footer-fg); }
.kz-footer__links--secondary a:hover { color: #fff; }

/* Category line: a labelled, dot-separated inline list. */
.kz-footer__cats {
    max-width: 48rem;
    font-size: var(--kz-t-sm);
    line-height: 1.9;
    color: var(--kz-footer-fg);
}
.kz-footer__cats-label {
    display: block;
    margin-bottom: var(--kz-1);
    font-size: var(--kz-t-micro);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--kz-em-mint);
}
.kz-footer__cats a { color: var(--kz-footer-fg); }
.kz-footer__cats a:hover { color: #fff; }
.kz-footer__cats .kz-footer__sep { margin: 0 var(--kz-2); }

.kz-footer--full .kz-footer__legal {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--kz-1) var(--kz-3);
    width: 100%;
    border-top: 1px solid var(--kz-footer-rule);
    padding: var(--kz-5) 0;
    font-size: var(--kz-t-xs);
    color: var(--kz-footer-dim);
    text-align: center;
}
.kz-footer__legal-brand {
    font-family: var(--kz-font-display);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--kz-footer-fg);
}


/* 19. Utilities
   ========================================================================== */

.kz-stack    { display: flex; flex-direction: column; }
.kz-stack--2 { gap: var(--kz-2); }
.kz-stack--3 { gap: var(--kz-3); }
.kz-stack--4 { gap: var(--kz-4); }
.kz-stack--5 { gap: var(--kz-5); }
.kz-stack--6 { gap: var(--kz-6); }

.kz-mt-1 { margin-top: var(--kz-1); }
.kz-mt-2 { margin-top: var(--kz-2); }
.kz-mt-3 { margin-top: var(--kz-3); }
.kz-mt-4 { margin-top: var(--kz-4); }
.kz-mt-5 { margin-top: var(--kz-5); }
.kz-mt-6 { margin-top: var(--kz-6); }
.kz-mt-7 { margin-top: var(--kz-7); }
.kz-mb-0 { margin-bottom: 0; }
.kz-mb-1 { margin-bottom: var(--kz-1); }
.kz-mb-2 { margin-bottom: var(--kz-2); }
.kz-mb-3 { margin-bottom: var(--kz-3); }
.kz-mb-4 { margin-bottom: var(--kz-4); }
.kz-mb-5 { margin-bottom: var(--kz-5); }
.kz-mb-6 { margin-bottom: var(--kz-6); }
.kz-mb-7 { margin-bottom: var(--kz-7); }

.kz-muted  { color: var(--kz-ink-4); }
.kz-strong { color: var(--kz-ink); font-weight: 620; }
.kz-small  { font-size: var(--kz-t-sm); }
.kz-xs     { font-size: var(--kz-t-xs); }
.kz-center { text-align: center; }
.kz-mx-auto { margin-left: auto; margin-right: auto; }

.kz-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}


/* 20. Responsive
   ========================================================================== */

@media (max-width: 64rem) {
    .kz-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--kz-7); }
    .kz-marketlist { grid-template-columns: minmax(0, 1fr); }
    .kz-search { max-width: none; }
    .kz-quote { margin-top: var(--kz-6); padding-left: var(--kz-5); }
    .kz-workspace  { grid-template-columns: minmax(0, 1fr); }
    .kz-rail       { position: static; }
    .kz-grid--4    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kz-metrics    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kz-metric:nth-child(3) { border-left: 0; }
    .kz-metric:nth-child(n + 3) { border-top: 1px solid var(--kz-line-soft); }
    .kz-steps      { grid-template-columns: minmax(0, 1fr); border-top: 0; }
    .kz-step       { border-left: 0; border-top: 1px solid var(--kz-line); padding-left: 0; }
    .kz-step:first-child { border-top: 1px solid var(--kz-line); }
}

@media (max-width: 48rem) {
    .kz-container { padding: 0 var(--kz-4); }

    /*
     * Filter chips scroll horizontally rather than wrapping into a tall block
     * that pushes the questions off screen. The negative margin lets the strip
     * bleed to the screen edge so it reads as scrollable.
     */
    .kz-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        margin: 0 calc(var(--kz-4) * -1);
        padding: 0 var(--kz-4) var(--kz-1);
    }

    .kz-chips::-webkit-scrollbar { display: none; }

    .kz-chip { min-height: 2.25rem; padding: 0.45rem 0.85rem; }

    .kz-toolbar__row { align-items: stretch; }
    .kz-search__input { font-size: 1rem; }
    .kz-search__submit { min-height: 2.75rem; }

    .kz-market__head { padding: var(--kz-4) var(--kz-4) 0; }
    .kz-market__body { padding: var(--kz-3) var(--kz-4) var(--kz-4); }
    .kz-market__prob { padding: var(--kz-4) var(--kz-4) 0; }
    .kz-market__foot { padding: var(--kz-4); }

    .kz-noresults { padding: var(--kz-7) var(--kz-5); }

    /* Overlap is a wide-screen affordance only. */
    .kz-hero__art { max-width: 22rem; }

    .kz-example--float {
        position: static;
        width: 100%;
        margin-top: var(--kz-5);
        transform: none;
    }


    .kz-quote {
        padding-left: var(--kz-4);
        margin-top: var(--kz-5);
    }

    .kz-quote__text { font-size: 1.05rem; }

    .kz-nav-toggle { display: inline-flex; }
    .kz-header__inner { flex-wrap: wrap; min-height: 3.75rem; }

    /* Mobile navigation is a panel, not a stacked desktop menu. */
    .kz-nav {
        display: none;
        order: 3;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: var(--kz-4);
        padding: var(--kz-4) 0 var(--kz-6);
        margin-top: var(--kz-1);
        border-top: 1px solid var(--kz-line);
    }

    .kz-nav.is-open { display: flex; animation: kz-nav-in var(--kz-dur-2) var(--kz-ease); }

    .kz-nav__links { flex-direction: column; align-items: stretch; gap: var(--kz-1); }

    /* Full-width targets, comfortably above the 44px touch minimum. */
    .kz-nav__link {
        min-height: 2.75rem;
        padding: var(--kz-3) var(--kz-4);
        font-size: 1rem;
    }

    .kz-nav__actions { flex-direction: column; align-items: stretch; gap: var(--kz-3); }
    .kz-nav__actions .kz-btn { width: 100%; min-height: 2.75rem; }
    .kz-nav__divider { display: none; }

    .kz-identity {
        justify-content: flex-start;
        padding: var(--kz-3) var(--kz-4);
        background: var(--kz-surface-2);
        border: 1px solid var(--kz-line);
        border-radius: var(--kz-r-md);
    }

    .kz-identity__name { max-width: none; }
    .kz-logout-form, .kz-logout-form .kz-btn { width: 100%; }

    .kz-main    { padding: var(--kz-7) 0 var(--kz-8); }
    .kz-hero    { padding: var(--kz-8) 0 var(--kz-7); }
    .kz-section { padding: var(--kz-8) 0; }
    .kz-section--tight { padding: var(--kz-7) 0; }

    .kz-display { font-size: clamp(2.1rem, 1.4rem + 3.4vw, 2.8rem); }

    .kz-pagehead {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--kz-4);
    }

    .kz-grid--2, .kz-grid--3, .kz-grid--4 { grid-template-columns: minmax(0, 1fr); }

    /* Metrics stay two-up: a single column would push points below the fold. */
    .kz-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kz-metric { padding: var(--kz-4); }
    .kz-metric__key { top: var(--kz-4); }

    .kz-empty {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--kz-5);
        padding: var(--kz-6) var(--kz-5);
    }

    .kz-empty__art { width: 6rem; }

    .kz-panel__head, .kz-panel__body, .kz-row { padding-left: var(--kz-4); padding-right: var(--kz-4); }
    .kz-panel__foot { padding-left: var(--kz-4); padding-right: var(--kz-4); }

    .kz-example__body, .kz-example__head, .kz-example__foot {
        padding-left: var(--kz-4);
        padding-right: var(--kz-4);
    }

    .kz-statline { gap: var(--kz-4); }
    .kz-cta { padding: var(--kz-7) var(--kz-5); }

    .kz-btn-row .kz-btn { width: 100%; }
    .kz-btn--lg { min-height: 2.9rem; }

    .kz-footer__inner { flex-direction: column; gap: var(--kz-5); }
}

@media (max-width: 26rem) {
    .kz-metrics { grid-template-columns: minmax(0, 1fr); }
    .kz-metric { border-left: 0; border-top: 1px solid var(--kz-line-soft); }
    .kz-metric:first-child { border-top: 0; }
    .kz-meta { grid-template-columns: minmax(0, 1fr); gap: var(--kz-1) 0; }
    .kz-meta dd { text-align: left; margin-bottom: var(--kz-2); }
}

@keyframes kz-nav-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

/* Navigation must remain reachable without scripting. */
.no-js .kz-nav { display: flex; }
.no-js .kz-nav-toggle { display: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* 21. Market detail / question page
   The canonical destination from a market card. Reuses the marketplace's
   semantic colour, probability primitive, panels, and metadata patterns so the
   question reads as one step deeper into the same product.
   ========================================================================== */

.kz-detail { padding-top: var(--kz-1); }

.kz-backlink {
    display: inline-flex;
    align-items: center;
    gap: var(--kz-2);
    margin-bottom: var(--kz-6);
    color: var(--kz-ink-4);
    font-size: var(--kz-t-xs);
    font-weight: 620;
}

.kz-backlink:hover { color: var(--kz-ink); text-decoration: none; }
.kz-backlink svg { flex: none; }

/* The question dominates: it is the page's single most important statement. */
.kz-detail__main { min-width: 0; }

.kz-detail__main > section { margin-bottom: var(--kz-6); }
.kz-detail__main > section:last-child { margin-bottom: 0; }

.kz-detail__eyebrow {
    display: flex;
    align-items: center;
    gap: var(--kz-3);
    flex-wrap: wrap;
    margin-bottom: var(--kz-4);
}

.kz-question {
    margin: 0 0 var(--kz-5);
    color: var(--kz-ink);
    font-size: clamp(1.6rem, 1.1rem + 2.3vw, 2.4rem);
    font-weight: 660;
    line-height: 1.22;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

.kz-detail__lead {
    max-width: 62ch;
    margin: 0 0 var(--kz-6);
    color: var(--kz-ink-3);
    font-size: 1.0625rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

/* Resolved summary: a hairline card keyed with the emerald standing bar. */
.kz-resolved {
    margin: 0 0 var(--kz-6);
    padding: var(--kz-5);
    background: var(--kz-surface);
    border: 1px solid var(--kz-line);
    border-left: 3px solid var(--kz-em-600);
    border-radius: var(--kz-r-md);
}

.kz-resolved__head {
    margin: 0 0 var(--kz-3);
    color: var(--kz-ink);
    font-size: var(--kz-t-sm);
    font-weight: 640;
}

.kz-resolved__head b { color: var(--kz-em-700); font-weight: 680; }
.kz-resolved .kz-meta dd { text-align: left; }

/* Community forecast: the visual centrepiece. */
.kz-forecast { display: flex; flex-direction: column; gap: var(--kz-5); }

.kz-forecast__lead { display: flex; flex-direction: column; gap: var(--kz-1); }

.kz-forecast__val {
    color: var(--kz-ink);
    font-family: var(--kz-font-num);
    font-size: var(--kz-t-figure);
    font-weight: 660;
    line-height: 1;
    letter-spacing: -0.035em;
    font-variant-numeric: tabular-nums;
}

.kz-forecast__cap {
    color: var(--kz-ink-4);
    font-size: var(--kz-t-micro);
    font-weight: 620;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

/* No forecasts yet: stated plainly, never a fabricated 50/50. */
.kz-forecast__none {
    margin: 0;
    padding: var(--kz-4);
    border: 1px dashed var(--kz-line-strong);
    border-radius: var(--kz-r-md);
    background: var(--kz-surface-2);
    color: var(--kz-ink-4);
    font-size: var(--kz-t-sm);
}

.kz-prob__track--lg { height: 0.875rem; }

.kz-rail__note {
    margin: var(--kz-3) 0 0;
    color: var(--kz-ink-4);
    font-size: var(--kz-t-xs);
    line-height: 1.5;
}

/* The viewer's own forecast: deliberately distinct from the community figure.
   Azure is the platform's "your judgement / personal" key, as on the card. */
.kz-yours { border-color: var(--kz-azure-100); }

.kz-yours .kz-panel__head {
    background: var(--kz-azure-50);
    border-bottom-color: var(--kz-azure-100);
}

.kz-yours .kz-panel__title { color: var(--kz-azure-700); }

.kz-yours__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--kz-3);
    margin-bottom: var(--kz-2);
}

.kz-yours__side {
    color: var(--kz-azure-700);
    font-size: var(--kz-t-xs);
    font-weight: 660;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.kz-yours__pct {
    color: var(--kz-ink);
    font-family: var(--kz-font-num);
    font-size: var(--kz-t-metric);
    font-weight: 660;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.kz-yours__meta {
    margin: 0;
    color: var(--kz-ink-4);
    font-size: var(--kz-t-xs);
    line-height: 1.5;
}

.kz-yours__points {
    margin: var(--kz-3) 0 0;
    padding-top: var(--kz-3);
    border-top: 1px solid var(--kz-line-soft);
    color: var(--kz-ink-3);
    font-size: var(--kz-t-xs);
    line-height: 1.5;
}

.kz-yours__points b { color: var(--kz-ink); font-variant-numeric: tabular-nums; }

@media (max-width: 64rem) {
    .kz-detail__main { margin-bottom: var(--kz-6); }
}


/* 22. Forecast interaction
   The moment a judgement goes on the record. Considered, not a betting slip:
   YES/NO carries the semantic emerald/clay only on the selected state, the
   probability is always shown as a plain number, and Castalore Points sit in a
   separate labelled block so they are never read as money or as the probability.
   ========================================================================== */

/* The action panel: the one place on the page a judgement is entered. */
.kz-forecastform { border-color: var(--kz-line-strong); }

.kz-forecastform .kz-panel__head {
    background: var(--kz-em-50);
    border-bottom-color: var(--kz-em-100);
}

.kz-forecastform .kz-panel__title { color: var(--kz-em-800); }

.kz-ff { display: flex; flex-direction: column; gap: var(--kz-5); }

.kz-ff__group {
    display: flex;
    flex-direction: column;
    gap: var(--kz-2);
    margin: 0;
    padding: 0;
    border: 0;
}

.kz-ff__legend {
    padding: 0;
    margin-bottom: var(--kz-1);
    color: var(--kz-ink);
    font-size: var(--kz-t-sm);
    font-weight: 620;
    letter-spacing: -0.005em;
}

/* YES / NO: real radios, visually hidden but focusable; the label is the box. */
.kz-choice {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--kz-3);
}

.kz-choice__opt { position: relative; display: block; margin: 0; }

.kz-choice__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.kz-choice__label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: var(--kz-3) var(--kz-4);
    background: var(--kz-surface);
    border: 1px solid var(--kz-line-strong);
    border-radius: var(--kz-r-md);
    color: var(--kz-ink-3);
    font-size: var(--kz-t-sm);
    font-weight: 640;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: border-color var(--kz-dur-1) var(--kz-ease),
                background-color var(--kz-dur-1) var(--kz-ease),
                color var(--kz-dur-1) var(--kz-ease);
}

.kz-choice__opt:hover .kz-choice__label { border-color: var(--kz-ink-5); }

.kz-choice__input:focus-visible ~ .kz-choice__label {
    outline: 2px solid var(--kz-em-600);
    outline-offset: 2px;
}

.kz-choice__opt--yes .kz-choice__input:checked ~ .kz-choice__label {
    background: var(--kz-em-50);
    border-color: var(--kz-em-600);
    color: var(--kz-em-800);
    box-shadow: inset 0 0 0 1px var(--kz-em-600);
}

.kz-choice__opt--no .kz-choice__input:checked ~ .kz-choice__label {
    background: var(--kz-clay-50);
    border-color: var(--kz-clay-600);
    color: var(--kz-clay-700);
    box-shadow: inset 0 0 0 1px var(--kz-clay-600);
}

/* Probability: slider is an enhancement, the number is the source of truth. */
.kz-probpick {
    display: flex;
    align-items: center;
    gap: var(--kz-4);
}

.kz-probpick__range {
    flex: 1 1 auto;
    min-width: 0;
    height: 1.5rem;
    padding: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.kz-probpick__range::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: var(--kz-r-pill);
    background: var(--kz-line-strong);
}

.kz-probpick__range::-moz-range-track {
    height: 4px;
    border-radius: var(--kz-r-pill);
    background: var(--kz-line-strong);
}

.kz-probpick__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    margin-top: -8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--kz-em-600);
    border: 2px solid var(--kz-surface);
    box-shadow: var(--kz-e-1);
    cursor: pointer;
}

.kz-probpick__range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--kz-em-600);
    border: 2px solid var(--kz-surface);
    box-shadow: var(--kz-e-1);
    cursor: pointer;
}

.kz-probpick__range:focus-visible {
    outline: 2px solid var(--kz-em-600);
    outline-offset: 4px;
    border-radius: var(--kz-r-sm);
}

.kz-probpick__out {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: baseline;
}

.kz-probpick__num {
    width: 4.5rem;
    padding: 0.5rem 1.35rem 0.5rem 0.6rem;
    background: var(--kz-surface);
    border: 1px solid var(--kz-line-strong);
    border-radius: var(--kz-r-md);
    color: var(--kz-ink);
    font-family: var(--kz-font-num);
    font-size: 1.0625rem;
    font-weight: 660;
    text-align: right;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
}

.kz-probpick__num::-webkit-outer-spin-button,
.kz-probpick__num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.kz-probpick__num:focus {
    outline: none;
    border-color: var(--kz-em-600);
    box-shadow: var(--kz-focus-ring);
}

.kz-probpick__pct {
    position: absolute;
    right: 0.55rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--kz-ink-4);
    font-size: var(--kz-t-sm);
    font-weight: 600;
    pointer-events: none;
}

/* Castalore Points ledger line: available now, and remaining after the forecast. */
.kz-ff__ledger {
    display: flex;
    flex-direction: column;
    gap: var(--kz-1);
    padding: var(--kz-3) var(--kz-4);
    background: var(--kz-surface-2);
    border: 1px solid var(--kz-line-soft);
    border-radius: var(--kz-r-md);
    color: var(--kz-ink-4);
    font-size: var(--kz-t-xs);
}

.kz-ff__ledger b {
    color: var(--kz-ink);
    font-weight: 640;
    font-variant-numeric: tabular-nums;
}

.kz-ff__ledger.is-over b { color: var(--kz-clay-700); }

/* Review summary: revealed by the enhancement script as values change. */
.kz-ff__review {
    display: flex;
    flex-direction: column;
    gap: var(--kz-1);
    padding: var(--kz-4);
    border: 1px solid var(--kz-line);
    border-left: 3px solid var(--kz-em-600);
    border-radius: var(--kz-r-md);
    background: var(--kz-surface);
}

.kz-ff__review-title {
    color: var(--kz-ink-4);
    font-size: var(--kz-t-micro);
    font-weight: 650;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.kz-ff__review-line {
    color: var(--kz-ink-2);
    font-size: var(--kz-t-sm);
}

.kz-ff__review-line b {
    color: var(--kz-ink);
    font-weight: 660;
    font-variant-numeric: tabular-nums;
}

.kz-ff__foot {
    margin: 0;
    color: var(--kz-ink-4);
    font-size: var(--kz-t-xs);
    text-align: center;
}

/* Confirmation after a successful submission. */
.kz-recorded__msg {
    display: flex;
    align-items: center;
    gap: var(--kz-2);
    margin: 0 0 var(--kz-4);
    color: var(--kz-em-800);
    font-size: var(--kz-t-sm);
    font-weight: 620;
}

.kz-recorded__tick { flex: none; color: var(--kz-em-600); }

@media (max-width: 48rem) {
    .kz-probpick__num { min-height: 2.75rem; }
    .kz-ff__ledger { flex-direction: column; }
}


/* 23. Forecast history
   A permanent record of one person's judgement over time. Reads like a
   research log: hairline-separated entries, plain dates, the current forecast
   marked and the earlier ones kept but visually subordinate. No decorative
   timeline, no feed, no chart.
   ========================================================================== */

.kz-fclog {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kz-fclog__item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--kz-2);
    padding: var(--kz-4) var(--kz-5);
    border-top: 1px solid var(--kz-line-soft);
}

.kz-fclog__item:first-child { border-top: 0; }

/* Only the current row carries the marker, so only it reserves space for one. */
.kz-fclog__item--current { padding-right: 5.5rem; }

/* Earlier forecasts are quieter than the current one. */
.kz-fclog__item:not(.kz-fclog__item--current) { color: var(--kz-ink-4); }
.kz-fclog__item:not(.kz-fclog__item--current) .kz-fclog__prob { color: var(--kz-ink-3); }

.kz-fclog__item--current {
    background: var(--kz-surface-2);
    box-shadow: inset 2px 0 0 var(--kz-em-600);
}

.kz-fclog__when {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.kz-fclog__ago {
    color: var(--kz-ink-2);
    font-size: var(--kz-t-sm);
    font-weight: 600;
}

.kz-fclog__item--current .kz-fclog__ago { color: var(--kz-ink); }

.kz-fclog__at {
    color: var(--kz-ink-5);
    font-size: var(--kz-t-micro);
    font-variant-numeric: tabular-nums;
}

.kz-fclog__what {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--kz-2) var(--kz-3);
}

.kz-fclog__side {
    font-size: var(--kz-t-xs);
    font-weight: 660;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.kz-fclog__side--yes { color: var(--kz-yes); }
.kz-fclog__side--no  { color: var(--kz-no); }

.kz-fclog__prob {
    color: var(--kz-ink);
    font-size: 1.0625rem;
    font-weight: 680;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.kz-fclog__pts {
    color: var(--kz-ink-4);
    font-size: var(--kz-t-xs);
    font-variant-numeric: tabular-nums;
}

.kz-fclog__tag {
    position: absolute;
    top: var(--kz-4);
    right: var(--kz-5);
    padding: 0.1rem 0.45rem;
    border-radius: var(--kz-r-xs);
    background: var(--kz-em-50);
    color: var(--kz-em-800);
    font-size: 0.6875rem;
    font-weight: 680;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

@media (max-width: 48rem) {
    .kz-fclog__item { padding-left: var(--kz-4); padding-right: var(--kz-4); }
    .kz-fclog__tag { right: var(--kz-4); }
}


/* 24. Points ledger
   The Castalore Points history. A record of a forecasting resource, read with
   the same data-row primitives as the rest of the product: hairline rows,
   tabular numerals, semantic credit/debit colour, no statement styling.
   ========================================================================== */

.kz-ledger-key {
    display: flex;
    gap: var(--kz-4);
    color: var(--kz-ink-4);
    font-size: var(--kz-t-micro);
}

.kz-ptx {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    flex: none;
    text-align: right;
}

.kz-ptx__amount {
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.kz-ptx__balance {
    color: var(--kz-ink-4);
    font-size: var(--kz-t-micro);
    font-variant-numeric: tabular-nums;
}


/* 25. Resolution workflow (admin)
   An editorial verification screen, not a settlement screen. Reuses the form,
   panel, choice, and meta primitives; adds only a caution alert, a textarea
   size, a deliberate confirmation control, and a plain outcome marker.
   ========================================================================== */

.kz-alert--warn {
    background: var(--kz-bronze-50);
    border-color: var(--kz-bronze-100);
    color: var(--kz-bronze-700);
}

textarea.kz-input {
    min-height: 6rem;
    line-height: 1.5;
    resize: vertical;
}

/* Deliberate confirmation: the form is not submitted until this is ticked. */
.kz-confirm {
    display: flex;
    align-items: flex-start;
    gap: var(--kz-3);
    padding: var(--kz-4);
    border: 1px solid var(--kz-line-strong);
    border-radius: var(--kz-r-md);
    background: var(--kz-surface-2);
    color: var(--kz-ink-2);
    font-size: var(--kz-t-sm);
    line-height: 1.5;
    cursor: pointer;
}

.kz-confirm input {
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.1rem;
    accent-color: var(--kz-em-600);
}

/* Outcome marker: a plain word, no badge theatre. */
.kz-outcome {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border: 1px solid currentColor;
    border-radius: var(--kz-r-xs);
    font-size: var(--kz-t-micro);
    font-weight: 680;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    flex: none;
}

.kz-outcome--yes { color: var(--kz-yes); }
.kz-outcome--no  { color: var(--kz-no); }


/* 26. Profile
   The forecasting identity layer. Strong username, reputation and Points as the
   two standing figures, a compact statistics row, and a plain forecast record.
   Reuses figure / statline / row / badge primitives; adds only what is new.
   ========================================================================== */

.kz-avatar--lg {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: var(--kz-r-lg);
    font-size: 1.125rem;
}

.kz-profilehead {
    display: flex;
    align-items: center;
    gap: var(--kz-4);
}

/* Reputation and Points side by side, each captioned with what it means. */
.kz-idfigures {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--kz-5);
}

.kz-idfigures .kz-figure__value { font-size: var(--kz-t-figure); }

.kz-idfigures__note {
    margin: var(--kz-4) 0 0;
    color: var(--kz-ink-4);
    font-size: var(--kz-t-xs);
    line-height: 1.55;
}

/* Right-hand column of a data row: a stacked pick + status. */
.kz-row__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--kz-2);
    flex: none;
}

/* The user's own forecast on a question, shown as chosen (never normalised). */
.kz-forecastpick {
    display: inline-flex;
    align-items: baseline;
    gap: var(--kz-2);
    font-size: var(--kz-t-xs);
    font-weight: 640;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.kz-forecastpick b { font-size: 0.9375rem; letter-spacing: -0.01em; text-transform: none; }
.kz-forecastpick--yes { color: var(--kz-yes); }
.kz-forecastpick--no  { color: var(--kz-no); }

@media (max-width: 40rem) {
    .kz-idfigures { grid-template-columns: minmax(0, 1fr); gap: var(--kz-4); }
    .kz-profilehead { gap: var(--kz-3); }
    .kz-avatar--lg { width: 2.75rem; height: 2.75rem; }
}


/* 27. Leaderboard
   A reputation ranking, read as a forecasting institution's standings, not an
   arcade high-score. Rank, username, and a dominant reputation number per row;
   the top three carry a little more weight, no medals or trophies.
   ========================================================================== */

.kz-lb-you {
    display: inline-flex;
    align-items: baseline;
    gap: var(--kz-2);
    margin: 0 0 var(--kz-5);
    padding: var(--kz-3) var(--kz-4);
    background: var(--kz-surface-2);
    border: 1px solid var(--kz-line);
    border-radius: var(--kz-r-md);
    color: var(--kz-ink-3);
    font-size: var(--kz-t-sm);
}

.kz-lb-you b { color: var(--kz-ink); font-weight: 680; }

.kz-lb {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kz-lb__row {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--kz-4);
    padding: var(--kz-4) var(--kz-5);
    border-top: 1px solid var(--kz-line-soft);
}

.kz-lb__row:first-child { border-top: 0; }

.kz-lb__row--you {
    background: var(--kz-surface-2);
    box-shadow: inset 2px 0 0 var(--kz-em-600);
}

.kz-lb__rank {
    flex: none;
    width: 2.5rem;
    text-align: right;
    color: var(--kz-ink-4);
    font-size: var(--kz-t-sm);
    font-weight: 620;
    font-variant-numeric: tabular-nums;
}

.kz-lb__rank--top {
    color: var(--kz-em-700);
    font-size: 1.0625rem;
    font-weight: 700;
}

.kz-lb__main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kz-lb__name {
    display: flex;
    align-items: center;
    gap: var(--kz-2);
    color: var(--kz-ink);
    font-size: var(--kz-t-sm);
    font-weight: 640;
    letter-spacing: -0.005em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kz-lb__you-tag {
    flex: none;
    padding: 0.05rem 0.4rem;
    border-radius: var(--kz-r-xs);
    background: var(--kz-em-50);
    color: var(--kz-em-800);
    font-size: 0.6875rem;
    font-weight: 680;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.kz-lb__meta {
    color: var(--kz-ink-4);
    font-size: var(--kz-t-xs);
    font-variant-numeric: tabular-nums;
}

.kz-lb__rep {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.1;
}

.kz-lb__rep-value {
    color: var(--kz-ink);
    font-size: 1.25rem;
    font-weight: 680;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.kz-lb__rep-cap {
    color: var(--kz-ink-4);
    font-size: var(--kz-t-micro);
    font-weight: 620;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.kz-lb__pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kz-3);
}

@media (max-width: 48rem) {
    .kz-lb__row { padding-left: var(--kz-4); padding-right: var(--kz-4); gap: var(--kz-3); }
    .kz-lb__rank { width: 1.75rem; }
    .kz-lb__rep-value { font-size: 1.125rem; }
}


/* 28. Admin area
   The internal control centre. Marked out from the public product by a quiet
   band under the header, but built from the same panels, metrics, and rows.
   Operational and legible, not a neon exchange console.
   ========================================================================== */

.kz-adminbar {
    background: var(--kz-paper-sunk);
    border-bottom: 1px solid var(--kz-line);
}

.kz-adminbar__inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--kz-2) var(--kz-5);
    min-height: 2.75rem;
    padding-top: var(--kz-2);
    padding-bottom: var(--kz-2);
}

.kz-adminbar__label {
    color: var(--kz-ink-4);
    font-size: var(--kz-t-micro);
    font-weight: 680;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.kz-adminbar__nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--kz-2) var(--kz-4);
}

.kz-adminbar__link {
    color: var(--kz-ink-3);
    font-size: var(--kz-t-sm);
    font-weight: 560;
}

.kz-adminbar__link:hover { color: var(--kz-ink); text-decoration: none; }

.kz-adminbar__link[aria-current="page"] {
    color: var(--kz-em-800);
    font-weight: 640;
}

.kz-adminbar__soon {
    color: var(--kz-ink-5);
    font-size: var(--kz-t-xs);
}

/* Sub-section heading inside a dashboard: smaller and quieter than a page h2. */
.kz-adminh {
    margin: 0 0 var(--kz-4);
    color: var(--kz-ink);
    font-size: 1.0625rem;
    font-weight: 650;
    letter-spacing: -0.01em;
}

/* A data row that needs an administrator's action. */
.kz-row--attention {
    box-shadow: inset 2px 0 0 var(--kz-bronze-600);
    background: var(--kz-bronze-50);
}

@media (max-width: 48rem) {
    .kz-adminbar__inner { gap: var(--kz-1) var(--kz-4); }
}


/* 29. Admin forms
   Small additions for the market creation form; the rest is the shared form,
   panel, and field system.
   ========================================================================== */

/* Two fields side by side (open / close times), stacked on narrow screens. */
.kz-fieldrow {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--kz-4);
}

/* Native select styled as a kz-input, with a restrained chevron. */
select.kz-input {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%236A7A74' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
}

@media (max-width: 40rem) {
    .kz-fieldrow { grid-template-columns: minmax(0, 1fr); gap: var(--kz-5); }
}


/* 30. Trending editorial desk
   Signals to candidates to published questions. Reuses the panel, row, and form
   system; adds only a quiet marker for a draft the assistant proposed and the
   candidate question preview in a queue row.
   ========================================================================== */

.kz-trend__q {
    color: var(--kz-ink-2);
    font-style: italic;
}

.kz-trend__tag {
    display: inline-flex;
    align-items: center;
    padding: 0.05rem 0.4rem;
    margin-left: var(--kz-1);
    border: 1px solid var(--kz-azure-100);
    border-radius: var(--kz-r-xs);
    background: var(--kz-azure-50);
    color: var(--kz-azure-700);
    font-size: 0.6875rem;
    font-style: normal;
    font-weight: 660;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Review queues as a responsive card grid: a full queue fills the page width
   instead of stacking into one long column the operator scrolls end to end. */
.kz-trendhead {
    display: flex;
    align-items: baseline;
    gap: var(--kz-3);
    margin-bottom: var(--kz-4);
}

.kz-trendhead .kz-adminh { margin: 0; }

.kz-trendgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
    gap: var(--kz-4);
}

.kz-trendcard {
    display: flex;
    flex-direction: column;
    gap: var(--kz-2);
    padding: var(--kz-4);
    background: var(--kz-surface);
    border: 1px solid var(--kz-line);
    border-radius: var(--kz-r-lg);
    transition: border-color var(--kz-dur-1) var(--kz-ease),
                box-shadow var(--kz-dur-1) var(--kz-ease);
}

.kz-trendcard:hover {
    border-color: var(--kz-line-strong);
    box-shadow: var(--kz-e-1);
}

.kz-trendcard__topic {
    color: var(--kz-ink);
    font-size: var(--kz-t-sm);
    font-weight: 640;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kz-trendcard__topic:hover { color: var(--kz-em-700); text-decoration: none; }

.kz-trendcard__meta {
    margin: 0;
    color: var(--kz-ink-4);
    font-size: var(--kz-t-xs);
    line-height: 1.5;
}

.kz-trendcard__q {
    margin: 0;
    color: var(--kz-ink-3);
    font-size: var(--kz-t-xs);
    font-style: italic;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kz-trendcard__reason {
    color: var(--kz-clay-700);
}

.kz-trendcard__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kz-2) var(--kz-3);
    margin-top: auto;
    padding-top: var(--kz-2);
    font-size: var(--kz-t-xs);
}

.kz-trendcard__foot .kz-btn { margin-left: auto; }

@media (max-width: 40rem) {
    .kz-trendgrid { grid-template-columns: minmax(0, 1fr); }
}

/* Product-stream marker on a market card and the question page. Each stream
   carries its own colour: Questions emerald, Trending clay, Banter bronze. */
.kz-tag--stream,
.kz-tag--stream-questions { border-color: var(--kz-em-100); background: var(--kz-em-50); color: var(--kz-em-800); }
.kz-tag--stream-trending  { border-color: var(--kz-clay-100); background: var(--kz-clay-50); color: var(--kz-clay-700); }
.kz-tag--stream-banter    { border-color: var(--kz-bronze-100); background: var(--kz-bronze-50); color: var(--kz-bronze-700); }


/* 31. Forecast card / share
   A bounded, screenshot-friendly artifact for one specific forecast. Same
   visual language as the rest of Castalore: hairlines, restrained emerald / clay
   semantics, tabular figures. Not a betting slip, not a trading terminal.
   ========================================================================== */

.kz-fcard {
    max-width: 34rem;
    margin: var(--kz-6) auto var(--kz-5);
    background: var(--kz-surface);
    border: 1px solid var(--kz-line);
    border-radius: var(--kz-r-lg);
    box-shadow: var(--kz-e-1);
    overflow: hidden;
}

.kz-fcard__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kz-3);
    padding: var(--kz-4) var(--kz-5);
    border-bottom: 1px solid var(--kz-line-soft);
}

.kz-fcard__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--kz-2);
    font-weight: 640;
    color: var(--kz-ink-2);
    letter-spacing: 0.01em;
}

.kz-fcard__mark { width: 22px; height: 22px; }

.kz-fcard__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kz-1);
    justify-content: flex-end;
}

.kz-fcard__body { padding: var(--kz-6) var(--kz-5) var(--kz-5); }

.kz-fcard__eyebrow {
    margin: 0 0 var(--kz-2);
    font-size: var(--kz-t-micro);
    font-weight: 640;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kz-ink-4);
}

.kz-fcard__question {
    margin: 0 0 var(--kz-5);
    font-size: var(--kz-t-h3);
    line-height: 1.32;
    color: var(--kz-ink);
}

.kz-fcard__call {
    display: flex;
    align-items: baseline;
    gap: var(--kz-3);
    padding: var(--kz-4) var(--kz-5);
    border: 1px solid var(--kz-line);
    border-radius: var(--kz-r-md);
    background: var(--kz-surface-2);
}

.kz-fcard__call--yes {
    border-color: var(--kz-em-200);
    background: var(--kz-yes-soft);
}

.kz-fcard__call--no {
    border-color: var(--kz-clay-100);
    background: var(--kz-no-soft);
}

.kz-fcard__side {
    font-size: var(--kz-t-h4);
    font-weight: 680;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.kz-fcard__call--yes .kz-fcard__side { color: var(--kz-yes); }
.kz-fcard__call--no  .kz-fcard__side { color: var(--kz-no); }

.kz-fcard__prob {
    margin-left: auto;
    font-size: var(--kz-t-figure);
    font-weight: 660;
    line-height: 1;
    color: var(--kz-ink);
}

.kz-fcard__by {
    margin: var(--kz-4) 0 0;
    font-size: var(--kz-t-sm);
    color: var(--kz-ink-3);
}

.kz-fcard__by b { color: var(--kz-ink); font-weight: 640; }

.kz-fcard__when {
    display: block;
    margin-top: var(--kz-1);
    font-size: var(--kz-t-xs);
    color: var(--kz-ink-4);
    font-variant-numeric: tabular-nums;
}

.kz-fcard__result {
    padding: var(--kz-4) var(--kz-5) var(--kz-5);
    border-top: 1px solid var(--kz-line-soft);
    background: var(--kz-surface-2);
}

.kz-fcard__resultrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kz-3);
    padding: var(--kz-2) 0;
}

.kz-fcard__resultrow + .kz-fcard__resultrow { border-top: 1px solid var(--kz-line-soft); }

.kz-fcard__resultlabel {
    font-size: var(--kz-t-xs);
    font-weight: 620;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--kz-ink-4);
}

.kz-fcard__resultval {
    font-size: var(--kz-t-h4);
    font-weight: 680;
    text-transform: uppercase;
    color: var(--kz-ink);
}

.kz-fcard__verdict {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.5rem;
    border-radius: var(--kz-r-xs);
    border: 1px solid transparent;
    font-size: var(--kz-t-xs);
    font-weight: 660;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.kz-fcard__verdict--correct {
    border-color: var(--kz-em-200);
    background: var(--kz-em-50);
    color: var(--kz-em-700);
}

.kz-fcard__verdict--incorrect {
    border-color: var(--kz-clay-100);
    background: var(--kz-clay-50);
    color: var(--kz-clay-700);
}

.kz-fcard__resolvedat {
    margin: var(--kz-3) 0 0;
    font-size: var(--kz-t-xs);
    color: var(--kz-ink-4);
    font-variant-numeric: tabular-nums;
}

.kz-fcard__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kz-3);
    padding: var(--kz-4) var(--kz-5);
    border-top: 1px solid var(--kz-line-soft);
}

.kz-fcard__pending {
    font-size: var(--kz-t-xs);
    color: var(--kz-ink-4);
}

/* Share controls, deliberately outside the bounded card. */
.kz-fshare {
    max-width: 34rem;
    margin: 0 auto var(--kz-8);
}

.kz-fshare__field { margin-bottom: var(--kz-3); }

.kz-fshare__field .kz-input {
    font-size: var(--kz-t-sm);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 30rem) {
    .kz-fcard__top { flex-direction: column; align-items: flex-start; }
    .kz-fcard__tags { justify-content: flex-start; }
    .kz-fcard__call { flex-wrap: wrap; }
    .kz-fcard__prob { margin-left: 0; }
}


/* 32. Landing (2026 refresh) + shared data table
   ========================================================================== */

/* Section header with a control on the right (board, leaderboard). */
.kz-board__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--kz-5);
    flex-wrap: wrap;
    margin-bottom: var(--kz-6);
}

.kz-board__head h2 { margin-bottom: var(--kz-2); }
.kz-board__head { align-items: center; }
.kz-board__head > div:first-child { max-width: 52ch; padding-left: var(--kz-3); }

/* Centred section heading with a short green rule under it. */
.kz-h2--rule { text-align: center; }
.kz-h2--rule::after {
    content: "";
    display: block;
    width: 3rem;
    height: 3px;
    margin: var(--kz-3) auto 0;
    border-radius: 2px;
    background: var(--kz-em-600);
}

/* Landing "Why Castalore" split panel, nudged in from the edge. */
.kz-splitdark__grid--indent { padding-left: 10px; }

.kz-board__note {
    margin: 0 0 var(--kz-5);
    color: var(--kz-ink-4);
    font-size: var(--kz-t-sm);
}

.kz-streamtabs { flex: none; }

/* Illustrative question card on the landing board. */
.kz-qcard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: var(--kz-4);
}

.kz-qcard {
    display: flex;
    flex-direction: column;
    gap: var(--kz-4);
    padding: var(--kz-5);
    background: var(--kz-surface);
    border: 1px solid var(--kz-line);
    border-radius: var(--kz-r-lg);
    box-shadow: var(--kz-e-1);
}

.kz-qcard__meta {
    display: flex;
    align-items: center;
    gap: var(--kz-2);
    flex-wrap: wrap;
    justify-content: space-between;
}

.kz-qcard__closes { color: var(--kz-ink-4); font-size: var(--kz-t-xs); }

.kz-qcard__q {
    margin: 0;
    color: var(--kz-ink);
    font-size: 1.0625rem;
    font-weight: 680;
    line-height: 1.36;
    flex: 1;
}

.kz-qcard__prob { margin-top: auto; }
.kz-qcard__foot { margin: 0; color: var(--kz-ink-4); font-size: var(--kz-t-xs); }

/* Four-step flow. */
.kz-flow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--kz-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.kz-flow__step {
    padding: var(--kz-6);
    background: var(--kz-surface);
    border: 1px solid var(--kz-line);
    border-radius: var(--kz-r-lg);
}

.kz-flow__n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    margin-bottom: var(--kz-4);
    border-radius: var(--kz-r-md);
    background: var(--kz-em-50);
    color: var(--kz-em-700);
    font-family: var(--kz-font-display);
    font-size: 1.05rem;
    font-weight: 800;
}

.kz-flow__title { margin-bottom: var(--kz-2); font-size: 1.15rem; }
.kz-flow__text { margin: 0; color: var(--kz-ink-3); font-size: var(--kz-t-sm); }

/* Dark two-column belief section. */
.kz-splitdark {
    background: var(--kz-em-900);
    color: #CFE0D6;
}

.kz-splitdark__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: var(--kz-8);
    align-items: start;
    padding: var(--kz-10) 0;
}

.kz-splitdark__h { color: #fff; margin-bottom: var(--kz-3); }
.kz-splitdark__p { margin: 0; font-size: 1.0625rem; line-height: 1.6; max-width: 46ch; }

.kz-eyebrow--ondark { color: var(--kz-em-mint); }
.kz-eyebrow--ondark::before { background: var(--kz-em-mint); }

/* Stream cards. */
.kz-streamgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: var(--kz-4);
}

.kz-streamcard {
    padding: var(--kz-6);
    background: var(--kz-surface);
    border: 1px solid var(--kz-line);
    border-radius: var(--kz-r-lg);
}

.kz-streamcard p { margin: 0; color: var(--kz-ink-3); font-size: var(--kz-t-sm); }

.kz-streamcard__tag {
    display: inline-block;
    margin-bottom: var(--kz-4);
    padding: 0.3rem 0.7rem;
    border-radius: var(--kz-r-sm);
    font-size: var(--kz-t-micro);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
}

.kz-streamcard__tag--questions { background: var(--kz-em-700); }
.kz-streamcard__tag--trending  { background: var(--kz-clay-600); }
.kz-streamcard__tag--banter    { background: var(--kz-bronze-100); color: var(--kz-bronze-700); }

/* Shared data table (leaderboard, and any tabular list). */
.kz-tablewrap { overflow-x: auto; }

.kz-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 34rem;
    font-size: var(--kz-t-sm);
}

.kz-table thead th {
    padding: var(--kz-3) var(--kz-4);
    background: var(--kz-surface-2);
    border-bottom: 1px solid var(--kz-line);
    color: var(--kz-ink-4);
    font-size: var(--kz-t-micro);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-align: left;
}

.kz-table tbody td {
    padding: var(--kz-3) var(--kz-4);
    border-bottom: 1px solid var(--kz-line-soft);
    color: var(--kz-ink-3);
}

.kz-table tbody tr:last-child td { border-bottom: 0; }
.kz-table tbody tr:hover { background: var(--kz-surface-2); }

.kz-table__num { width: 4.5rem; }
.kz-table__num, .kz-table__r { text-align: right; }
.kz-table thead .kz-table__r { text-align: right; }
.kz-table__name { color: var(--kz-ink); font-weight: 660; }
.kz-table__rep {
    color: var(--kz-em-700);
    font-family: var(--kz-font-display);
    font-weight: 800;
    font-size: 1.0625rem;
}
.kz-table tr.is-you { background: var(--kz-em-50); }
.kz-table tr.is-you .kz-table__name { color: var(--kz-em-800); }


/* 33. Hero panels & stat cards (dashboard, profile)
   ========================================================================== */

.kz-heropanel {
    padding: var(--kz-7);
    background: var(--kz-surface);
    border: 1px solid var(--kz-line);
    border-radius: var(--kz-r-xl);
    box-shadow: var(--kz-e-1);
}

.kz-heropanel--dark {
    background: var(--kz-em-900);
    border-color: var(--kz-em-900);
    color: #CFE0D6;
}

.kz-heropanel__label {
    font-size: var(--kz-t-micro);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--kz-ink-4);
}

.kz-heropanel--dark .kz-heropanel__label { color: var(--kz-em-mint); }

.kz-heropanel__value {
    display: block;
    margin: var(--kz-2) 0 var(--kz-1);
    font-family: var(--kz-font-display);
    font-size: clamp(2.6rem, 1.6rem + 3vw, 3.9rem);
    font-weight: 820;
    line-height: 1;
    letter-spacing: -0.035em;
    color: var(--kz-ink);
    font-variant-numeric: tabular-nums;
}

.kz-heropanel--dark .kz-heropanel__value { color: #fff; }

.kz-heropanel__value--mid { font-size: clamp(2rem, 1.4rem + 2vw, 2.6rem); }

.kz-heropanel__note { margin: var(--kz-3) 0 0; font-size: var(--kz-t-xs); color: var(--kz-ink-4); }
.kz-heropanel--dark .kz-heropanel__note { color: #A9C3B4; }

.kz-heropanel__delta {
    display: inline-flex;
    align-items: center;
    gap: var(--kz-1);
    padding: 0.25rem 0.55rem;
    border-radius: var(--kz-r-sm);
    font-size: var(--kz-t-xs);
    font-weight: 700;
}

.kz-heropanel__delta--up { background: rgba(127, 211, 168, 0.16); color: var(--kz-em-mint); }
.kz-heropanel__delta--down { background: rgba(184, 72, 31, 0.16); color: #E8A48C; }

.kz-herorow {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: var(--kz-4);
}

.kz-statgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: var(--kz-3);
}

.kz-statcard {
    padding: var(--kz-5);
    background: var(--kz-surface);
    border: 1px solid var(--kz-line);
    border-radius: var(--kz-r-lg);
}

.kz-statcard__value {
    font-family: var(--kz-font-display);
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--kz-ink);
    font-variant-numeric: tabular-nums;
}

.kz-statcard__label { margin-top: 2px; font-size: var(--kz-t-xs); color: var(--kz-ink-4); }


/* 33b. Dashboard & profile activity lists
   ========================================================================== */

@media (max-width: 52rem) {
    .kz-herorow { grid-template-columns: 1fr; }
}

.kz-sectionhead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--kz-2);
    flex-wrap: wrap;
    margin-bottom: var(--kz-4);
}
.kz-sectionhead h2 { margin: 0; }
.kz-sectionhead__count { font-size: var(--kz-t-sm); color: var(--kz-ink-4); white-space: nowrap; }

.kz-linklist { display: flex; flex-direction: column; gap: var(--kz-3); }

.kz-linkrow {
    display: flex;
    align-items: center;
    gap: var(--kz-4);
    padding: var(--kz-4) var(--kz-5);
    background: var(--kz-surface);
    border: 1px solid var(--kz-line);
    border-radius: var(--kz-r-lg);
    box-shadow: var(--kz-e-1);
    text-decoration: none;
    color: var(--kz-ink);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.kz-linkrow:hover { border-color: var(--kz-line-strong); box-shadow: var(--kz-e-lift); color: var(--kz-ink); }

.kz-linkrow__dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--kz-ink-5); }
.kz-linkrow__dot.is-correct { background: var(--kz-em-700); }
.kz-linkrow__dot.is-incorrect { background: var(--kz-clay-600); }

.kz-linkrow__main { flex: 1; min-width: 0; }
.kz-linkrow__meta { font-size: var(--kz-t-xs); font-weight: 700; color: var(--kz-ink-4); margin-bottom: 3px; }
.kz-linkrow__title { font-size: var(--kz-t-sm); font-weight: 700; line-height: 1.35; }
.kz-linkrow__aside { text-align: right; flex: none; }
.kz-linkrow__call {
    font-size: var(--kz-t-xs);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.kz-linkrow__call--yes { color: var(--kz-em-700); }
.kz-linkrow__call--no { color: var(--kz-clay-600); }
.kz-linkrow__sub { font-size: var(--kz-t-xs); color: var(--kz-ink-4); margin-top: 3px; }
.kz-linkrow__rep--up { color: var(--kz-em-700); font-weight: 700; }
.kz-linkrow__rep--down { color: var(--kz-clay-600); font-weight: 700; }

.kz-emptybox {
    text-align: center;
    background: var(--kz-surface);
    border: 1px dashed var(--kz-line-strong);
    border-radius: var(--kz-r-lg);
    padding: clamp(2.5rem, 5vw, 4rem) var(--kz-6);
}
.kz-emptybox__title { font-family: var(--kz-font-display); font-size: 1.2rem; font-weight: 800; margin-bottom: var(--kz-2); }
.kz-emptybox p { margin: 0 auto var(--kz-4); font-size: var(--kz-t-sm); color: var(--kz-ink-4); max-width: 40ch; }

.kz-nextcard {
    background: var(--kz-surface);
    border: 1px solid var(--kz-line);
    border-radius: var(--kz-r-lg);
    padding: var(--kz-5) var(--kz-6);
}
.kz-nextcard__title { font-family: var(--kz-font-display); font-size: 0.95rem; font-weight: 800; margin-bottom: var(--kz-1); }
.kz-nextcard__note { margin: 0 0 var(--kz-4); font-size: var(--kz-t-xs); color: var(--kz-ink-4); }
.kz-nextlink {
    display: block;
    text-decoration: none;
    color: var(--kz-ink);
    border: 1px solid var(--kz-line);
    border-radius: var(--kz-r-md);
    padding: var(--kz-3) var(--kz-4);
    margin-bottom: var(--kz-2);
    transition: border-color 0.15s ease, background 0.15s ease;
}
.kz-nextlink:hover { border-color: var(--kz-em-700); background: var(--kz-em-50); color: var(--kz-ink); }
.kz-nextlink__cat { font-size: var(--kz-t-micro); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--kz-em-700); margin-bottom: 4px; }
.kz-nextlink__q { font-size: var(--kz-t-sm); font-weight: 700; line-height: 1.35; }

.kz-eventtable {
    background: var(--kz-surface);
    border: 1px solid var(--kz-line);
    border-radius: var(--kz-r-lg);
    overflow: hidden;
}
.kz-eventrow {
    display: flex;
    align-items: center;
    gap: var(--kz-4);
    padding: var(--kz-3) var(--kz-5);
    border-bottom: 1px solid var(--kz-line-soft);
}
.kz-eventrow:last-child { border-bottom: 0; }
.kz-eventrow__delta {
    font-family: var(--kz-font-display);
    font-weight: 800;
    font-size: 0.95rem;
    flex: none;
    min-width: 2.6rem;
    font-variant-numeric: tabular-nums;
}
.kz-eventrow__delta--up { color: var(--kz-em-700); }
.kz-eventrow__delta--down { color: var(--kz-clay-600); }
.kz-eventrow__reason { flex: 1; min-width: 0; font-size: var(--kz-t-sm); color: var(--kz-ink-3); }
.kz-eventrow__date { font-size: var(--kz-t-xs); color: var(--kz-ink-5); flex: none; }

.kz-profilehero {
    display: flex;
    align-items: center;
    gap: var(--kz-4) var(--kz-5);
    flex-wrap: wrap;
    padding: clamp(1.15rem, 3vw, 1.6rem) clamp(1.15rem, 3vw, 1.75rem);
    background: var(--kz-surface);
    border: 1px solid var(--kz-line);
    border-radius: var(--kz-r-xl);
    box-shadow: var(--kz-e-1);
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.kz-profilehero__id { display: flex; align-items: center; gap: var(--kz-4); min-width: 0; flex: 1 1 16rem; }
.kz-profilehero__id h1 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 1.9rem); }
.kz-profilehero__sub { margin: 3px 0 0; font-size: var(--kz-t-sm); color: var(--kz-ink-4); }
.kz-profilehero > [data-kz-reveal] { flex: none; }

.kz-nameedit {
    gap: var(--kz-2);
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    margin-top: var(--kz-3);
    padding-top: var(--kz-3);
    border-top: 1px solid var(--kz-line-soft);
}
.kz-nameedit:not([hidden]) { display: flex; }
.kz-nameedit .kz-input { width: auto; flex: 1 1 14rem; min-width: 0; }
.kz-nameedit__err { flex-basis: 100%; margin: 0; font-size: var(--kz-t-xs); color: var(--kz-clay-600); }

html.no-js [data-kz-reveal] { display: none; }
html.no-js .kz-nameedit[hidden] { display: flex; }


/* 34. Leaderboard podium
   ========================================================================== */

.kz-podium {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--kz-3);
    align-items: end;
    margin-bottom: var(--kz-6);
}

.kz-podium__card {
    display: flex;
    flex-direction: column;
    gap: var(--kz-1);
    padding: var(--kz-5);
    background: var(--kz-surface);
    border: 1px solid var(--kz-line);
    border-radius: var(--kz-r-lg);
    text-align: center;
}

.kz-podium__card--first {
    background: var(--kz-em-900);
    border-color: var(--kz-em-900);
    color: #CFE0D6;
    padding-block: var(--kz-6);
    box-shadow: var(--kz-e-lift);
}

.kz-podium__rank {
    font-family: var(--kz-font-display);
    font-size: var(--kz-t-micro);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kz-ink-5);
}

.kz-podium__card--first .kz-podium__rank { color: var(--kz-em-mint); }

.kz-podium__name { font-family: var(--kz-font-display); font-size: 1.05rem; font-weight: 800; color: var(--kz-ink); }
.kz-podium__card--first .kz-podium__name { color: #fff; }

.kz-podium__rep {
    font-family: var(--kz-font-display);
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--kz-em-700);
}

.kz-podium__card--first .kz-podium__rep { color: #fff; }

.kz-podium__meta { font-size: var(--kz-t-micro); color: var(--kz-ink-4); }
.kz-podium__card--first .kz-podium__meta { color: #A9C3B4; }

@media (max-width: 40rem) {
    .kz-podium { grid-template-columns: 1fr; }
    .kz-podium__card { order: 0 !important; }
}


/* 35. Bare layout, auth polish, prose cards
   ========================================================================== */

.kz-header--bare {
    position: static;
    background: transparent;
    border-bottom: 0;
    box-shadow: none;
    padding: var(--kz-5) 0;
}

.kz-header--bare .kz-header__inner { min-height: 0; justify-content: flex-start; }

.kz-field__labelrow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--kz-3);
}

/* Auth card: a bit more lift than a plain panel, per the comps. */
.kz-container--form .kz-panel { box-shadow: var(--kz-e-3); }
.kz-formhead { text-align: center; }
.kz-formhead h1 { font-family: var(--kz-font-display); font-weight: 800; }

/* Stacked prose cards (resolution policy, and future info pages). */
.kz-prosecards { display: flex; flex-direction: column; gap: var(--kz-4); }

.kz-prosecard {
    padding: var(--kz-6);
    background: var(--kz-surface);
    border: 1px solid var(--kz-line);
    border-radius: var(--kz-r-lg);
}

.kz-prosecard--note { background: var(--kz-bronze-50); border-color: var(--kz-bronze-100); }

.kz-prosecard__title { margin-bottom: var(--kz-2); font-size: 1.0625rem; }
.kz-prosecard p { margin: 0; color: var(--kz-ink-3); font-size: var(--kz-t-sm); line-height: 1.65; }


/* 36. Market detail: confidence presets, related strip
   ========================================================================== */

.kz-confpick { display: flex; flex-direction: column; gap: var(--kz-2); }

.kz-confpick__opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kz-3);
    width: 100%;
    padding: 0.7rem 0.9rem;
    background: var(--kz-surface);
    border: 1px solid var(--kz-line-strong);
    border-radius: var(--kz-r-md);
    color: var(--kz-ink);
    font-family: inherit;
    font-size: var(--kz-t-sm);
    font-weight: 640;
    cursor: pointer;
    transition: border-color var(--kz-dur-1) var(--kz-ease), background-color var(--kz-dur-1) var(--kz-ease);
}

.kz-confpick__opt:hover { border-color: var(--kz-em-600); }

.kz-confpick__opt[aria-pressed="true"] {
    border-color: var(--kz-em-700);
    background: var(--kz-em-50);
}

.kz-confpick__pct { color: var(--kz-em-700); font-weight: 800; }

.kz-confpick__exacttoggle {
    align-self: flex-start;
    margin-top: var(--kz-2);
    padding: 0;
    border: 0;
    background: none;
    color: var(--kz-ink-4);
    font-family: inherit;
    font-size: var(--kz-t-xs);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.16em;
    cursor: pointer;
}

.kz-confpick__exacttoggle:hover { color: var(--kz-em-700); }
.kz-confpick__exacttoggle[aria-expanded="true"] { display: none; }

.kz-probpick { margin-top: var(--kz-3); }

/* Without JS the presets are inert, so show the exact input and hide the rest. */
html.no-js .kz-confpick,
html.no-js .kz-confpick__exacttoggle { display: none; }
html.no-js .kz-probpick[hidden] { display: block; }

.kz-relsection { margin-top: var(--kz-9); padding-top: var(--kz-7); border-top: 1px solid var(--kz-line); }


/* 36b. Forecast card (2026 refresh) — dark question header, share foot
   ========================================================================== */

.kz-fcard-wrap { max-width: 30rem; margin: var(--kz-6) auto var(--kz-9); }
.kz-fcard-kicker {
    margin: 0 0 var(--kz-3);
    text-align: center;
    font-size: var(--kz-t-micro);
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--kz-ink-5);
}

.kz-fcard {
    background: var(--kz-surface);
    border: 1px solid var(--kz-line);
    border-radius: var(--kz-r-xl);
    box-shadow: var(--kz-e-lift);
    overflow: hidden;
    max-width: none;
    margin: 0;
}

.kz-fcard__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kz-3);
    padding: var(--kz-5) var(--kz-6) 0;
    background: var(--kz-em-900);
}

.kz-fcard__question-wrap { padding: var(--kz-4) var(--kz-6) var(--kz-6); background: var(--kz-em-900); }

.kz-fcard__question {
    margin: 0;
    color: #fff;
    font-family: var(--kz-font-display);
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.28;
    letter-spacing: -0.02em;
}

.kz-fcard__chip {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: var(--kz-r-sm);
    background: rgba(127, 211, 168, 0.18);
    color: var(--kz-em-mint);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.kz-fcard__chip--muted { background: rgba(244, 247, 242, 0.14); color: #CDDFD3; }

.kz-fcard__statebadge {
    padding: 0.2rem 0.55rem;
    border-radius: var(--kz-r-sm);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.kz-fcard__statebadge.is-open { background: rgba(127, 211, 168, 0.18); color: var(--kz-em-mint); }
.kz-fcard__statebadge.is-resolved { background: rgba(244, 247, 242, 0.14); color: #CDDFD3; }

.kz-fcard__body { padding: var(--kz-6); }

.kz-fcard__call {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--kz-3);
    margin-bottom: var(--kz-3);
}

.kz-fcard__side {
    font-size: var(--kz-t-xs);
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.kz-fcard__side--yes { color: var(--kz-em-700); }
.kz-fcard__side--no { color: var(--kz-clay-600); }

.kz-fcard__prob {
    font-family: var(--kz-font-display);
    font-size: 2.1rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--kz-ink);
}

.kz-fcard__track { height: 9px; border-radius: 5px; background: var(--kz-clay-100); overflow: hidden; }
.kz-fcard__fill { height: 100%; border-radius: 5px; }
.kz-fcard__fill--yes { background: var(--kz-em-700); }
.kz-fcard__fill--no { background: var(--kz-clay-600); }

.kz-fcard__result {
    display: flex;
    align-items: center;
    gap: var(--kz-2);
    margin-top: var(--kz-5);
    padding: var(--kz-3) var(--kz-4);
    border-radius: var(--kz-r-md);
    background: var(--kz-surface-2);
    font-size: var(--kz-t-xs);
    font-weight: 600;
    color: var(--kz-ink-3);
}

.kz-fcard__resultdot { width: 10px; height: 10px; flex: none; border-radius: 50%; }
.kz-fcard__resultdot.is-correct { background: var(--kz-em-700); }
.kz-fcard__resultdot.is-incorrect { background: var(--kz-clay-600); }

.kz-fcard__pending { margin: var(--kz-5) 0 0; font-size: var(--kz-t-xs); color: var(--kz-ink-4); }

.kz-fcard__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kz-3);
    flex-wrap: wrap;
    margin-top: var(--kz-6);
    padding-top: var(--kz-4);
    border-top: 1px solid var(--kz-line-soft);
}

.kz-fcard__by { font-size: var(--kz-t-sm); font-weight: 700; color: var(--kz-ink); }
.kz-fcard__when { font-size: var(--kz-t-xs); color: var(--kz-ink-5); margin-top: 2px; }

.kz-fcard-url { margin: var(--kz-4) 0 var(--kz-3); }
.kz-fcard-url input {
    width: 100%;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--kz-line);
    border-radius: var(--kz-r-md);
    background: var(--kz-surface-2);
    color: var(--kz-ink-4);
    font-family: var(--kz-font-num);
    font-size: var(--kz-t-xs);
    text-align: center;
}


/* 37. Settings (account & security)
   ========================================================================== */

.kz-tabbar {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: var(--kz-paper-sunk);
    border: 1px solid var(--kz-line);
    border-radius: var(--kz-r-lg);
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.kz-tabbar__btn {
    text-decoration: none;
    font-weight: 700;
    font-size: var(--kz-t-sm);
    padding: 0.5rem 1.1rem;
    border-radius: var(--kz-r-md);
    color: var(--kz-ink-3);
    white-space: nowrap;
}
.kz-tabbar__btn:hover { color: var(--kz-ink); text-decoration: none; }
.kz-tabbar__btn[aria-current="page"] {
    background: var(--kz-em-700);
    color: #fff;
    box-shadow: var(--kz-e-1);
}

.kz-settinglist { display: flex; flex-direction: column; gap: var(--kz-4); }

.kz-setting {
    background: var(--kz-surface);
    border: 1px solid var(--kz-line);
    border-radius: var(--kz-r-xl);
    padding: clamp(1.25rem, 2.6vw, 1.6rem);
}
.kz-setting--danger { border-color: var(--kz-clay-100); }

.kz-setting__title { font-family: var(--kz-font-display); font-size: 0.95rem; font-weight: 800; margin-bottom: 4px; }
.kz-setting--danger .kz-setting__title { color: var(--kz-clay-700); }
.kz-setting__note { margin: 0 0 var(--kz-4); font-size: var(--kz-t-sm); color: var(--kz-ink-4); max-width: 52ch; }

.kz-setting__row { display: flex; gap: var(--kz-3); flex-wrap: wrap; align-items: flex-start; }
.kz-setting__row .kz-input { flex: 1 1 14rem; min-width: 0; }
.kz-setting__stack { display: flex; flex-direction: column; gap: var(--kz-3); max-width: 25rem; margin-bottom: var(--kz-4); }

.kz-setting__inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kz-4);
    flex-wrap: wrap;
}
.kz-setting__value { font-size: var(--kz-t-sm); font-weight: 700; }

.kz-pill--on {
    display: inline-flex;
    align-items: center;
    gap: var(--kz-1);
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: var(--kz-t-xs);
    font-weight: 700;
    background: var(--kz-em-100);
    color: var(--kz-em-800);
}

.kz-twofa { margin-top: var(--kz-4); padding-top: var(--kz-4); border-top: 1px solid var(--kz-line-soft); }
.kz-twofa__secret {
    font-family: var(--kz-font-num, monospace);
    font-size: 1rem;
    letter-spacing: 0.12em;
    background: var(--kz-paper-sunk);
    border: 1px solid var(--kz-line);
    border-radius: var(--kz-r-md);
    padding: 0.6rem 0.8rem;
    word-break: break-all;
    margin: var(--kz-2) 0 var(--kz-4);
}
.kz-twofa__uri { font-size: var(--kz-t-xs); color: var(--kz-ink-5); word-break: break-all; }

.kz-seslist { display: flex; flex-direction: column; }
.kz-sesrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kz-3);
    padding: var(--kz-3) 0;
    border-top: 1px solid var(--kz-line-soft);
}
.kz-sesrow:first-child { border-top: 0; }
.kz-sesrow__device { font-size: var(--kz-t-sm); font-weight: 700; }
.kz-sesrow__meta { font-size: var(--kz-t-xs); color: var(--kz-ink-4); margin-top: 2px; }
.kz-badge--thisdevice {
    font-size: var(--kz-t-micro);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--kz-em-800);
    background: var(--kz-em-100);
    padding: 2px 7px;
    border-radius: 5px;
    margin-left: var(--kz-2);
}
.kz-linkbtn {
    border: 0;
    background: transparent;
    color: var(--kz-clay-600);
    font: inherit;
    font-weight: 700;
    font-size: var(--kz-t-xs);
    cursor: pointer;
    white-space: nowrap;
}
.kz-linkbtn:hover { color: var(--kz-clay-700); }


/* 38. Admin console
   ========================================================================== */

.kz-adminshell { min-height: 100vh; display: flex; flex-direction: column; background: var(--kz-paper); }

.kz-admintop {
    border-bottom: 1px solid var(--kz-line);
    background: var(--kz-paper);
}
.kz-admintop__inner {
    max-width: 100rem;
    margin: 0 auto;
    padding: 0.85rem clamp(1rem, 3vw, 2.5rem);
    display: flex;
    align-items: center;
    gap: var(--kz-4);
}
.kz-admintop__brand { display: flex; align-items: center; gap: var(--kz-2); text-decoration: none; color: var(--kz-ink); }
.kz-admintop__brand svg { flex: none; }
.kz-admintop__brand b { font-family: var(--kz-font-display); font-weight: 820; font-size: 1.25rem; letter-spacing: -0.02em; }
.kz-admintop__badge {
    font-size: var(--kz-t-xs); font-weight: 700; color: var(--kz-em-700);
    background: var(--kz-em-100); padding: 0.2rem 0.55rem; border-radius: var(--kz-r-sm);
}
.kz-admintop__right { margin-left: auto; display: flex; align-items: center; gap: var(--kz-4); }
.kz-admintop__public { font-size: var(--kz-t-sm); font-weight: 700; color: var(--kz-ink-4); text-decoration: none; }
.kz-admintop__public:hover { color: var(--kz-em-700); }
.kz-admintop__avatar {
    width: 2rem; height: 2rem; border-radius: 50%;
    background: var(--kz-em-900); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--kz-font-display); font-weight: 800; font-size: var(--kz-t-xs);
    text-decoration: none;
}

.kz-adminshell__body { flex: 1 0 auto; display: flex; max-width: 100rem; width: 100%; margin: 0 auto; }

.kz-adminside {
    flex: 0 0 13.75rem;
    width: 13.75rem;
    background: var(--kz-paper-sunk);
    border-right: 1px solid var(--kz-line);
    padding: var(--kz-4) var(--kz-3);
    align-self: stretch;
}
.kz-adminside__search {
    display: block;
    width: 100%;
    box-sizing: border-box;
    background: var(--kz-surface);
    border: 1px solid var(--kz-line-strong);
    border-radius: var(--kz-r-md);
    padding: 0.5rem 0.7rem;
    margin-bottom: var(--kz-4);
    font-size: var(--kz-t-xs);
    color: var(--kz-ink-4);
    text-decoration: none;
}
.kz-adminside__search:hover { color: var(--kz-ink); border-color: var(--kz-em-500); }
.kz-adminside__group { margin-bottom: var(--kz-4); }
.kz-adminside__grouplabel {
    font-size: var(--kz-t-micro); font-weight: 800; letter-spacing: 0.07em;
    text-transform: uppercase; color: var(--kz-ink-5);
    padding: var(--kz-2) var(--kz-3) var(--kz-1);
}
.kz-adminside__nav { display: flex; flex-direction: column; gap: 2px; }
.kz-adminside__link {
    font-family: var(--kz-font-display);
    font-weight: 700;
    font-size: var(--kz-t-sm);
    padding: 0.55rem 0.7rem;
    border-radius: var(--kz-r-md);
    color: var(--kz-ink-3);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kz-2);
}
.kz-adminside__link:hover { background: var(--kz-line-soft); color: var(--kz-ink); text-decoration: none; }
.kz-adminside__link[aria-current="page"] { background: var(--kz-em-100); color: var(--kz-em-700); }
.kz-adminside__soon {
    font-size: var(--kz-t-micro); font-weight: 700; color: var(--kz-ink-5);
    background: var(--kz-bronze-50); padding: 1px 5px; border-radius: 4px;
}

.kz-adminmain { flex: 1; min-width: 0; padding: clamp(1.5rem, 3.4vw, 2.75rem) clamp(1rem, 4vw, 3rem) clamp(3rem, 5vw, 4.5rem); }
.kz-adminmain__inner { margin: 0 auto; }
.kz-adminmain__inner--sm { max-width: 47.5rem; }
.kz-adminmain__inner--md { max-width: 56rem; }
.kz-adminmain__inner--lg { max-width: 75rem; }

.kz-adminhead {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: var(--kz-4); flex-wrap: wrap; margin-bottom: var(--kz-6);
}
.kz-adminhead__eyebrow {
    font-family: var(--kz-font-display); font-size: var(--kz-t-xs); font-weight: 800;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--kz-em-700);
}
.kz-adminhead h1 { margin: 0.25rem 0 0; font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.1rem); }
.kz-adminhead__sub { margin: 0.4rem 0 0; font-size: var(--kz-t-sm); color: var(--kz-ink-4); max-width: 62ch; }
.kz-adminback {
    display: inline-flex; align-items: center; gap: var(--kz-1);
    font-size: var(--kz-t-xs); font-weight: 700; color: var(--kz-ink-4);
    text-decoration: none; margin-bottom: var(--kz-4);
}
.kz-adminback:hover { color: var(--kz-em-700); }

.kz-adminflash {
    margin: 0 0 var(--kz-5);
    padding: 0.7rem 0.9rem;
    border-radius: var(--kz-r-md);
    font-size: var(--kz-t-sm);
    font-weight: 600;
}
.kz-adminflash--ok { background: var(--kz-em-100); color: var(--kz-em-800); }
.kz-adminflash--err { background: var(--kz-clay-100); color: var(--kz-clay-700); }
.kz-adminflash--warn { background: var(--kz-bronze-100); color: var(--kz-bronze-700); }

.kz-adminmetrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
    gap: var(--kz-4);
    margin-bottom: var(--kz-7);
}
.kz-adminmetric {
    background: var(--kz-surface); border: 1px solid var(--kz-line);
    border-radius: var(--kz-r-lg); padding: 1.1rem 1.25rem;
}
.kz-adminmetric__label { font-size: var(--kz-t-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--kz-ink-4); }
.kz-adminmetric__value { font-family: var(--kz-font-display); font-size: 1.85rem; font-weight: 800; letter-spacing: -0.02em; margin: 0.35rem 0 0.3rem; font-variant-numeric: tabular-nums; }
.kz-adminmetric__meta { font-size: var(--kz-t-xs); color: var(--kz-ink-4); }

.kz-adminpanel {
    background: var(--kz-surface); border: 1px solid var(--kz-line);
    border-radius: var(--kz-r-lg); overflow: hidden; margin-bottom: var(--kz-5);
}
.kz-adminpanel__head {
    padding: 0.9rem 1.25rem; border-bottom: 1px solid var(--kz-line);
    display: flex; align-items: center; justify-content: space-between; gap: var(--kz-3);
}
.kz-adminpanel__title { margin: 0; font-size: 1rem; font-weight: 700; }
.kz-adminpanel__body { padding: 1.15rem 1.25rem; }
.kz-adminpanel__foot { padding: 0.85rem 1.25rem; border-top: 1px solid var(--kz-line-soft); font-size: var(--kz-t-xs); color: var(--kz-ink-4); }

.kz-adminrows { display: flex; flex-direction: column; }
.kz-adminrow {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--kz-4); padding: 0.85rem 1.25rem; border-bottom: 1px solid var(--kz-line-soft);
    text-decoration: none; color: var(--kz-ink);
}
.kz-adminrow:last-child { border-bottom: 0; }
a.kz-adminrow:hover { background: var(--kz-line-soft); color: var(--kz-ink); }
.kz-adminrow__main { min-width: 0; }
.kz-adminrow__title { font-weight: 700; font-size: var(--kz-t-sm); }
.kz-adminrow__meta { font-size: var(--kz-t-xs); color: var(--kz-ink-4); margin-top: 2px; }

.kz-datatable { width: 100%; }
.kz-datatable__wrap { overflow-x: auto; }
.kz-datatable__head, .kz-datatable__row {
    display: grid; gap: var(--kz-3); align-items: center;
    padding: 0.7rem 1.25rem;
}
.kz-datatable__head {
    border-bottom: 1px solid var(--kz-line);
    font-size: var(--kz-t-micro); font-weight: 800; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--kz-ink-4);
}
.kz-datatable__row { border-bottom: 1px solid var(--kz-line-soft); font-size: var(--kz-t-sm); }
.kz-datatable__row:last-child { border-bottom: 0; }
.kz-datatable__row--interactive { cursor: pointer; }
.kz-datatable__row--interactive:hover { background: var(--kz-line-soft); }
.kz-datatable__sub { padding: 1rem 1.25rem; background: var(--kz-paper); border-bottom: 1px solid var(--kz-line-soft); }
.kz-datatable__empty { padding: 2rem 1.25rem; text-align: center; color: var(--kz-ink-4); font-size: var(--kz-t-sm); }

.kz-tag {
    display: inline-block; font-size: var(--kz-t-micro); font-weight: 700;
    padding: 0.15rem 0.5rem; border-radius: 999px; white-space: nowrap;
}
.kz-tag--ok { background: var(--kz-em-100); color: var(--kz-em-800); }
.kz-tag--warn { background: var(--kz-bronze-100); color: var(--kz-bronze-700); }
.kz-tag--bad { background: var(--kz-clay-100); color: var(--kz-clay-700); }
.kz-tag--mute { background: var(--kz-line-soft); color: var(--kz-ink-4); }

.kz-adminfield { display: block; margin-bottom: var(--kz-4); }
.kz-adminfield__label { display: block; font-size: var(--kz-t-xs); font-weight: 700; margin-bottom: 0.35rem; }
.kz-adminfield__hint { margin: 0.35rem 0 0; font-size: var(--kz-t-xs); color: var(--kz-ink-4); }
.kz-adminfield__error { margin: 0.3rem 0 0; font-size: var(--kz-t-xs); font-weight: 700; color: var(--kz-clay-600); }
.kz-adminfield__grid { display: grid; gap: var(--kz-3); }
.kz-adminfield__grid--2 { grid-template-columns: 1fr 1fr; }

.kz-adminactions { display: flex; gap: var(--kz-2); flex-wrap: wrap; align-items: center; }

@media (max-width: 60rem) {
    .kz-adminshell__body { flex-direction: column; }
    .kz-adminside {
        flex-basis: auto; width: 100%; border-right: 0;
        border-bottom: 1px solid var(--kz-line);
        display: flex; flex-wrap: wrap; gap: var(--kz-2);
    }
    .kz-adminside__search { flex-basis: 100%; }
    .kz-adminside__group { margin-bottom: 0; }
    .kz-adminside__grouplabel { display: none; }
    .kz-adminside__nav { flex-direction: row; flex-wrap: wrap; }
    .kz-adminfield__grid--2 { grid-template-columns: 1fr; }
}


/* 39. Product analytics (Phase 23)
   ========================================================================== */

.kz-mono {
    font-family: ui-monospace, "SF Mono", "SFMono-Regular", "Cascadia Mono",
                 "Roboto Mono", Menlo, Consolas, monospace;
    font-size: 0.9em;
}

/* Reporting-window tabs. */
.kz-adminrange {
    display: flex; flex-wrap: wrap; gap: var(--kz-1);
    margin: 0 0 var(--kz-5);
    border-bottom: 1px solid var(--kz-line);
}
.kz-adminrange__tab {
    padding: var(--kz-2) var(--kz-3);
    font-size: var(--kz-t-sm); font-weight: 600; color: var(--kz-ink-4);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.kz-adminrange__tab:hover { color: var(--kz-ink); text-decoration: none; }
.kz-adminrange__tab.is-active { color: var(--kz-em-700); border-bottom-color: var(--kz-em-700); }

/* Funnel: a descending set of proportional bars. */
.kz-funnel { display: flex; flex-direction: column; gap: var(--kz-2); }
.kz-funnel__row {
    display: grid; grid-template-columns: 12rem 1fr 3rem;
    align-items: center; gap: var(--kz-3);
}
.kz-funnel__label { font-size: var(--kz-t-sm); color: var(--kz-ink-3); }
.kz-funnel__bar {
    background: var(--kz-em-700); color: #fff;
    border-radius: var(--kz-r-sm); min-width: 2.5rem;
    padding: 0.3rem 0.6rem; font-size: var(--kz-t-xs); font-weight: 700;
    font-variant-numeric: tabular-nums; text-align: right;
    transition: width var(--kz-dur-2) var(--kz-ease);
}
.kz-funnel__step {
    font-size: var(--kz-t-xs); color: var(--kz-ink-4);
    font-variant-numeric: tabular-nums; text-align: right;
}

/* Product health: one small card per dimension. */
.kz-healthgrid {
    display: grid; gap: var(--kz-3);
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.kz-healthcard {
    border: 1px solid var(--kz-line); border-radius: var(--kz-r-md);
    background: var(--kz-surface); padding: var(--kz-4);
}
.kz-healthcard__top {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--kz-2); margin-bottom: var(--kz-2);
}
.kz-healthcard__label {
    font-size: var(--kz-t-xs); font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--kz-ink-4);
}
.kz-healthcard__headline { margin: 0 0 0.25rem; font-size: var(--kz-t-sm); font-weight: 600; }
.kz-healthcard__detail { margin: 0; font-size: var(--kz-t-xs); color: var(--kz-ink-4); }

@media (max-width: 40rem) {
    .kz-funnel__row { grid-template-columns: 1fr; gap: 0.15rem; }
    .kz-funnel__step { text-align: left; }
}


/* 40. Auth popup
   Sign in / create account as a centred popup rather than two standalone
   pages. .kz-authmodal is the JS-opened overlay, included hidden on every
   guest page (see views/partials/auth-modal.php): clicking the header's Sign
   in / Create account never navigates, the popup just appears over the page
   you're already on. /login and /register remain real routes (no JS, and the
   surface a failed submit re-renders to) but stay on the small bare header
   and reuse the same .kz-authmodal__panel card, at the same width, so a page
   load and the instant popup look like the same thing.
   ========================================================================== */

.kz-authmodal {
    position: fixed;
    inset: 0;
    z-index: 150;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--kz-5);
}

.kz-authmodal[hidden] { display: none; }

.kz-authmodal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 20, 16, 0.6);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.kz-authmodal__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--kz-w-form);
    max-height: calc(100vh - 2 * var(--kz-5));
    overflow-y: auto;
    padding: var(--kz-6);
    background: var(--kz-surface);
    border-radius: var(--kz-r-xl);
    box-shadow: var(--kz-e-3);
    animation: kz-authmodal-in var(--kz-dur-2) var(--kz-ease);
}

/* The standalone page's copy of the same card: no fixed/backdrop positioning
   (it's real page content, already centred by .kz-container--form), and no
   entrance animation (nothing was "opened"). */
.kz-authmodal__panel--page {
    margin: 0 auto;
    max-width: none;
    animation: none;
}

@keyframes kz-authmodal-in {
    from { opacity: 0; transform: translateY(6px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .kz-authmodal__panel { animation: none; }
}

.kz-authmodal__close {
    position: absolute;
    top: var(--kz-4);
    right: var(--kz-4);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--kz-r-md);
    color: var(--kz-ink-4);
    transition: background-color var(--kz-dur-1) var(--kz-ease), color var(--kz-dur-1) var(--kz-ease);
}

.kz-authmodal__close:hover { background: var(--kz-paper-sunk); color: var(--kz-ink); text-decoration: none; }

.kz-authmodal__tabs { display: flex; justify-content: center; margin-bottom: var(--kz-6); }

.kz-formhead--modal { margin-bottom: var(--kz-5); }
.kz-formhead--modal h2 { margin: 0 0 var(--kz-2); font-size: var(--kz-t-h3); }

.kz-authmodal__switch {
    margin: var(--kz-5) 0 0;
    text-align: center;
    font-size: var(--kz-t-sm);
    color: var(--kz-ink-4);
}

body.kz-noscroll { overflow: hidden; }

@media (max-width: 30rem) {
    .kz-authmodal { padding: var(--kz-3); }
    .kz-authmodal__panel { padding: var(--kz-5); }
}