/*
 * Component Styles — Wireframe Mode
 *
 * All values reference tokens.css.  No hard-coded colors, fonts,
 * or spacing anywhere in this file.
 *
 * Components:
 *   .step-box         — journey/navigation step container
 *   .step-connector   — vertical line connecting step boxes
 *   .btn              — buttons
 *   .card             — generic content card
 *   .view-toggle      — Me / My Team tab switcher
 *   .badge            — status badges
 *   .nav-header       — top navigation bar
 *   .tab-nav          — horizontal tab navigation
 *   .sidebar-nav      — vertical icon navigation (admin)
 *   .breadcrumb       — breadcrumb trail
 *   .lang-switcher    — language toggle (EN | NL | FR)
 *   .chart-container  — radar chart wrapper
 *   .chart-legend     — toggleable chart legend
 *   .score-bar        — horizontal score bar
 *   .severity-bar     — multi-segment progress bar
 *   .severity-label   — inline colored severity text
 *   .data-table       — sortable data table
 *   .filter-sidebar   — checkbox filter groups
 *   .form-input       — text inputs
 *   .dimension-card   — ranked dimension cards
 *   .rank-badge       — circled rank number
 *   .icon-circle      — dimension icon container
 *   .section-header   — section title with indicator dot
 *   .profile-header   — profile name/email/type
 */


/* ═══════════════════════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════════════════════ */

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

body {
    font-family: var(--kz-font-family);
    font-size: var(--kz-font-size-base);
    line-height: var(--kz-line-height);
    color: var(--kz-color-text);
    background: var(--kz-color-bg);
    /* Match handoff prototype rendering. Without these the OS does subpixel
       antialiasing which renders fonts visibly thicker than the design tool's
       grayscale antialiasing. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}


/* ═══════════════════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════════════════ */

.layout {
    max-width: var(--kz-max-width);
    margin: 0 auto;
    padding: var(--kz-space-4);
}

/* Narrow variant — single-column flows (invite, accept, upgrade
 * confirmation) sit in a ~560 px column so forms and confirmations
 * don't sprawl across the full content width. */
.layout--narrow {
    max-width: 560px;
}

.layout-sidebar {
    display: grid;
    grid-template-columns: var(--kz-sidebar-width) 1fr;
    gap: var(--kz-space-5);
    max-width: var(--kz-max-width);
    margin: 0 auto;
    padding: var(--kz-space-4);
}

.layout-sidebar > section {
    max-width: var(--kz-content-max-width);
}

@media (max-width: 720px) {
    .layout-sidebar {
        grid-template-columns: 1fr;
    }
}


/* ═══════════════════════════════════════════════════════════════
   SIDEBAR CHROME  — logo, footer, user menu
   ═══════════════════════════════════════════════════════════════ */

.sidebar__logo {
    /* Brand wordmark — display font (Roboto per brand book), with a
       coloured period (see __dot) that carries the brand accent. */
    display: inline-block;
    font-family: var(--kz-font-display);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.015em;
    text-decoration: none;
    color: var(--kz-color-text);
    padding-bottom: var(--kz-space-3);
    margin-bottom: var(--kz-space-2);
    border-bottom: var(--kz-border);
}

.sidebar__logo-dot {
    /* Coloured period — injected after "Kazi" by the template so existing
       i18n strings don't need to bake the dot into the translation. */
    color: var(--kz-color-series-a);
}

.nav-sections {
    /* Sidebar rail — subtle warm grey bg separates from the white canvas. */
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: var(--kz-space-5) var(--kz-space-4);
    padding-bottom: 0;
    overflow-y: auto;
    position: sticky;
    top: 0;
    background: var(--kz-color-bg-muted);
}

.sidebar__footer {
    margin-top: auto;
    padding-top: var(--kz-space-4);
    padding-bottom: var(--kz-space-4);
    border-top: var(--kz-border);
}

.sidebar__lang-toggle {
    display: flex;
    gap: var(--kz-space-2);
    margin-bottom: var(--kz-space-3);
}

.sidebar__user-menu {
    display: flex;
    align-items: center;
    gap: var(--kz-space-2);
    position: relative;
}

.sidebar__user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--kz-color-bg-muted);
    font-size: var(--kz-font-size-sm);
    font-weight: var(--kz-font-weight-bold);
    flex-shrink: 0;
}

.sidebar__user-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar__user-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--kz-font-size-lg);
    color: var(--kz-color-text-muted);
    padding: var(--kz-space-1);
}

.sidebar__user-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: var(--kz-color-surface);
    border: var(--kz-border);
    border-radius: var(--kz-radius-md);
    padding: var(--kz-space-1) 0;
    box-shadow: var(--kz-shadow-md);
    z-index: var(--kz-z-dropdown);
}

.sidebar__user-dropdown-item {
    display: block;
    padding: var(--kz-space-2) var(--kz-space-3);
    text-decoration: none;
    color: var(--kz-color-text);
}

.sidebar__user-dropdown-item:hover {
    background: var(--kz-color-bg-muted);
}

/* ═══════════════════════════════════════════════════════════════
   NAV SECTION GROUP  — wrapper for grouped sections (e.g. Role)
   ═══════════════════════════════════════════════════════════════ */

.nav-section-group {
    /* Flat group — eyebrow label + items, no card wrapper.
       Per Claude Design renders, sections are separated by spacing
       and the eyebrow label alone, not by hairlines. */
    margin-bottom: var(--kz-space-4);
}

.nav-section-group__title {
    font-size: var(--kz-font-size-xs);
    font-weight: var(--kz-font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--kz-letter-spacing-wide);
    color: var(--kz-color-text-muted);
    margin-bottom: var(--kz-space-2);
}

.nav-section-group .nav-section {
    border: none;
    padding: 0;
    margin-bottom: var(--kz-space-2);
}

.nav-section-group .nav-section:last-child {
    margin-bottom: 0;
}

.nav-section__title-link {
    text-decoration: none;
    color: inherit;
}

.nav-section__title-link:hover {
    text-decoration: underline;
}

/* Eligible but not yet generated report state */
.nav-sub--eligible {
    opacity: 1;
}

.nav-sub--eligible .nav-sub__label {
    color: var(--kz-color-text);
}

/* ═══════════════════════════════════════════════════════════════
   NAV HEADER  — deprecated (top bar removed, kept for rollback)
   ═══════════════════════════════════════════════════════════════ */

.nav-header { display: none; }


/* ═══════════════════════════════════════════════════════════════
   VIEW TOGGLE  — [Me] [My Team]
   ═══════════════════════════════════════════════════════════════ */

.view-toggle {
    /* Pill-shape container: full-pill outer, inner buttons are their own
       pills with no dividers. Active pill inverts to dark; inactive is
       transparent. Matches the handoff "scope-toggle" pattern. */
    display: inline-flex;
    gap: 2px;
    padding: 4px;
    background: var(--kz-color-bg-subtle);
    border-radius: var(--kz-radius-pill);
    /* Flex items default to flex-shrink:1 and combined with the sidebar's
       column flex layout, the toggle can collapse below content height.
       Pin the cross-axis size so the pill never shrinks flat. */
    flex-shrink: 0;
    align-self: flex-start;
    line-height: 1;
}

.view-toggle__btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border: none;
    background: transparent;
    border-radius: var(--kz-radius-pill);
    font-family: var(--kz-font-family);
    font-size: 13px;
    font-weight: 500;
    color: var(--kz-color-text-muted);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--kz-transition-fast),
                color var(--kz-transition-fast);
}

.view-toggle__btn:hover {
    color: var(--kz-color-text);
}

.view-toggle__btn:focus-visible {
    outline: var(--kz-border-width-heavy) solid var(--kz-color-focus-ring);
    outline-offset: var(--kz-border-width-heavy);
}

.view-toggle__btn--active {
    background: var(--kz-color-action);
    color: var(--kz-color-action-text);
}

.view-toggle__btn--active:hover {
    color: var(--kz-color-action-text);
}


/* ═══════════════════════════════════════════════════════════════
   STEP BOX  — The core journey → navigation component
   ═══════════════════════════════════════════════════════════════

   States (set via modifier class):
     --todo       dashed border, prompt + CTA
     --active     solid heavy border, in-progress indicator
     --done       solid border, filled bg, workspace content
     --locked     dimmed, no pointer events

   From app-ux-architecture.md:
   "Each step transitions from a journey prompt to a permanent
    container once completed."
*/

.step-box {
    padding: var(--kz-space-4);
    border-radius: var(--kz-radius-md);
    margin-bottom: var(--kz-space-3);
    transition: background var(--kz-transition-base),
                border-color var(--kz-transition-base);
}

/* ── To-do (journey prompt) ─────────────────────────────────── */
.step-box--todo {
    background: var(--kz-color-step-todo-bg);
    border: var(--kz-border-width-heavy) dashed var(--kz-color-step-todo-border);
}

.step-box--todo .step-box__label {
    color: var(--kz-color-text-muted);
    font-size: var(--kz-font-size-sm);
    margin-bottom: var(--kz-space-1);
}

/* ── Active (in-progress) ───────────────────────────────────── */
.step-box--active {
    background: var(--kz-color-step-active-bg);
    border: var(--kz-border-width-heavy) solid var(--kz-color-step-active-border);
}

/* ── Done (navigation / workspace) ──────────────────────────── */
.step-box--done {
    background: var(--kz-color-step-done-bg);
    border: var(--kz-border-width-heavy) solid var(--kz-color-step-done-border);
}

/* ── Locked (step not yet available) ────────────────────────── */
.step-box--locked {
    background: var(--kz-color-step-locked-bg);
    border: var(--kz-border-width-heavy) dashed var(--kz-color-step-locked-border);
    opacity: 0.6;
    pointer-events: none;
}

.step-box--locked .step-box__title,
.step-box--locked .step-box__body {
    color: var(--kz-color-step-locked-text);
}

/* ── Step box internals ─────────────────────────────────────── */

.step-box__label {
    font-size: var(--kz-font-size-xs);
    text-transform: uppercase;
    letter-spacing: var(--kz-letter-spacing);
    color: var(--kz-color-text-faint);
    margin-bottom: var(--kz-space-1);
}

.step-box__title {
    font-size: var(--kz-font-size-base);
    font-weight: var(--kz-font-weight-bold);
    margin-bottom: var(--kz-space-2);
}

.step-box__body {
    font-size: var(--kz-font-size-sm);
    color: var(--kz-color-text-muted);
    margin-bottom: var(--kz-space-3);
}

.step-box__actions {
    display: flex;
    gap: var(--kz-space-2);
}

.step-box__meta {
    margin-top: var(--kz-space-1);
}

.step-box__inline-form {
    display: flex;
    gap: var(--kz-space-2);
    align-items: center;
}


/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */

.btn {
    /* Pill-shape button — per handoff §6.1.  Hairline 1px border so
       primary and secondary share the same silhouette; primary fills
       the pill in dark, secondary stays on a white surface. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--kz-space-2);
    padding: 10px 22px;
    font-family: var(--kz-font-family);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    border: 1px solid transparent;
    border-radius: var(--kz-radius-pill);
    cursor: pointer;
    transition: background var(--kz-transition-fast),
                color var(--kz-transition-fast),
                border-color var(--kz-transition-fast);
    text-decoration: none;
    user-select: none;
}

.btn--primary {
    background: var(--kz-color-action);
    color: var(--kz-color-action-text);
}

.btn--primary:hover {
    background: var(--kz-color-action-hover);
}

.btn--sm {
    font-size: 13px;
    padding: 8px 18px;
}

.btn--secondary {
    background: var(--kz-color-secondary-bg);
    color: var(--kz-color-text);
    border-color: var(--kz-color-secondary-border);
}

.btn--secondary:hover {
    background: var(--kz-color-secondary-hover);
}

.btn:focus-visible {
    outline: var(--kz-border-width-heavy) solid var(--kz-color-focus-ring);
    outline-offset: var(--kz-border-width-heavy);
}


/* ═══════════════════════════════════════════════════════════════
   CARD  — generic content container
   ═══════════════════════════════════════════════════════════════ */

.card {
    /* Soft surface — hairline border + hairline shadow combo matches
       the handoff §6.5 card treatment (shadow-card). */
    background: var(--kz-color-surface);
    border: 1px solid var(--kz-color-border);
    border-radius: var(--kz-radius-lg);
    padding: var(--kz-space-5);
    box-shadow: var(--kz-shadow-card);
}

.card__title {
    font-weight: var(--kz-font-weight-bold);
    margin-bottom: var(--kz-space-2);
}

.card__body {
    font-size: var(--kz-font-size-sm);
    color: var(--kz-color-text-muted);
}


/* ═══════════════════════════════════════════════════════════════
   BADGE  — status indicators
   ═══════════════════════════════════════════════════════════════ */

.badge {
    display: inline-block;
    padding: var(--kz-space-1) var(--kz-space-2);
    font-size: var(--kz-font-size-xs);
    font-weight: var(--kz-font-weight-bold);
    border-radius: var(--kz-radius-sm);
    text-transform: uppercase;
    letter-spacing: var(--kz-letter-spacing);
}

.badge--match {
    background: var(--kz-color-match);
    color: var(--kz-color-text-inverse);
}

.badge--tension {
    background: var(--kz-color-tension);
    color: var(--kz-color-text-inverse);
}

.badge--mismatch {
    background: var(--kz-color-mismatch);
    color: var(--kz-color-text-inverse);
}

.badge--boomerang {
    background: var(--kz-color-boomerang);
    color: var(--kz-color-text-inverse);
}

.badge--info {
    background: var(--kz-color-info-bg);
    color: var(--kz-color-info);
    border: 1px solid var(--kz-color-info-border);
    /* Numeric count chip — render as a round pill (circular for single
       digits), matching the scope-toggle count badge. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    line-height: 1;
    border-radius: var(--kz-radius-pill);
}

.badge--muted {
    background: var(--kz-color-bg-subtle);
    color: var(--kz-color-text-secondary);
}

.badge--current {
    background: var(--kz-color-bg-subtle);
    color: var(--kz-color-text);
    text-transform: none;
    font-weight: var(--kz-font-weight-normal);
}


/* ═══════════════════════════════════════════════════════════════
   STEP CONNECTOR  — vertical line between step boxes
   ═══════════════════════════════════════════════════════════════ */

.step-list {
    position: relative;
}

.step-list .step-box {
    position: relative;
    margin-bottom: 0;
}

.step-list .step-box + .step-box::before {
    content: "";
    position: absolute;
    top: calc(-1 * var(--kz-space-3));
    left: calc(var(--kz-space-6) + var(--kz-border-width-heavy));
    width: var(--kz-border-width-heavy);
    height: var(--kz-space-3);
    background: var(--kz-color-border);
}

.step-list .step-box + .step-box {
    margin-top: var(--kz-space-3);
}


/* ═══════════════════════════════════════════════════════════════
   TAB NAVIGATION  — Overview / People / Roles / Experiences
   ═══════════════════════════════════════════════════════════════ */

.tab-nav {
    display: flex;
    gap: var(--kz-space-5);
    border-bottom: var(--kz-border);
}

/* Top tab strip rendered by base_panel.html — shared shell for /team
   and /admin pages, anchored to the panel content gutter. */
.panel-tab-nav {
    padding: 0 var(--kz-space-5);
}

.tab-nav__item {
    padding: var(--kz-space-3) 0;
    font-size: var(--kz-font-size-base);
    color: var(--kz-tab-inactive-color);
    text-decoration: none;
    border-bottom: var(--kz-border-width-heavy) solid transparent;
    cursor: pointer;
    transition: color var(--kz-transition-fast),
                border-color var(--kz-transition-fast);
}

.tab-nav__item:hover {
    color: var(--kz-color-text);
}

.tab-nav__item--active {
    color: var(--kz-tab-active-color);
    font-weight: var(--kz-font-weight-bold);
    border-bottom-color: var(--kz-tab-active-border);
}


/* ═══════════════════════════════════════════════════════════════
   SIDEBAR NAVIGATION  — admin left rail (icon-based)
   ═══════════════════════════════════════════════════════════════ */

.sidebar-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--kz-sidebar-nav-width);
    height: 100vh;
    background: var(--kz-sidebar-nav-bg);
    color: var(--kz-sidebar-nav-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--kz-space-4) 0;
    z-index: 100;
}

.sidebar-nav__logo {
    margin-bottom: var(--kz-space-6);
}

.sidebar-nav__item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--kz-radius-md);
    color: var(--kz-sidebar-nav-color);
    text-decoration: none;
    margin-bottom: var(--kz-space-2);
    transition: background var(--kz-transition-fast);
}

.sidebar-nav__item:hover {
    background: var(--kz-sidebar-nav-hover);
}

.sidebar-nav__item:focus-visible {
    outline: var(--kz-border-width-heavy) solid var(--kz-color-focus-ring);
    outline-offset: var(--kz-border-width-heavy);
}

.sidebar-nav__item--active {
    background: var(--kz-sidebar-nav-active);
}

.sidebar-nav__footer {
    margin-top: auto;
    text-align: center;
    font-size: var(--kz-font-size-xs);
}

/* Offset main content when sidebar-nav is present */
.has-sidebar-nav {
    margin-left: var(--kz-sidebar-nav-width);
}


/* ═══════════════════════════════════════════════════════════════
   BREADCRUMB
   ═══════════════════════════════════════════════════════════════ */

.breadcrumb {
    display: flex;
    gap: var(--kz-space-2);
    font-size: var(--kz-font-size-sm);
    color: var(--kz-color-text-muted);
    margin-bottom: var(--kz-space-4);
}

.breadcrumb__link {
    color: var(--kz-color-link);
    text-decoration: underline;
}

.breadcrumb__separator::before {
    content: "/";
    margin: 0 var(--kz-space-1);
}

.breadcrumb__current {
    color: var(--kz-color-text);
}


/* ═══════════════════════════════════════════════════════════════
   LANGUAGE SWITCHER  — EN | NL | FR
   ═══════════════════════════════════════════════════════════════ */

.lang-switcher {
    display: inline-flex;
    gap: 0;
    border: var(--kz-border);
    border-radius: var(--kz-radius-md);
    overflow: hidden;
}

.lang-switcher__btn {
    padding: var(--kz-space-1) var(--kz-space-2);
    border: none;
    background: var(--kz-color-surface);
    font-family: var(--kz-font-family);
    font-size: var(--kz-font-size-xs);
    cursor: pointer;
    transition: background var(--kz-transition-fast);
}

.lang-switcher__btn:not(:last-child) {
    border-right: var(--kz-border);
}

.lang-switcher__btn:hover {
    background: var(--kz-color-bg-muted);
}

.lang-switcher__btn:focus-visible {
    outline: var(--kz-border-width-heavy) solid var(--kz-color-focus-ring);
    outline-offset: var(--kz-border-width-heavy);
}

.lang-switcher__btn--active {
    background: var(--kz-color-action);
    color: var(--kz-color-action-text);
}


/* ═══════════════════════════════════════════════════════════════
   CHART CONTAINER  — wrapper for radar chart SVGs
   ═══════════════════════════════════════════════════════════════

   The API renders SVGs server-side. This container provides
   consistent sizing and the legend below.
*/

.chart-container {
    background: var(--kz-chart-grid-bg);
    border: var(--kz-border);
    border-radius: var(--kz-radius-md);
    padding: var(--kz-space-4);
    text-align: center;
}

.chart-container svg {
    max-width: 100%;
    height: auto;
}


/* ═══════════════════════════════════════════════════════════════
   CHART LEGEND  — toggleable series labels
   ═══════════════════════════════════════════════════════════════ */

.chart-legend {
    display: flex;
    justify-content: center;
    gap: var(--kz-space-4);
    margin-top: var(--kz-space-3);
    font-size: var(--kz-font-size-sm);
}

.chart-legend__item {
    display: inline-flex;
    align-items: center;
    gap: var(--kz-space-1);
    cursor: pointer;
}

.chart-legend__dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.chart-legend__dot--a {
    background: var(--kz-color-series-a, #436493);
}

.chart-legend__dot--b {
    background: var(--kz-color-series-b, #006633);
}

.chart-legend__dot--c {
    background: var(--kz-color-series-c, #CC9900);
}

.chart-legend__item--hidden {
    text-decoration: line-through;
    opacity: 0.4;
}

.chart-legend__hint {
    display: block;
    text-align: center;
    font-size: var(--kz-font-size-xs);
    color: var(--kz-color-text-faint);
    margin-top: var(--kz-space-1);
}


/* ═══════════════════════════════════════════════════════════════
   SCORE BAR  — horizontal bar for dimension scores
   ═══════════════════════════════════════════════════════════════ */

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

/* SVG overlay bar: <svg class="score-bar__track"> with two
 * <rect class="score-bar__fill ..."> children — the wider bar
 * first (rendered behind), the narrower one second (rendered on
 * top in SVG document order, no z-index needed). */
.score-bar__track {
    display: block;
    flex: 1;
    height: var(--kz-bar-height);
    background: var(--kz-bar-track-color);
    border-radius: var(--kz-bar-radius);
}

.score-bar__fill {
    fill: var(--kz-bar-fill-color);
    transition: width var(--kz-transition-base);
}

/* Section-based fills (legacy) */
.score-bar__fill--wv { fill: var(--kz-color-wv); }
.score-bar__fill--tr { fill: var(--kz-color-tr); }

/* Series-based fills — match scan type to series colour */
.score-bar__fill--series-a { fill: var(--kz-color-series-a, #436493); }
.score-bar__fill--series-b { fill: var(--kz-color-series-b, #006633); }
.score-bar__fill--series-c { fill: var(--kz-color-series-c, #CC9900); }

.score-bar__label {
    flex-shrink: 0;
    font-size: var(--kz-font-size-sm);
    color: var(--kz-color-text-muted);
    text-transform: capitalize;
}

.score-bar__pct {
    width: 40px;
    text-align: right;
    flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════
   SEVERITY BAR  — multi-segment bar at top of reports
   (green/yellow/red/blue segments from Match → Boomerang)
   ═══════════════════════════════════════════════════════════════ */

/* SVG-based stacked bar: <svg class="severity-bar"> with one
 * <rect class="severity-bar__segment severity-bar__segment--<sev>">
 * per non-zero severity, x-offset computed in the template.  Rounded
 * corners come from the SVG container's clip-path; the rects
 * themselves are squared so the segment border between two colours
 * stays sharp. */
.severity-bar {
    display: block;
    width: 100%;
    height: 6px;
    border-radius: var(--kz-bar-radius);
    overflow: hidden;
    margin-bottom: var(--kz-space-4);
}

.severity-bar__segment {
    transition: width var(--kz-transition-base);
}

.severity-bar__segment--match     { fill: var(--kz-color-match); }
.severity-bar__segment--tension   { fill: var(--kz-color-tension); }
.severity-bar__segment--mismatch  { fill: var(--kz-color-mismatch); }
.severity-bar__segment--boomerang { fill: var(--kz-color-boomerang); }


/* ═══════════════════════════════════════════════════════════════
   SEVERITY SUMMARY  — "13 Match · 1 Tension" counters + legend
   ═══════════════════════════════════════════════════════════════ */

.severity-summary {
    display: flex;
    align-items: center;
    gap: var(--kz-space-4);
    font-size: var(--kz-font-size-sm);
    margin-bottom: var(--kz-space-3);
}

.severity-summary__count {
    display: inline-flex;
    align-items: center;
    gap: var(--kz-space-1);
    font-weight: var(--kz-font-weight-bold);
}

.severity-summary__dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.severity-summary__dot--match     { background: var(--kz-color-match); }
.severity-summary__dot--tension   { background: var(--kz-color-tension); }
.severity-summary__dot--mismatch  { background: var(--kz-color-mismatch); }
.severity-summary__dot--boomerang { background: var(--kz-color-boomerang); }

/* Dashboard chart section — centred chart, breathing room between sections */
.dashboard-chart-center {
    text-align: center;
}
.dashboard-chart-center svg {
    display: inline-block;
    max-width: 100%;
    height: auto;
}

.dashboard-charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--kz-space-4);
}

.dashboard-charts-row__box {
    background: var(--kz-color-surface);
    border: 1px solid var(--kz-color-border);
    border-radius: var(--kz-radius-lg);
    padding: var(--kz-space-5);
}

/* Dashboard chart-card head — title left, "N DIMENSIONS" eyebrow right. */
.dashboard-charts-row__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--kz-space-3);
    margin-bottom: var(--kz-space-3);
}

/* Scan-type pill — sits below the page title to identify which scan
   the profile/page belongs to. Hairline border, dot prefix in the
   scan-type series colour, label e.g. "Ideal Work · Apr '26". */
.scan-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    border: 1px solid var(--kz-color-border);
    border-radius: var(--kz-radius-pill);
    background: var(--kz-color-surface);
    font-size: 13px;
    font-weight: 500;
    color: var(--kz-color-text);
    width: fit-content;
}

.scan-pill__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--kz-color-series-a);
    flex-shrink: 0;
}

/* Tighter page-head — for hero panels where the title flows directly
   into a narrative quote (no big gap below the meta row). */
.page-head--tight {
    margin-bottom: var(--kz-space-3);
}

/* Tag — small inline pill. .tag--dimension uses warm-peach token pair. */
.tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--kz-radius-pill);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}

.tag--dimension {
    background: var(--kz-color-tag-bg);
    color: var(--kz-color-tag-text);
}

/* Tag row — flex group of tags with an eyebrow label on the left. */
.tag-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--kz-space-2);
    margin-top: var(--kz-space-4);
}

@media (max-width: 720px) {
    .dashboard-charts-row {
        grid-template-columns: 1fr;
    }
}

/* Role dashboard compact profile card — two small glyphs + meta text.
   Charts run as shape-only compact glyphs (no spokes, no dimension
   labels) and the meta column takes 1fr so the top Work Values / Team
   Roles copy is the dominant read in the card. */
.team-role-summary {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--kz-space-5);
    align-items: center;
}

.team-role-summary__charts {
    display: flex;
    gap: var(--kz-space-3);
}

.team-role-summary__chart-box {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--kz-space-1);
}

/* Render the radar at its natural viewBox size instead of the smaller
   width attribute, and let wrapped labels overflow (#21438). */
.team-role-summary__chart-box svg {
    max-width: 100%;
    height: auto;
    overflow: visible;
}

.team-role-summary__chart-label {
    font-size: var(--kz-font-size-xs);
    color: var(--kz-color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

@media (max-width: 720px) {
    .team-role-summary {
        grid-template-columns: 1fr;
    }
    .team-role-summary__charts {
        justify-content: center;
    }
}

/* Severity highlight — label line, then dimensions below */
.severity-highlight {
    line-height: 1.6;
}

.severity-highlight__header {
    display: flex;
    align-items: center;
    gap: 6px;
}

.severity-highlight__dims {
    padding-left: 16px;
}

/* Top dimensions numbered list (profile summary) */
.top-dims-list {
    display: inline;
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: top-dim;
}
.top-dims-list li {
    display: inline;
    counter-increment: top-dim;
}
.top-dims-list li::before {
    content: counter(top-dim) ". ";
    font-weight: bold;
}
.top-dims-list li + li::before {
    margin-left: 0.75em;
}


/* ═══════════════════════════════════════════════════════════════
   SEVERITY LABEL  — inline text (MATCH / TENSION / etc.)
   Used in dimension list rows, right-aligned.
   ═══════════════════════════════════════════════════════════════ */

.severity-label {
    font-size: var(--kz-font-size-xs);
    font-weight: var(--kz-font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--kz-letter-spacing);
}

.severity-label--match     { color: var(--kz-color-match); }
.severity-label--tension   { color: var(--kz-color-tension); }
.severity-label--mismatch  { color: var(--kz-color-mismatch); }
.severity-label--boomerang { color: var(--kz-color-boomerang); }
.severity-label--underline { border-bottom: 2px solid currentColor; }


/* ═══════════════════════════════════════════════════════════════
   SEVERITY PILL  — soft bg + saturated text (pill-shape badge)
   Paired with .severity-pill--match / --tension / --mismatch / --boomerang.
   ═══════════════════════════════════════════════════════════════ */

.severity-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--kz-radius-pill);
    font-family: var(--kz-font-family);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.severity-pill--match {
    background: var(--kz-color-match-soft);
    color: var(--kz-color-match);
}

.severity-pill--tension {
    background: var(--kz-color-tension-soft);
    /* Darker readable colour on the soft yellow background */
    color: #92400e;
}

.severity-pill--mismatch {
    background: var(--kz-color-mismatch-soft);
    color: var(--kz-color-mismatch);
}

.severity-pill--boomerang {
    background: var(--kz-color-boomerang-soft);
    color: var(--kz-color-boomerang);
}


/* ═══════════════════════════════════════════════════════════════
   DATA TABLE  — sortable with checkboxes and row actions
   ═══════════════════════════════════════════════════════════════ */

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--kz-font-size-sm);
}

.data-table th {
    text-align: left;
    padding: var(--kz-space-2) var(--kz-space-3);
    background: var(--kz-table-header-bg);
    color: var(--kz-table-header-color);
    font-weight: var(--kz-font-weight-bold);
    font-size: var(--kz-font-size-xs);
    text-transform: uppercase;
    letter-spacing: var(--kz-letter-spacing);
    border-bottom: var(--kz-border-width-heavy) solid var(--kz-table-border);
    cursor: pointer;
    user-select: none;
}

.data-table th .sort-icon {
    margin-left: var(--kz-space-1);
    opacity: 0.4;
}

.data-table th .sort-icon--active {
    opacity: 1;
}

.data-table td {
    padding: var(--kz-space-3);
    border-bottom: var(--kz-border-width) solid var(--kz-table-border);
    vertical-align: middle;
}

.data-table tr:hover td {
    background: var(--kz-table-row-hover);
}

.data-table__actions {
    display: flex;
    gap: var(--kz-space-2);
    justify-content: flex-end;
}

.data-table__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    color: var(--kz-color-text-muted);
    cursor: pointer;
    border-radius: var(--kz-radius-sm);
    transition: background var(--kz-transition-fast);
}

.data-table__action:hover {
    background: var(--kz-color-bg-muted);
    color: var(--kz-color-text);
}

.data-table__count {
    font-size: var(--kz-font-size-lg);
    font-weight: var(--kz-font-weight-bold);
    margin-bottom: var(--kz-space-4);
}


/* ═══════════════════════════════════════════════════════════════
   FILTER SIDEBAR  — checkbox filter groups
   ═══════════════════════════════════════════════════════════════ */

.filter-group {
    margin-bottom: var(--kz-space-5);
}

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

.filter-group__title {
    font-weight: var(--kz-font-weight-bold);
    font-size: var(--kz-font-size-base);
}

.filter-group__constraint {
    font-size: var(--kz-font-size-xs);
    color: var(--kz-color-text-faint);
}

.filter-group__item {
    display: flex;
    align-items: center;
    gap: var(--kz-space-2);
    padding: var(--kz-space-1) 0;
    font-size: var(--kz-font-size-sm);
    cursor: pointer;
}

.filter-group__item input[type="checkbox"] {
    accent-color: var(--kz-color-action);
}

.filter-group__clear {
    font-size: var(--kz-font-size-sm);
    color: var(--kz-color-link);
    cursor: pointer;
    border: none;
    background: none;
    padding: var(--kz-space-1) 0;
    margin-top: var(--kz-space-2);
}


/* ═══════════════════════════════════════════════════════════════
   SEARCH INPUT
   ═══════════════════════════════════════════════════════════════ */

.search-input {
    display: flex;
    align-items: center;
    gap: var(--kz-space-2);
    background: var(--kz-input-bg);
    border: var(--kz-border-width) solid var(--kz-input-border);
    border-radius: var(--kz-input-radius);
    padding: var(--kz-input-padding);
}

.search-input__icon {
    color: var(--kz-color-text-faint);
    flex-shrink: 0;
}

.search-input__field {
    flex: 1;
    border: none;
    outline: none;
    background: none;
    font-family: var(--kz-font-family);
    font-size: var(--kz-font-size-sm);
    color: var(--kz-color-text);
}

.search-input:focus-within {
    border-color: var(--kz-input-border-focus);
}


/* ═══════════════════════════════════════════════════════════════
   FORM INPUT  — generic text/email inputs
   ═══════════════════════════════════════════════════════════════ */

.form-input {
    display: block;
    width: 100%;
    padding: var(--kz-input-padding);
    border: var(--kz-border-width) solid var(--kz-input-border);
    border-radius: var(--kz-input-radius);
    font-family: var(--kz-font-family);
    font-size: var(--kz-font-size-sm);
    color: var(--kz-color-text);
    background: var(--kz-input-bg);
    transition: border-color var(--kz-transition-fast);
}

.form-input:focus {
    outline: none;
    border-color: var(--kz-input-border-focus);
}

.form-input::placeholder {
    color: var(--kz-color-text-faint);
}


/* ═══════════════════════════════════════════════════════════════
   DIMENSION CARD  — ranked dimension with icon, score, text
   ═══════════════════════════════════════════════════════════════

   All dimensions get bordered cards; top-2 get an accent left border.
     .dimension-card--accent   top-ranked (1–2), bold left border
*/

.dimension-card {
    /* Plain surface card — hairline border, radius-lg, space-5 padding.
       Top-2 variant applies a 3px left stripe via --accent. */
    display: flex;
    flex-direction: column;
    gap: var(--kz-space-3);
    padding: var(--kz-space-5);
    background: var(--kz-color-surface);
    border: var(--kz-border);
    border-radius: var(--kz-radius-lg);
}

.dimension-card__rank-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--kz-space-1);
    flex-shrink: 0;
}

.dimension-card__content {
    flex: 1;
    min-width: 0;
}

.dimension-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--kz-space-2);
}

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

.dimension-card__name {
    font-weight: var(--kz-font-weight-bold);
    flex-shrink: 0;
    min-width: 12em;
    text-transform: capitalize;
}

.dimension-card__bar {
    flex: 1;
    min-width: 0;
}

.dimension-card__description {
    font-size: var(--kz-font-size-sm);
    color: var(--kz-color-text-muted);
    line-height: var(--kz-line-height);
}

.dimension-card__expand {
    font-size: var(--kz-font-size-sm);
    color: var(--kz-color-link);
    cursor: pointer;
    border: none;
    background: none;
    padding: var(--kz-space-1) 0;
}

/* Accent variant for top-2 dimensions — 3px series-a stripe on the
   left. Pad-left compensates for the stripe so internal content lines
   up with non-accent cards. */
.dimension-card--accent {
    border-left: 3px solid var(--kz-color-series-a);
    padding-left: calc(var(--kz-space-5) - 2px);
}

.dimension-card--match     { border-left: 4px solid var(--kz-color-match); }
.dimension-card--tension   { border-left: 4px solid var(--kz-color-tension); }
.dimension-card--mismatch  { border-left: 4px solid var(--kz-color-mismatch); }
.dimension-card--boomerang { border-left: 4px solid var(--kz-color-boomerang); }

/* 2-column responsive grid for dimension cards (profile page).
   The default grid auto-fits to viewport; the --2 modifier pins it to
   two columns explicitly so callers can opt in to the handoff
   "dim-grid-2" layout. */
.dimension-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--kz-space-4);
}

.dimension-cards-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--kz-space-5);
}

@media (max-width: 768px) {
    .dimension-cards-grid,
    .dimension-cards-grid--2 {
        grid-template-columns: 1fr;
    }
}

/* Dimension list (app gap report style — simpler rows) */
.dimension-list {
    border: var(--kz-border);
    border-radius: var(--kz-radius-md);
    overflow: hidden;
}

.dimension-list__item {
    display: flex;
    align-items: center;
    gap: var(--kz-space-3);
    padding: var(--kz-space-3) var(--kz-space-4);
    border-bottom: var(--kz-border-width) solid var(--kz-table-border);
}

.dimension-list__item:last-child {
    border-bottom: none;
}

.dimension-list__name {
    flex: 1;
    font-weight: var(--kz-font-weight-bold);
    font-size: var(--kz-font-size-sm);
}

.dimension-list__expand {
    font-size: var(--kz-font-size-sm);
    color: var(--kz-color-link);
    cursor: pointer;
    border: none;
    background: none;
}


/* ═══════════════════════════════════════════════════════════════
   RANK BADGE  — circled rank number
   ═══════════════════════════════════════════════════════════════ */

.rank-badge {
    /* 22px circle (token-driven) with subtle hairline border.  The
       top-2 ranks get the filled variant below. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--kz-rank-size);
    height: var(--kz-rank-size);
    border-radius: 50%;
    background: var(--kz-rank-bg);
    color: var(--kz-color-text-muted);
    border: 1px solid var(--kz-color-border-heavy);
    font-family: var(--kz-font-family);
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    line-height: 1;
}

.rank-badge--top {
    /* Filled variant for top-2 — series-a bg, inverted text. */
    background: var(--kz-color-series-a);
    color: var(--kz-color-action-text);
    border-color: var(--kz-color-series-a);
}


/* ═══════════════════════════════════════════════════════════════
   ICON CIRCLE  — dimension icon container
   ═══════════════════════════════════════════════════════════════ */

.icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: var(--kz-border-width-heavy) solid var(--kz-color-border-heavy);
    flex-shrink: 0;
}

.icon-circle img,
.icon-circle svg {
    width: 20px;
    height: 20px;
}


/* ═══════════════════════════════════════════════════════════════
   SECTION HEADER  — "● Work Values" / "● Team Roles"
   ═══════════════════════════════════════════════════════════════ */

.section-header {
    display: flex;
    align-items: center;
    gap: var(--kz-space-2);
    font-size: var(--kz-font-size-lg);
    font-weight: var(--kz-font-weight-bold);
    margin-top: var(--kz-space-6);
    margin-bottom: var(--kz-space-4);
}

.section-header__dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.section-header__dot--wv { background: var(--kz-color-wv); }
.section-header__dot--tr { background: var(--kz-color-tr); }

/* Rule variant — uppercase eyebrow label with a hairline rule extending
   to the content edge (Claude Design Full Breakdown / report pattern). */
.section-header--rule {
    display: flex;
    align-items: center;
    gap: var(--kz-space-3);
    margin-top: var(--kz-space-7);
    margin-bottom: var(--kz-space-4);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kz-color-text-muted);
}

.section-header--rule::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--kz-color-border);
}


/* ═══════════════════════════════════════════════════════════════
   PROFILE HEADER  — name, email, type label
   ═══════════════════════════════════════════════════════════════ */

.profile-header {
    text-align: center;
    margin-bottom: var(--kz-space-6);
}

.profile-header__type {
    font-size: var(--kz-font-size-xs);
    text-transform: uppercase;
    letter-spacing: var(--kz-letter-spacing-wide);
    color: var(--kz-color-text-muted);
    margin-bottom: var(--kz-space-2);
}

.profile-header__name {
    font-size: var(--kz-font-size-2xl);
    font-weight: var(--kz-font-weight-bold);
    margin-bottom: var(--kz-space-1);
}

.profile-header__email {
    font-size: var(--kz-font-size-sm);
    color: var(--kz-color-text-muted);
}


/* ═══════════════════════════════════════════════════════════════
   MINI RADAR  — thumbnail in table rows
   ═══════════════════════════════════════════════════════════════ */

.mini-radar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: var(--kz-border-width-heavy) solid var(--kz-color-border);
    flex-shrink: 0;
}

.mini-radar svg {
    width: 24px;
    height: 24px;
}


/* ═══════════════════════════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════════════════════════ */

.text-muted  { color: var(--kz-color-text-muted); }
.text-faint  { color: var(--kz-color-text-faint); }
.text-sm     { font-size: var(--kz-font-size-sm); }
.text-lg     { font-size: var(--kz-font-size-lg); }
.text-xl     { font-size: var(--kz-font-size-xl); }
.text-bold   { font-weight: var(--kz-font-weight-bold); }
.text-left   { text-align: left; }
.text-right  { text-align: right; }
.text-center { text-align: center; }
.text-xs     { font-size: var(--kz-font-size-xs); }
.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.flex-wrap   { flex-wrap: wrap; }
.items-start    { align-items: flex-start; }
.items-center   { align-items: center; }
.items-baseline { align-items: baseline; }
.justify-between { justify-content: space-between; }
.gap-1       { gap: var(--kz-space-1); }
.gap-2       { gap: var(--kz-space-2); }
.gap-3       { gap: var(--kz-space-3); }
.w-full      { width: 100%; }
.list-reset  { list-style: none; padding: 0; }
/* Reset the user-agent <fieldset> chrome (border, padding, margin) so a
 * <fieldset>/<legend> pair can group form controls semantically without
 * carrying the browser's default visual frame.  Defined here (before the
 * .m* utilities) so a downstream .mb-3 / .mt-4 modifier wins the cascade
 * over the margin: 0 shorthand. */
.fieldset-reset { border: 0; padding: 0; margin: 0; }
.m-0         { margin: 0; }
.mb-0        { margin-bottom: 0; }
.p-4         { padding: var(--kz-space-4); }
.p-6         { padding: var(--kz-space-6); }
.invisible   { visibility: hidden; }
.is-disabled { opacity: 0.4; }
.mt-0        { margin-top: 0; }
.mt-3        { margin-top: var(--kz-space-3); }
.mt-4        { margin-top: var(--kz-space-4); }
.mt-6        { margin-top: var(--kz-space-6); }
.mt-7        { margin-top: var(--kz-space-7); }
.mb-1        { margin-bottom: var(--kz-space-1); }
.mb-2        { margin-bottom: var(--kz-space-2); }
.mb-3        { margin-bottom: var(--kz-space-3); }
.mb-4        { margin-bottom: var(--kz-space-4); }
.ml-6        { margin-left: var(--kz-space-6); }
.d-inline    { display: inline; }
.d-block     { display: block; }
.stack > * + * { margin-top: var(--kz-space-3); }
.flex-1      { flex: 1; }
.p-0         { padding: 0; }
.cursor-pointer    { cursor: pointer; }
.text-capitalize     { text-transform: capitalize; }
.text-transform-none { text-transform: none; }
.text-mismatch       { color: var(--kz-color-mismatch); }
.border-match        { border-color: var(--kz-color-match); }
.border-mismatch     { border-color: var(--kz-color-mismatch); }



/* ═══════════════════════════════════════════════════════════════
   SECTION-BASED NAV SIDEBAR
   ═══════════════════════════════════════════════════════════════ */

.nav-sections {
    display: flex;
    flex-direction: column;
    gap: var(--kz-nav-section-gap);
}

.nav-section {
    /* Flat section — eyebrow label + items, no card wrapper.
       Per Claude Design renders the sidebar groups have no borders;
       state cues live on individual scan items, not the section. */
    padding: var(--kz-space-2) 0;
}

.nav-section__header {
    margin-bottom: var(--kz-space-1);
}

.nav-section__title {
    /* Eyebrow treatment — uppercase, tracked, muted.  Per handoff §6.11
       "Sidebar navigation" spec. */
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kz-color-text-muted);
    margin: 0;
    line-height: var(--kz-line-height-tight);
}

.nav-section__subtitle {
    font-size: var(--kz-font-size-xs);
    color: var(--kz-color-text-muted);
    margin: var(--kz-space-1) 0 0;
    line-height: var(--kz-line-height-tight);
}

/* ── Locked state ─────────────────────────────────────────────── */
.nav-section--locked {
    opacity: 0.6;
}

.nav-section--locked .nav-section__title,
.nav-section--locked .nav-section__subtitle {
    color: var(--kz-color-locked-text);
}

.nav-section__lock {
    font-size: var(--kz-font-size-xs);
    color: var(--kz-color-locked-text);
}

/* ── Coming soon state ────────────────────────────────────────── */
.nav-section--coming_soon {
    opacity: 0.5;
}

.nav-section--coming_soon .nav-section__title,
.nav-section--coming_soon .nav-section__subtitle {
    color: var(--kz-color-locked-text);
}

/* ── Unlocked (no scan yet) ───────────────────────────────────── */
.nav-section--unlocked {
    /* No border — section content (subtitle, prompt) carries the
       "not yet" affordance. */
}

.nav-section__prompt {
    font-size: var(--kz-font-size-xs);
    color: var(--kz-color-text-muted);
    margin: 0 0 var(--kz-space-1);
    padding: 0 8px;
    line-height: var(--kz-line-height-tight);
}

.nav-section__compact-link {
    display: block;
    font-size: var(--kz-font-size-sm);
    padding: var(--kz-space-1) 0;
}

/* Secondary sidebar text — section subtitles ("Define the role..."),
 * quota lines ("3 / 5 slots used"), slots-full upgrade notes.  All
 * share the sidebar's 8 px horizontal gutter and a small font-size
 * (11.5–12 px) matching the surrounding handoff micro-typography
 * (.nav-section .heading is 10.5 px, .nav-sub is 10 px, .nav-item is
 * 13 px). */
.nav-section__subtitle {
    padding: 0 8px 4px;
    font-size: 11.5px;
}
.nav-section__hint {
    padding: 0 8px;
    font-size: 11.5px;
}
.nav-section__note {
    padding: 0 8px;
    font-size: var(--kz-font-size-xs);
}

/* Inline call-to-action sitting below a section's items (e.g.
 * "Create role →" button or "3 pending" tag).  Indents to the
 * sidebar gutter and stops at the chip's natural width. */
.nav-section__inline-action {
    margin: 6px 8px 0;
    align-self: flex-start;
}

/* Variant without the 6 px top margin — used in role sub-sections
 * where the badge sits next to a sibling without an empty line above. */
.nav-section__inline-badge {
    margin: 0 8px;
    align-self: flex-start;
}

.nav-dot {
    font-size: 0.6em;
    margin-right: var(--kz-space-1);
}

.nav-dot--active {
    color: var(--kz-color-match);
}

.nav-dot--unlocked {
    color: var(--kz-color-tension);
}

/* ── Has scans state ──────────────────────────────────────────── */
.nav-section--has_scans {
    /* No border — active scan items inside carry the visual cue. */
}

/* ── Scan list ────────────────────────────────────────────────── */
.scan-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.scan-list__item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--kz-space-2);
    padding: 4px 6px;
    border-radius: var(--kz-radius-sm);
    font-size: var(--kz-font-size-xs);
    line-height: var(--kz-line-height-tight);
    transition: background var(--kz-transition-fast);
}

.scan-list__item:hover {
    background: var(--kz-color-ghost-hover);
}

.scan-list__dot {
    flex-shrink: 0;
    width: 1em;
    text-align: center;
    color: var(--kz-color-text-muted);
}

.scan-list__item--active {
    /* Active row — soft bg + inset series-a stripe.  Matches the
       handoff .nav-item.active treatment. */
    background: var(--kz-color-bg-subtle);
    box-shadow: inset 3px 0 0 var(--kz-color-series-a);
}

.scan-list__item--active:hover {
    background: var(--kz-color-bg-subtle);
}

.scan-list__item--active .scan-list__dot {
    color: var(--kz-color-text);
    font-weight: var(--kz-font-weight-bold);
}

.scan-list__item--active a {
    font-weight: var(--kz-font-weight-bold);
    color: var(--kz-color-text);
}

.scan-list__item a {
    color: var(--kz-color-link);
    text-decoration: none;
}

.scan-list__item a:hover {
    text-decoration: underline;
}

.scan-list__overflow {
    padding: 2px 0;
}

.scan-list__view-all {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--kz-font-family);
    font-size: var(--kz-font-size-xs);
    color: var(--kz-color-text-muted);
    cursor: pointer;
    text-decoration: underline;
}

.scan-list__view-all:hover {
    color: var(--kz-color-text);
}

/* Scrollable "View all" panel */
.scan-list__panel {
    max-height: var(--kz-scan-list-max-height);
    overflow-y: auto;
    border: var(--kz-border-width) solid var(--kz-color-border);
    border-radius: var(--kz-radius-sm);
    padding: var(--kz-space-1) var(--kz-space-2);
    margin: var(--kz-space-1) 0;
    background: var(--kz-color-surface-alt);
}

.scan-list__new {
    display: block;
    font-size: var(--kz-font-size-xs);
    color: var(--kz-color-text-muted);
    text-decoration: none;
    padding: 2px 0;
}

.scan-list__new:hover {
    color: var(--kz-color-text);
    text-decoration: underline;
}

.scan-list--nested {
    margin-left: 1.5em;
    padding-left: 0;
}

/* ── Sub-items (reports, conversation prep) ───────────────────── */
.nav-sub {
    padding: 2px 0;
    border-top: var(--kz-border-width) solid var(--kz-color-border);
}

.nav-sub:first-of-type {
    margin-top: var(--kz-space-1);
}

.nav-sub a {
    display: flex;
    align-items: center;
    gap: var(--kz-space-1);
    text-decoration: none;
    color: var(--kz-color-text);
}

.nav-sub a:hover .nav-sub__label {
    text-decoration: underline;
}

.nav-sub__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.nav-sub__label {
    font-size: var(--kz-font-size-xs);
    font-weight: var(--kz-font-weight-bold);
}

.nav-sub__subtitle {
    font-size: var(--kz-font-size-xs);
    color: var(--kz-color-text-muted);
    line-height: var(--kz-line-height-tight);
}

.nav-sub__arrow {
    margin-left: auto;
    flex-shrink: 0;
    font-size: var(--kz-font-size-xs);
    color: var(--kz-color-text-muted);
}

/* ── Disabled sub-item ────────────────────────────────────────── */
.nav-sub--disabled {
    opacity: 0.5;
}

.nav-sub--disabled .nav-sub__label,
.nav-sub--disabled .nav-sub__subtitle {
    color: var(--kz-color-disabled-text);
}


/* ═══════════════════════════════════════════════════════════════
   CONTENT LAYOUT  — reusable patterns for page content areas
   ═══════════════════════════════════════════════════════════════ */

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

.content-header__actions {
    display: flex;
    gap: var(--kz-space-3);
    flex-wrap: wrap;
}

/* Profile metadata (by / role / date) */
.profile-meta {
    display: flex;
    gap: var(--kz-space-4);
    margin: var(--kz-space-1) 0 0;
}

.profile-meta__item {
    display: flex;
    gap: var(--kz-space-1);
}

.profile-meta__item dt::after {
    content: ":";
}

.profile-meta dd {
    margin: 0;
}

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

.severity-counts {
    display: flex;
    gap: var(--kz-space-4);
    flex-wrap: wrap;
}

.severity-counts__item {
    display: flex;
    gap: var(--kz-space-2);
    align-items: center;
}

.talking-point {
    display: flex;
    gap: var(--kz-space-2);
    align-items: center;
}

.quick-links {
    display: flex;
    gap: var(--kz-space-3);
    flex-wrap: wrap;
}

.action-footer {
    display: flex;
    justify-content: flex-end;
}

/* ═══════════════════════════════════════════════════════════════
   WHAT'S NEXT — dynamic guidance on dashboard
   ═══════════════════════════════════════════════════════════════ */

.whats-next__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kz-space-3);
    padding: var(--kz-space-3);
    border: var(--kz-border);
    border-radius: var(--kz-radius-md);
}

.whats-next__item--gentle {
    border-style: dashed;
    opacity: 0.7;
}

.whats-next__text {
    flex: 1;
}

@media (max-width: 720px) {
    .whats-next__item {
        flex-direction: column;
        align-items: flex-start;
    }
}

.form-row {
    display: flex;
    gap: var(--kz-space-3);
    align-items: center;
    flex-wrap: wrap;
}


/* ═══════════════════════════════════════════════════════════════
   CARD VARIANTS
   ═══════════════════════════════════════════════════════════════ */

.card--row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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

.card--error  { border-color: var(--kz-color-mismatch); }
.card--success { border-color: var(--kz-color-match); }
.card--info   { border-color: var(--kz-color-action); }


/* Series swatch modifiers — used on `.dot` (chip / version-pill) and `.sw`
 * (chart legend) elements that already get size + shape from contextual
 * rules elsewhere; this only paints the fill colour. */
.dot--series-a { background: var(--kz-color-series-a); }
.dot--series-b { background: var(--kz-color-series-b); }
.dot--series-c { background: var(--kz-color-series-c); }
.dot--ipip     { background: var(--kz-color-text); }

.sw--series-a  { background: var(--kz-color-series-a); }
.sw--series-b  { background: var(--kz-color-series-b); }
.sw--series-c  { background: var(--kz-color-series-c); }

/* Severity-verdict modifiers — used on `.swatch` chips inside report
 * legends; identical pattern to `.dot--series-X`, only the fill changes. */
.swatch--match     { background: var(--kz-color-match); }
.swatch--tension   { background: var(--kz-color-tension); }
.swatch--mismatch  { background: var(--kz-color-mismatch); }
.swatch--boomerang { background: var(--kz-color-boomerang); }


/* Inline-text-style button — reset the user-agent <button> chrome down
 * to a plain underlined link.  Used inside data tables and de-emphasised
 * action rows where a real <a> would be wrong (it's a POST). */
.btn-link {
    background: none;
    border: 0;
    cursor: pointer;
    text-decoration: underline;
}


/* Reveal-toggle styling for <summary> elements that act as inline
 * "show more" affordances inside <details> blocks. */
.summary-link {
    cursor: pointer;
    color: var(--kz-color-link);
}


/* ═══════════════════════════════════════════════════════════════
   BANNER — dismissible notification bar
   ═══════════════════════════════════════════════════════════════ */

.banner {
    display: flex;
    align-items: center;
    gap: var(--kz-space-3);
    padding: var(--kz-space-3) var(--kz-space-4);
    border: var(--kz-border-width) solid var(--kz-color-border);
    background: var(--kz-color-bg-muted);
    font-family: var(--kz-font-family);
    font-size: var(--kz-font-size-sm);
}

.banner--info {
    border-color: var(--kz-color-info-border);
    background: var(--kz-color-info-bg);
}

.banner__body {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--kz-space-4);
    flex-wrap: wrap;
}

.banner__text {
    flex: 1;
    min-width: 200px;
}

.banner__dismiss {
    flex-shrink: 0;
    background: none;
    border: none;
    font-size: var(--kz-font-size-lg);
    line-height: 1;
    cursor: pointer;
    color: var(--kz-color-text-muted);
    padding: var(--kz-space-1);
}

.banner__dismiss:hover {
    color: var(--kz-color-text);
}


/* ═══════════════════════════════════════════════════════════════
   CHART + SCORES ROW  — radar chart beside score bars
   ═══════════════════════════════════════════════════════════════ */

.chart-scores-row {
    display: flex;
    gap: var(--kz-space-5);
    align-items: flex-start;
    flex-wrap: wrap;
}

.chart-scores-row__chart {
    flex: 0 0 auto;
}

/* Chart card — bordered surface around the radar so the SVG has a
   visible container and doesn't float in the surrounding whitespace.
   Used wherever .chart-scores-row__chart wraps a radar SVG. */
.chart-card {
    background: var(--kz-color-surface);
    border: 1px solid var(--kz-color-border);
    border-radius: var(--kz-radius-lg);
    padding: var(--kz-space-5);
}

.chart-scores-row__bars {
    flex: 1;
    min-width: 200px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--kz-space-2) var(--kz-space-3);
    align-items: center;
}

/* Inside the chart-scores grid, score-bar children become grid items
   so all tracks share one column and all labels share another.       */
.chart-scores-row__bars > .score-bar {
    display: contents;
}


/* ═══════════════════════════════════════════════════════════════
   LAYOUT MODIFIERS
   ═══════════════════════════════════════════════════════════════ */

.view-toggle--full-width {
    grid-column: 1 / -1;
}

.input--flex {
    flex: 1;
    min-width: 0;
}

.form-input--full {
    flex: 1;
    min-width: 180px;
}

/* Sized variants — admin/team toolbar inputs used to pin widths inline.
 * Four widths cover the cases we have today: short-code selectors (xs),
 * short keyword selectors (sm), standard search boxes (md), and the
 * wider user-email search (lg). */
.form-input--xs { width:  80px; }
.form-input--sm { width: 140px; }
.form-input--md { width: 250px; }
.form-input--lg { width: 300px; }

/* ── IPIP results — domain + facet percentile bars ────────── */

.ipip-domain {
    border: 1px solid var(--kz-color-border);
    border-radius: var(--kz-radius-md);
    padding: var(--kz-space-4);
}

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

.ipip-domain__name {
    font-size: var(--kz-font-size-lg);
    font-weight: var(--kz-font-weight-bold);
}

.ipip-bar__track {
    position: relative;
    height: 8px;
    background: var(--kz-color-bg-muted, #e5e5e5);
    border-radius: 999px;
    overflow: visible;
}

.ipip-bar--domain .ipip-bar__track {
    height: 12px;
}

/* SVG fill clipped to a pill (rounds the left end); a round-capped
 * zero-length <line class="ipip-bar__ball"> paints the darker tip. The
 * marker line is a sibling div over the track, so it stays unclipped.
 * Teal to match the scan palette (was flat black). #21484 */
.ipip-bar__svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    overflow: hidden;
}

.ipip-bar__fill {
    fill: var(--kz-color-series-a);
    transition: width 0.3s ease;
}

.ipip-bar__ball {
    stroke: var(--kz-color-series-a-deep);
    stroke-width: 8;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.ipip-bar--domain .ipip-bar__ball {
    stroke-width: 12;
}

.ipip-bar__marker {
    position: absolute;
    top: -2px;
    left: 50%;
    width: 1px;
    height: calc(100% + 4px);
    background: var(--kz-color-border);
    transform: translateX(-50%);
}

.ipip-facets {
    margin-top: var(--kz-space-3);
}

.ipip-facets__toggle {
    cursor: pointer;
    color: var(--kz-color-text-muted);
    list-style: none;
}

.ipip-facets__toggle::-webkit-details-marker {
    display: none;
}

.ipip-facets__toggle::before {
    content: "▸ ";
}

details[open] > .ipip-facets__toggle::before {
    content: "▾ ";
}

.ipip-facets__list {
    display: flex;
    flex-direction: column;
    gap: var(--kz-space-3);
    margin-top: var(--kz-space-3);
    padding-left: var(--kz-space-3);
}

.ipip-facet__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--kz-space-1);
}

.ipip-facet__name {
    font-weight: var(--kz-font-weight-medium);
}

/* ── Insight cards (Big 5 vs Ideal Work) ────────────────────── */

.insight-empty {
    border: 1px dashed var(--kz-color-step-todo-border);
    padding: var(--kz-space-4);
}

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

.insight-empty__item {
    display: flex;
    align-items: center;
    gap: var(--kz-space-2);
}

.insight-empty__dot {
    font-size: var(--kz-font-size-sm);
    color: var(--kz-color-step-todo-border);
}

.insight-empty__item--done .insight-empty__dot {
    color: var(--kz-color-step-done-border);
}

.insight-section__title {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.insight-card {
    border: 1px solid var(--kz-color-step-done-border);
    padding: var(--kz-space-4);
}

.insight-card__header {
    display: flex;
    align-items: baseline;
    gap: var(--kz-space-2);
}

.insight-card__rank {
    min-width: 2em;
}

.insight-card__dimension {
    flex: 1;
}

.insight-card__headline {
    line-height: 1.3;
}

.insight-card__text {
    line-height: 1.5;
    color: var(--kz-color-text);
}

.insight-card__sub {
    line-height: 1.5;
    color: var(--kz-color-text-muted);
}

.insight-card__signals {
    display: flex;
    gap: var(--kz-space-2);
    flex-wrap: wrap;
}

.insight-signal {
    display: inline-block;
    padding: var(--kz-space-1) var(--kz-space-2);
    border: 1px solid var(--kz-color-step-done-border);
    color: var(--kz-color-text-muted);
}

.insight-signal--surprise {
    border-color: var(--kz-color-tr);
    color: var(--kz-color-tr);
}

.insight-signal--deviation {
    border-style: dashed;
}

.insight-facets {
    border-top: 1px solid var(--kz-color-step-todo-border);
    padding-top: var(--kz-space-2);
}

.insight-facets__toggle {
    cursor: pointer;
    color: var(--kz-color-text-muted);
}

.insight-facets__list {
    display: flex;
    flex-direction: column;
    gap: var(--kz-space-3);
    padding-left: var(--kz-space-3);
}

.insight-facet__header {
    display: flex;
    align-items: baseline;
    gap: var(--kz-space-2);
    margin-bottom: var(--kz-space-1);
}

.insight-facet__type {
    display: inline-block;
    padding: 0 var(--kz-space-1);
    border: 1px solid var(--kz-color-step-done-border);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-width: 7em;
    text-align: center;
}

.insight-facet__type--surprise {
    border-color: var(--kz-color-tr);
    color: var(--kz-color-tr);
}

.insight-facet__type--alignment {
    border-color: var(--kz-color-step-done-border);
    color: var(--kz-color-text);
}

.insight-facet__name {
    flex: 1;
    font-weight: var(--kz-font-weight-medium);
}


/* ═══════════════════════════════════════════════════════════════
   TYPOGRAPHY UTILITIES  — .t-*  (per design.md §5.3)
   These composite classes are the canonical text treatments used
   across the app.  Prefer a .t-* class over inline font shorthand.
   ═══════════════════════════════════════════════════════════════ */

.t-display {
    font-family: var(--kz-font-display);
    font-weight: 400;
    font-size: 34px;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.t-h2 {
    font-family: var(--kz-font-family);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: -0.005em;
}

.t-h3 {
    font-family: var(--kz-font-family);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.3;
    letter-spacing: -0.003em;
}

.t-body {
    font-family: var(--kz-font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.55;
    color: var(--kz-color-text);
}

.t-body-muted {
    font-family: var(--kz-font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.55;
    color: var(--kz-color-text-muted);
}

.t-eyebrow {
    font-family: var(--kz-font-family);
    font-weight: 600;
    font-size: 11px;
    line-height: 1.3;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kz-color-text-muted);
}

.t-quote {
    font-family: var(--kz-font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 17px;
    line-height: 1.5;
    letter-spacing: -0.005em;
    color: var(--kz-color-text);
}


/* ═══════════════════════════════════════════════════════════════
   PAGE HEAD  — title+meta on the left, actions on the right
   Used by dashboard + profile detail + (future) report pages.
   ═══════════════════════════════════════════════════════════════ */

.page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--kz-space-5);
    margin-bottom: var(--kz-space-6);
    flex-wrap: wrap;
}

.page-head__left {
    display: flex;
    flex-direction: column;
    gap: var(--kz-space-2);
    min-width: 0;
}

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

.page-title {
    /* Page title inherits .t-display treatment. */
    font-family: var(--kz-font-display);
    font-weight: 400;
    font-size: 34px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variation-settings: "WONK" 0, "SOFT" 30;
    margin: 0;
}


/* ═══════════════════════════════════════════════════════════════
   VERSION PILL  — compact version picker (non-select)
   ═══════════════════════════════════════════════════════════════ */

.version-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.version-label {
    font-family: var(--kz-font-family);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kz-color-text-muted);
}

.version-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-family: var(--kz-font-family);
    font-size: 13px;
    line-height: 1.2;
    color: var(--kz-color-text);
    background: var(--kz-color-surface);
    border: 1px solid var(--kz-color-border);
    border-radius: var(--kz-radius-pill);
    cursor: pointer;
    position: relative;
}

.version-pill__dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--kz-color-series-a);
    flex-shrink: 0;
}

.version-pill__caret {
    margin-left: 2px;
    color: var(--kz-color-text-faint);
    font-size: 12px;
    line-height: 1;
}

.version-pill__select {
    /* Native <select> overlayed invisibly so the onchange navigation
       keeps working without custom JS. Mouse / keyboard still target
       the pill visually. */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: 0;
    background: transparent;
    font: inherit;
}


/* ═══════════════════════════════════════════════════════════════
   INSIGHT (narrative quote)  — distinct from the Big-5 insight-card
   A soft-accent container for display-italic narrative
   quotes on the profile / dashboard pages.  See design.md §6.12.
   ═══════════════════════════════════════════════════════════════ */

.insight {
    padding: var(--kz-space-5);
    background: var(--kz-color-series-a-soft);
    border-left: 3px solid var(--kz-color-series-a);
    border-radius: var(--kz-radius-md);
}

.insight__eyebrow {
    font-family: var(--kz-font-family);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kz-color-text-muted);
    margin-bottom: var(--kz-space-3);
}

.insight__quote {
    font-family: var(--kz-font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 17px;
    line-height: 1.5;
    letter-spacing: -0.005em;
    color: var(--kz-color-text);
    margin: 0 0 var(--kz-space-3);
}

.insight__meta {
    font-family: var(--kz-font-family);
    font-weight: 400;
    font-size: 13px;
    line-height: 1.4;
    color: var(--kz-color-text-muted);
}


/* ═══════════════════════════════════════════════════════════════
   BACK TO TOP  — floating affordance on long pages (refs #21322)
   Fixed bottom-right, hidden until back-to-top.js adds .is-visible
   once the page has scrolled ~one viewport. Tokens only.
   ═══════════════════════════════════════════════════════════════ */

.back-to-top {
    position: fixed;
    right: var(--kz-space-5);
    bottom: var(--kz-space-5);
    z-index: var(--kz-z-sticky);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px keeps the tap target at the WCAG 2.5.5 minimum. */
    width: 44px;
    height: 44px;
    padding: 0;

    color: var(--kz-color-text);
    background: var(--kz-color-bg);
    border: var(--kz-border);
    border-radius: var(--kz-radius-pill);
    box-shadow: var(--kz-shadow-dropdown);
    cursor: pointer;

    /* Hidden until scrolled. visibility keeps it out of the tab order
       while hidden; back-to-top.js toggles .is-visible. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(var(--kz-space-2));
    transition:
        opacity var(--kz-transition-base),
        transform var(--kz-transition-base),
        visibility var(--kz-transition-base);
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--kz-color-bg-muted);
    border-color: var(--kz-color-border-heavy);
}

.back-to-top:focus-visible {
    outline: var(--kz-border-width-heavy) solid var(--kz-color-focus-ring);
    outline-offset: var(--kz-border-width-heavy);
}

.back-to-top__icon {
    width: 20px;
    height: 20px;
}