/* ══════════════════════════════════════════════════════════════
   Keyfax vNext — global CSS (loaded by Demo.razor via HeadContent)
   ══════════════════════════════════════════════════════════════ */

/* Reset body margin/overflow when the demo shell is active */
body:has(.kfx-shell) {
    margin: 0 !important;
    padding: 0 !important;
    background: var(--bg) !important;
    overflow: hidden;
}

/* ── Design tokens ──────────────────────────────────────────── */
:root {
    /* Colors — Light */
    --bg:             #F7F7F8;
    --surface:        #FFFFFF;
    --surface-2:      #F2F2F4;
    --surface-3:      #EBEBED;
    --border:         #E3E3E6;
    --border-strong:  #C9C9CE;
    --text:           #1E1D24;
    --text-2:         #5A5764;
    --text-3:         #807D8A;
    --text-4:         #A4A2AB;
    --primary:        #6B3FA0;
    --primary-strong: #553080;
    --primary-soft:   #F4EFFA;
    --primary-on:     #FFFFFF;
    --primary-ring:   #D6C5EC;
    --success:        #2E9763;
    --success-soft:   #E3F4E9;
    --warn:           #D89A2D;
    --warn-soft:      #FAEFDB;
    --danger:         #D44E2C;
    --danger-soft:    #FAE8E2;
    --info:           #3F8AD9;
    --info-soft:      #E3ECF7;

    /* Geometry */
    --r-sm:  6px;
    --r-md:  10px;
    --r-lg:  14px;
    --r-xl:  20px;

    /* Shadows */
    --shadow-1:   0 1px 0 rgb(0 0 0 / .03), 0 1px 2px rgb(0 0 0 / .04);
    --shadow-2:   0 1px 0 rgb(0 0 0 / .04), 0 8px 28px -10px rgb(0 0 0 / .12);
    --shadow-pop: 0 12px 40px -8px rgb(20 14 40 / .18);

    /* Density — regular */
    --pad-card:   16px;
    --pad-tile:   14px;
    --gap-grid:   10px;
    --row-h:      38px;
    --fs-body:    14px;
    --fs-display: 26px;
    --fs-small:   12.5px;
    --fs-xs:      11.5px;
    --tile-h:     116px;
    --icon-sz:    40px;
}

/* ── Dark mode — token overrides scoped to the shell (and the body behind it).
      Toggled by the topbar; the shell carries data-theme="dark". ───────────── */
body:has(.kfx-shell[data-theme="dark"]),
.kfx-shell[data-theme="dark"] {
    --bg:             #15141A;
    --surface:        #1E1D24;
    --surface-2:      #26242D;
    --surface-3:      #2E2C36;
    --border:         #34323D;
    --border-strong:  #4A4856;
    --text:           #F2F1F5;
    --text-2:         #B9B6C3;
    --text-3:         #8E8B9A;
    --text-4:         #6E6B7A;
    --primary:        #B89AEF;
    --primary-strong: #D1BAFF;
    --primary-soft:   #2E2640;
    --primary-on:     #1E1530;
    --primary-ring:   #4A3A6B;
    --success:        #5BBE8A;
    --success-soft:   #1E3329;
    --warn:           #E0B05E;
    --warn-soft:      #38301D;
    --danger:         #E57B5C;
    --danger-soft:    #3B231B;
    --info:           #7FAEE5;
    --info-soft:      #1F2B3B;

    --shadow-1:   0 1px 0 rgb(0 0 0 / .2), 0 1px 2px rgb(0 0 0 / .3);
    --shadow-2:   0 1px 0 rgb(0 0 0 / .25), 0 8px 28px -10px rgb(0 0 0 / .5);
    --shadow-pop: 0 12px 40px -8px rgb(0 0 0 / .6);
}

/* ── Global resets for the shell ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Recent Chromium UA stylesheets lay a plain <button> out as inline-flex (row, centred), which
   crushes card-style buttons with stacked div children (e.g. the create-customer HMS-mode cards)
   into a single squashed row. This file is on every page (App.razor), so this guard restores the
   classic block flow app-wide for un-classed buttons; anything wanting flex sets it explicitly.
   (hms.css carries the same guard for surfaces that link it standalone.) */
button:not([class]) { display: inline-block; }

.kfx-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: var(--bg);
    font-family: 'Geist', system-ui, sans-serif;
    font-size: var(--fs-body);
    color: var(--text);
    line-height: 1.5;
    overflow: hidden;
}

.kfx-mono {
    font-family: 'Geist Mono', monospace;
}

/* ── Topbar ──────────────────────────────────────────────────── */
.kfx-topbar {
    height: 48px;
    min-height: 48px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.kfx-topbar-left  { display: flex; align-items: center; gap: 10px; flex: 1; }
.kfx-topbar-right { display: flex; align-items: center; gap: 4px; }

.kfx-brand-mark {
    width: 28px; height: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--primary), var(--primary-strong));
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

.kfx-brand-name     { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.kfx-brand-next     { color: var(--primary); }
.kfx-topbar-divider { width: 1px; height: 18px; background: var(--border); }
.kfx-topbar-context { font-size: var(--fs-small); color: var(--text-2); }

.kfx-icon-btn {
    width: 32px; height: 32px;
    border-radius: var(--r-sm);
    border: none;
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    position: relative;
    transition: background 120ms;
}
.kfx-icon-btn:hover { background: var(--surface-2); }
.kfx-icon-btn .kfx-icon { width: 16px; height: 16px; }
.kfx-icon-btn:disabled { opacity: .4; cursor: default; }
.kfx-icon-btn:disabled:hover { background: transparent; }
.kfx-icon-btn.danger { color: #c4485a; }
.kfx-icon-btn.danger:hover { background: rgba(196, 72, 90, .12); }

.kfx-notif-btn { position: relative; }
.kfx-notif-dot {
    position: absolute; top: 6px; right: 6px;
    width: 6px; height: 6px;
    border-radius: 50%; background: #e53e3e;
    border: 1.5px solid var(--surface);
}

.kfx-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-soft), var(--primary-ring));
    color: var(--primary-strong);
    font-size: 11px;
    font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}

/* ── Tabs ────────────────────────────────────────────────────── */
.kfx-tabs {
    height: 44px;
    min-height: 44px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: stretch;
    padding: 0 16px;
    gap: 2px;
    position: sticky;
    top: 48px;
    z-index: 99;
}

.kfx-tab {
    height: 44px;
    padding: 0 14px;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--text-2);
    font-size: var(--fs-body);
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: color 120ms, border-color 120ms;
}
.kfx-tab:hover { color: var(--text); }
.kfx-tab.active { color: var(--primary); border-bottom-color: var(--primary); }

.kfx-tab-icon { width: 15px; height: 15px; }

.kfx-tab-badge {
    font-size: 11px; font-weight: 600;
    padding: 1px 6px; border-radius: 99px;
    background: var(--surface-3); color: var(--text-3);
}
.kfx-tab-badge.active { background: var(--primary-soft); color: var(--primary); }

.kfx-tabs-spacer { flex: 1; }
.kfx-about-link  { font-size: var(--fs-small); color: var(--text-3); align-self: center; cursor: pointer; }
.kfx-about-link:hover { color: var(--text-2); }

/* ── Below-tabs layout ───────────────────────────────────────── */
.kfx-below-tabs {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.kfx-workspace {
    flex: 1;
    overflow: hidden;
    display: grid;
    grid-template-columns: 160px 1fr 360px;
}
.kfx-workspace.no-panel {
    grid-template-columns: 160px 1fr;
}

.kfx-main {
    overflow-y: auto;
    padding: 20px 24px 40px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

/* ── Sidebar navigation ──────────────────────────────────────── */
.kfx-sidebar {
    background: var(--surface);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    padding: 12px 0;
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

.kfx-sidebar-section {
    padding-bottom: 20px;
}

.kfx-sidebar-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-4);
    padding: 6px 12px 4px;
}

.kfx-sidebar-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    /* Items mix <a> and <button>; without an explicit box-sizing the button's UA styles size the padding
       and the 2px active border OUTSIDE the 100% width, so rows sit at different widths/offsets. */
    box-sizing: border-box;
    height: 32px;
    padding: 0 12px;
    border: none;
    border-left: 2px solid transparent;
    background: transparent;
    color: var(--text-2);
    font-size: 13px;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    transition: background 120ms, color 120ms;
}
.kfx-sidebar-item:hover {
    background: var(--surface-2);
    color: var(--text);
}
.kfx-sidebar-item.active {
    border-left-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary);
}
.kfx-sidebar-item .kfx-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}
/* The label takes the slack so a trailing badge / external-link icon is pushed to the right rather than
   sitting against the text — otherwise rows with a trailing element read as indented differently from
   rows without one. */
.kfx-sidebar-item .kfx-sidebar-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kfx-sidebar-badge {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 99px;
    background: var(--surface-3);
    color: var(--text-3);
}
.kfx-sidebar-badge.active {
    background: var(--primary-soft);
    color: var(--primary);
}

.kfx-sidebar-ext {
    margin-left: auto;
    opacity: 0.35;
    display: flex;
    align-items: center;
}
.kfx-sidebar-ext .kfx-icon { width: 12px; height: 12px; }

/* ── Caller banner ───────────────────────────────────────────── */
.kfx-caller {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    height: 64px;
    min-height: 64px;
    padding: 0 24px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.kfx-caller-id     { display: flex; align-items: center; gap: 10px; }
.kfx-caller-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-soft), var(--primary-ring));
    color: var(--primary-strong);
    font-size: 13px; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.kfx-caller-name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.kfx-caller-meta { font-size: var(--fs-small); color: var(--text-3); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kfx-dot-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--text-4); flex-shrink: 0; }

.kfx-caller-flags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }

.kfx-flag {
    display: inline-flex; align-items: center; gap: 5px;
    height: 24px; padding: 0 9px; border-radius: 999px;
    font-size: var(--fs-xs); font-weight: 500;
    background: var(--surface-3); color: var(--text-2);
}
.kfx-flag.warn { background: var(--warn-soft); color: #8a5e00; }
.kfx-flag.info { background: var(--info-soft); color: #1e5fa0; }
.kfx-flag .kfx-icon { width: 12px; height: 12px; }

.kfx-call-timer {
    display: flex; align-items: center; gap: 6px;
    background: var(--surface-2); border: 1px solid var(--border);
    padding: 5px 12px; border-radius: 999px;
}
.kfx-timer-label { font-size: var(--fs-xs); color: var(--text-3); }

.kfx-pulse {
    width: 8px; height: 8px; border-radius: 50%; background: #22c55e;
    animation: kfx-pulse 2s infinite;
}
@keyframes kfx-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%       { transform: scale(1.5); opacity: 0.5; }
}

/* ── Right context panel ─────────────────────────────────────── */
.kfx-context-panel {
    width: 360px;
    background: var(--surface);
    border-left: 1px solid var(--border);
    overflow-y: auto;
    padding: var(--pad-card);
    display: flex;
    flex-direction: column;
    gap: 20px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

.kfx-cp-group { display: flex; flex-direction: column; gap: 8px; }
.kfx-cp-h {
    font-size: var(--fs-xs); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-3);
    display: flex; align-items: center; gap: 6px;
}
.kfx-cp-lookup { font-size: 10px; color: var(--text-4); }
/* Qualifies the group heading above it (e.g. "Raised via Keyfax only…" under RECENT KEYFAX ORDERS). Sits
   OUTSIDE the card — it describes what the list IS, so it belongs with the title, not stuffed unpadded
   inside the panel it labels. */
.kfx-cp-subh {
    font-size: var(--fs-xs);
    color: var(--text-4);
    line-height: 1.35;
    margin: 2px 0 6px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

.kfx-cp-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
}

.kfx-cp-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 7px 12px;
    border-bottom: 1px solid var(--border);
    gap: 8px;
}
.kfx-cp-row:last-child { border-bottom: none; }
.kfx-cp-key { font-size: var(--fs-small); color: var(--text-3); white-space: nowrap; }
.kfx-cp-val { font-size: var(--fs-small); font-weight: 500; color: var(--text); text-align: right; }

/* AI suggestion card */
.kfx-ai-card {
    background: linear-gradient(135deg, var(--primary-soft), transparent);
    border: 1px solid var(--primary-ring);
    border-radius: var(--r-md);
    padding: 12px;
}
.kfx-ai-h {
    display: flex; align-items: center; gap: 6px;
    font-size: var(--fs-xs); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--primary);
    margin-bottom: 8px;
}
.kfx-ai-h .kfx-icon { width: 12px; height: 12px; }
.kfx-ai-body { font-size: var(--fs-small); color: var(--text-2); line-height: 1.5; }

/* Timeline */
.kfx-timeline { padding: 4px 0; }
.kfx-tl-item {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 8px;
    padding: 8px 12px;
    position: relative;
}
.kfx-tl-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 18px; top: 22px; bottom: -4px;
    width: 1px; background: var(--border);
}
.kfx-tl-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--border-strong);
    margin-top: 5px;
    flex-shrink: 0;
}
.kfx-tl-dot.current { background: var(--primary); }
.kfx-tl-when { font-size: 11px; color: var(--text-3); font-family: 'Geist Mono', monospace; }
.kfx-tl-what { font-size: var(--fs-small); color: var(--text); }
/* Property photo at the top of the Property card. */
.kfx-cp-image {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: var(--r-sm);
    margin-bottom: 6px;
    display: block;
    background: var(--surface-2);
}
/* Supporting facts under a timeline entry — SOR code / priority / quantity. Quieter than the SOR name so
   the eye lands on WHAT was done first, then the detail. */
.kfx-tl-detail {
    font-size: var(--fs-xs);
    color: var(--text-3);
    font-family: 'Geist Mono', monospace;
    margin-top: 1px;
}

/* ── Status bar ──────────────────────────────────────────────── */
.kfx-status-bar {
    height: 32px; min-height: 32px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    display: flex; align-items: center;
    padding: 0 16px; gap: 10px;
    font-size: var(--fs-xs); color: var(--text-3);
    font-family: 'Geist Mono', monospace;
}
.kfx-status-sep  { color: var(--text-4); }
.kfx-status-right { margin-left: auto; color: var(--text-4); }
.kfx-status-bar kbd {
    font-family: inherit; font-weight: 600; color: var(--text-3);
}

/* ── Shared utilities ────────────────────────────────────────── */
.kfx-crumb {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--text-3);
    margin-bottom: 14px;
}
.kfx-crumb .kfx-icon { width: 13px; height: 13px; }
.kfx-crumb b, .kfx-crumb strong { color: var(--text-2); }

.kfx-crumb-back {
    display: inline-flex; align-items: center; gap: 4px;
    background: none; border: none;
    font-size: 12px; color: var(--primary); cursor: pointer;
    font-family: inherit; padding: 0;
}
.kfx-crumb-back .kfx-icon { width: 13px; height: 13px; }

.kfx-screen-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; margin-bottom: 20px;
}
.kfx-screen-title {
    font-size: var(--fs-display); font-weight: 600;
    letter-spacing: -0.022em; line-height: 1.2;
    color: var(--text);
}
.kfx-screen-sub { font-size: var(--fs-small); color: var(--text-3); margin-top: 4px; }
.kfx-screen-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* ── Buttons ─────────────────────────────────────────────────── */
.kfx-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: var(--row-h);
    padding: 0 14px;
    border-radius: var(--r-sm);
    font-size: var(--fs-body); font-family: inherit; font-weight: 500;
    cursor: pointer; border: 1px solid var(--border);
    background: var(--surface); color: var(--text);
    transition: background 120ms, border-color 120ms;
    white-space: nowrap;
}
.kfx-btn:hover { background: var(--surface-2); }
.kfx-btn .kfx-icon { width: 14px; height: 14px; }

.kfx-btn.ghost { background: transparent; border-color: transparent; }
.kfx-btn.ghost:hover { background: var(--surface-2); border-color: var(--border); }

.kfx-btn.primary {
    background: var(--primary); border-color: var(--primary);
    color: var(--primary-on);
}
.kfx-btn.primary:hover { background: var(--primary-strong); border-color: var(--primary-strong); }

.kfx-btn.xs { height: 28px; padding: 0 10px; font-size: 12px; }

/* ── Selectors row ───────────────────────────────────────────── */
.kfx-selectors {
    display: flex; gap: 10px; align-items: flex-end;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 12px;
    box-shadow: var(--shadow-1);
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.kfx-field {
    display: flex; flex-direction: column; gap: 5px;
    min-width: 160px;
}
.kfx-field-search { flex: 1; min-width: 180px; }
.kfx-field-action { min-width: auto; }

.kfx-label { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); }

.kfx-select, .kfx-input {
    height: var(--row-h);
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    font-size: var(--fs-body); font-family: inherit;
    color: var(--text);
    outline: none;
    transition: border-color 120ms;
}
.kfx-select:focus, .kfx-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

.kfx-ask-btn { height: var(--row-h); }

/* ── Category groups ─────────────────────────────────────────── */
.kfx-group { margin-bottom: 20px; }
.kfx-group-h {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
}
.kfx-group-title { font-size: var(--fs-body); font-weight: 600; color: var(--text); }
.kfx-group-count { color: var(--text-4); font-weight: 500; margin-left: 6px; }
.kfx-group-meta  { font-size: var(--fs-xs); color: var(--text-4); }

/* ── Category grid ───────────────────────────────────────────── */
.kfx-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--gap-grid);
}

.kfx-cat-tile {
    position: relative;
    height: var(--tile-h);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    padding: var(--pad-tile);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    text-align: left;
    transition: transform 120ms, border-color 120ms, box-shadow 120ms;
    box-shadow: var(--shadow-1);
    font-family: inherit;
}
.kfx-cat-tile:hover {
    transform: translateY(-1px);
    border-color: var(--primary-ring);
    box-shadow: var(--shadow-2);
}
.kfx-cat-tile:hover .kfx-cat-icon { color: var(--primary); }

.kfx-cat-tile.featured {
    background: linear-gradient(180deg, var(--primary-soft), var(--surface));
    border-color: var(--primary-ring);
}

.kfx-ai-badge {
    position: absolute; top: 8px; right: 8px;
    display: inline-flex; align-items: center; gap: 3px;
    height: 18px; padding: 0 6px; border-radius: 999px;
    background: var(--primary); color: #fff;
    font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}
.kfx-ai-badge .kfx-icon { width: 9px; height: 9px; }

.kfx-cat-icon-wrap { color: var(--text-3); }
.kfx-cat-icon, .kfx-cat-icon-wrap svg { width: var(--icon-sz); height: var(--icon-sz); }

.kfx-cat-label { font-size: 12.5px; font-weight: 500; color: var(--text); display: block; }
.kfx-cat-sub   { font-size: 11px; color: var(--text-3); display: block; margin-top: 2px; }
.kfx-cat-tile.featured .kfx-cat-sub { color: var(--primary); }

/* Category images are authored against light backgrounds — lift them in dark mode so the
   line work stays legible against the dark tile surface. */
.kfx-shell[data-theme="dark"] .kfx-cat-img {
    filter: brightness(1.8) contrast(1.5);
}

/* The rule-engine output (WebRenderingStylesheets.cs) is channel-neutral and colours itself via
   --keyfax* custom properties, with the HOST page supplying the values (app.css sets the light
   ones — the answer options resolve to #001769, unreadable on the dark surface). That variable
   indirection is the designed theming seam: re-point the variables under the dark shell and the
   rendered output follows, exact colours rather than filters. Extend this block as further
   engine-rendered elements need dark treatments. */
.kfx-shell[data-theme="dark"] {
    --keyfaxListOptionsForegroundColor: var(--text);
}

/* ── Diagnostic screen ───────────────────────────────────────── */
.kfx-diag-header-left { display: flex; align-items: center; gap: 12px; }
.kfx-diag-icon-wrap {
    width: 48px; height: 48px;
    border-radius: var(--r-md);
    background: var(--primary-soft);
    color: var(--primary);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.kfx-diag-icon-wrap svg { width: 24px; height: 24px; }

.kfx-qa-stage {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 28px;
    box-shadow: var(--shadow-1);
    margin-bottom: 20px;
}

.kfx-step-eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.kfx-step-pill {
    display: inline-flex; align-items: center;
    height: 22px; padding: 0 10px; border-radius: 999px;
    background: var(--primary-soft); color: var(--primary);
    font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
}
.kfx-adaptive-label { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-4); }

.kfx-qa-question {
    font-size: 24px; font-weight: 600; letter-spacing: -0.022em;
    line-height: 1.2; max-width: 60ch; margin-bottom: 8px;
}
.kfx-qa-hint { font-size: var(--fs-small); color: var(--text-3); max-width: 64ch; margin-bottom: 14px; }

.kfx-inline-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.kfx-ichip {
    display: inline-flex; align-items: center; gap: 4px;
    height: 24px; padding: 0 9px; border-radius: 999px;
    font-size: var(--fs-xs); font-weight: 500;
    background: var(--info-soft); color: #1e5fa0;
}
.kfx-ichip.warn { background: var(--warn-soft); color: #7a4f00; }
.kfx-ichip .kfx-icon { width: 11px; height: 11px; }

.kfx-answers-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 20px;
}

.kfx-answer {
    position: relative;
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    cursor: pointer; text-align: left;
    transition: border-color 120ms, background 120ms;
    font-family: inherit;
}
.kfx-answer:hover { border-color: var(--primary-ring); background: var(--primary-soft); }
.kfx-answer.suggested { border-color: var(--primary); }

.kfx-ai-suggests {
    position: absolute; top: -9px; right: 10px;
    display: inline-flex; align-items: center;
    height: 17px; padding: 0 7px; border-radius: 999px;
    background: var(--primary); color: #fff;
    font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}

.kfx-answer-key {
    width: 22px; height: 22px; border-radius: 4px;
    background: var(--surface-2); border: 1px solid var(--border);
    color: var(--text-3); font-size: 12px; font-weight: 600;
    font-family: 'Geist Mono', monospace;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.kfx-answer:hover .kfx-answer-key,
.kfx-answer.suggested:hover .kfx-answer-key { background: var(--primary); border-color: var(--primary); color: #fff; }

.kfx-answer-title { font-size: var(--fs-body); font-weight: 500; color: var(--text); }
.kfx-answer-sub   { font-size: var(--fs-xs); color: var(--text-3); margin-top: 2px; }

.kfx-stage-footer {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding-top: 16px; border-top: 1px solid var(--border);
}
.kfx-stage-footer-right { display: flex; gap: 8px; }
.kfx-progress-wrap { display: flex; align-items: center; gap: 10px; }
.kfx-progress-bar {
    width: 140px; height: 4px;
    background: var(--surface-3); border-radius: 999px; overflow: hidden;
}
.kfx-progress-fill { height: 100%; background: var(--primary); border-radius: 999px; transition: width 300ms; }
.kfx-progress-pct  { font-size: var(--fs-xs); color: var(--text-3); }

/* ── Decision trail ──────────────────────────────────────────── */
.kfx-trail { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px; }
.kfx-trail-row {
    display: grid; grid-template-columns: 28px 1fr auto;
    align-items: center; gap: 10px; padding: 6px 0;
    border-bottom: 1px solid var(--border);
}
.kfx-trail-row:last-child { border-bottom: none; }
.kfx-trail-num {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--surface-2); color: var(--text-3);
    font-size: 11px; display: flex; align-items: center; justify-content: center;
}
.kfx-trail-q { font-size: var(--fs-small); color: var(--text-2); }
.kfx-trail-a {
    font-size: 11.5px; font-weight: 500; padding: 2px 8px;
    border-radius: 999px; background: var(--primary-soft); color: var(--primary);
    white-space: nowrap;
}

/* ── Notes modal ─────────────────────────────────────────────── */
.kfx-modal-back {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(20, 14, 40, .5);
    backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
}
.kfx-modal {
    width: 540px; max-width: 95vw;
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-pop);
    overflow: hidden;
}
.kfx-modal-h { padding: 20px 24px 16px; border-bottom: 1px solid var(--border); }
.kfx-modal-h h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.kfx-modal-h p  { font-size: var(--fs-small); color: var(--text-3); margin-top: 4px; }
.kfx-modal-body { padding: 16px 24px; display: flex; flex-direction: column; gap: 12px; }
.kfx-modal-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kfx-textarea {
    width: 100%; min-height: 110px; padding: 10px;
    border: 1px solid var(--border); border-radius: var(--r-sm);
    font-size: var(--fs-body); font-family: inherit; color: var(--text);
    background: var(--surface-2); resize: vertical; outline: none;
}
.kfx-textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.kfx-modal-foot {
    padding: 12px 24px; background: var(--surface-2);
    border-top: 1px solid var(--border);
    display: flex; justify-content: flex-end; gap: 8px;
}

/* ── Current call screen ─────────────────────────────────────── */
.kfx-call-grid {
    display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px;
    align-items: start;
}
.kfx-call-right { display: flex; flex-direction: column; gap: 12px; }
.kfx-call-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: var(--pad-card);
    box-shadow: var(--shadow-1);
}
.kfx-card-title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 12px; }

.kfx-dl {
    display: grid; grid-template-columns: 120px 1fr;
    gap: 8px 12px; font-size: var(--fs-small);
}
.kfx-dl dt { color: var(--text-3); }
.kfx-dl dd { color: var(--text); font-weight: 500; }

.kfx-callout {
    background: var(--surface-2); border-radius: var(--r-sm);
    padding: 10px 12px; font-size: var(--fs-small); line-height: 1.5; color: var(--text-2);
    border-left: 3px solid var(--border);
}
.kfx-callout.primary-border { border-left-color: var(--primary); }
.kfx-callout.info-border    { border-left-color: var(--info); }

.kfx-chip-row { display: flex; gap: 6px; }

.kfx-score-strip { display: flex; gap: 4px; }
.kfx-score-btn {
    flex: 1; height: 34px; border-radius: var(--r-sm);
    border: 1px solid var(--border); background: var(--surface-2);
    font-size: 12.5px; font-weight: 500; cursor: pointer; font-family: inherit;
    transition: background 120ms, border-color 120ms;
}
.kfx-score-btn:hover { background: var(--primary-soft); border-color: var(--primary-ring); }
.kfx-score-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ── Self-service screen ─────────────────────────────────────── */
.kfx-selfservice-wrap {
    display: flex; justify-content: center; padding: 40px 24px;
}
.kfx-selfservice-card {
    width: 720px; max-width: 100%;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-xl); padding: 36px;
    box-shadow: var(--shadow-2);
}
.kfx-ss-header { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
.kfx-ss-search-row { display: flex; gap: 8px; }
.kfx-ss-search-row .kfx-input { height: var(--row-h); }

/* ── About page ──────────────────────────────────────────────── */
.kfx-about { max-width: 860px; }
.kfx-about-p {
    font-size: var(--fs-small);
    color: var(--text-2);
    line-height: 1.6;
    margin: 0 0 12px;
}
.kfx-about-list {
    margin: 0 0 16px;
    padding-left: 20px;
    font-size: var(--fs-small);
    color: var(--text-2);
    line-height: 1.6;
}
.kfx-about-list li { margin-bottom: 6px; }
.kfx-about a { color: var(--primary); text-decoration: none; font-weight: 500; }
.kfx-about a:hover { text-decoration: underline; }
.kfx-about-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin-top: 18px; padding-top: 16px;
    border-top: 1px solid var(--border);
}
.kfx-about-copy { font-size: var(--fs-xs); color: var(--text-3); line-height: 1.5; }
.kfx-about-lic-h { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; }

/* ── Icons (general) ─────────────────────────────────────────── */
.kfx-icon { width: 16px; height: 16px; flex-shrink: 0; vertical-align: middle; }
.kfx-cat-icon svg { display: block; }

/* Demo-asset hint: shown across the diagnostics workspace when the start-up document carried no property,
   so the call's orders are filed against the DEMO_ASSET stand-in. Deliberately loud enough to be read but
   not an error — nothing is broken, it is just not the integration a customer will ultimately run. */
.kfx-demo-asset-hint {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 16px;
    background: #fdf6d8;
    border-bottom: 1px solid #e8d98a;
    color: #6b5a12;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}
[data-theme="dark"] .kfx-demo-asset-hint {
    background: #3a3316;
    border-bottom-color: #5c4f1f;
    color: #f0e2a4;
}

/* Export-XML panel: the finished session's result document, shown by the ADMIN TEST SURFACES only
   (KfxDiagnostic ShowExportXml). It is the one place a draft version's export can be inspected — the v1
   API and the public Q&A pages both run published versions — so the note above the document says which
   path built it: a template that silently fell back looks identical to no template at all. */
.kfx-export-xml { display: flex; flex-direction: column; min-height: 0; }

.kfx-export-note {
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-radius: 6px;
    margin-bottom: 10px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-2);
    background: var(--surface-2);
}
.kfx-export-note code { font-family: 'Geist Mono', monospace; font-size: 12px; }
.kfx-export-note.ok   { border-left-color: #3f8f5f; }
.kfx-export-note.warn { border-left-color: #d9a33a; }
.kfx-export-note.bad  { border-left-color: #c4485a; }

/* Verbatim: no wrapping and no re-indenting — the template path exists to match the legacy export
   byte for byte, so the panel must not prettify what an integration would actually receive. */
.kfx-export-pre {
    margin: 0;
    padding: 12px 14px;
    max-height: 52vh;
    overflow: auto;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: 'Geist Mono', monospace;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text);
    white-space: pre;
    tab-size: 4;
}