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

/* Rubik for HEADINGS ONLY, matching keyfax-admin.css. Montserrat, the guidelines' body face, is
   deliberately not adopted: see the longer note in keyfax-admin.css. Must stay the first rule in
   the file — @import is only honoured before other statements. */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap');

/* 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.
       The neutral ramp leans towards the brand navy rather than towards violet — the same
       "navy cast" the admin tool gets by moving its oklch neutrals to hue 265. Hexes here
       because this file predates that ramp; each step keeps its lightness, only the hue
       moves. Navy stays a CHROME colour: painting the working surfaces #001769 would be
       fatiguing across a shift and would fight the brand purple. */
    --bg:             #F6F7FA;
    --surface:        #FFFFFF;
    --surface-2:      #F1F3F7;
    --surface-3:      #E9ECF2;
    --border:         #E0E4EC;
    --border-strong:  #C4CAD6;
    --text:           #1B1D28;
    --text-2:         #565A6B;
    --text-3:         #7C8194;
    --text-4:         #A0A5B4;
    /* ── Omfax brand palette (Brand Guidelines v3.0, p25) ─────────────────────
       Mirrors the admin tool's tokens in keyfax-admin.css — same reasoning, and the two
       must not drift: an advisor moves between Staff Diagnostics and the admin tool in
       one shift and the two should not look like different products.
       OMFAX Vivid Purple carries no text (3.3:1 behind white ink); the interactive
       --primary below is the logo's own upper gradient stop, which clears AA at 5.5:1. */
    --brand-navy:     #001769;
    --brand-purple:   #9d45c2;
    --brand-red:      #d03b29;
    --brand-rule:     linear-gradient(90deg, var(--brand-purple), var(--brand-red));
    --brand-grad:     linear-gradient(160deg, var(--brand-purple), var(--brand-red));
    /* White alphas, so one set works over navy in both themes. */
    --on-navy:        #ffffff;
    --on-navy-2:      rgba(255, 255, 255, .78);
    --on-navy-3:      rgba(255, 255, 255, .58);
    --navy-fill:      rgba(255, 255, 255, .10);
    --navy-fill-2:    rgba(255, 255, 255, .17);
    --navy-line:      rgba(255, 255, 255, .20);
    --navy-accent:    #c98ae6;
    /* THE SIDE-MENU CHROME KNOB — same name and same contract as the admin tool's, declared here
       too because the two shells load different stylesheets. `navy` paints the sidebar as the
       guidelines' navy column; anything else (this default) leaves it on the ordinary theme
       surface, following light and dark mode. Keep in step with keyfax-admin.css. */
    --adm-nav-chrome: none;
    --font-head:      'Rubik', 'Geist', system-ui, sans-serif;

    --primary:        #8D52A0;
    --primary-strong: #6F3D80;
    --primary-soft:   #F6EFF9;
    --primary-on:     #FFFFFF;
    --primary-ring:   #DEC6E7;
    --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"] {
    /* Dark, with the same navy cast as the light ramp above. */
    --bg:             #131620;
    --surface:        #1B1E2A;
    --surface-2:      #232735;
    --surface-3:      #2A2F40;
    --border:         #313648;
    --border-strong:  #454B60;
    --text:           #F0F1F7;
    --text-2:         #B4B8C8;
    --text-3:         #888DA0;
    --text-4:         #6A6F82;
    /* Dark needs the purple to be the INK, so it is the brand hue lifted — see the matching
       note in keyfax-admin.css. */
    --primary:        #C98AE6;
    --primary-strong: #DDB3F2;
    --primary-soft:   #2E2440;
    --primary-on:     #1E1530;
    --primary-ring:   #4A3468;
    --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(--brand-navy);
    border-bottom: 0;
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 100;
}
/* The brand's section-divider hairline closing the navy band. Overlaid via ::after so the bar
   stays exactly 48px — the workspace below is sized against that. */
.kfx-topbar::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: var(--brand-rule);
}

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

/* The real logo replaces the "K" tile that used to stand in for it — Staff Diagnostics is the
   surface an advisor stares at all day and was the one place carrying no brand at all. Sized by
   height so the SVG's own aspect ratio decides the width. */
.kfx-logo-img { height: 26px; width: auto; display: block; flex-shrink: 0; }

.kfx-brand-name     { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--on-navy); }
.kfx-brand-edition  { color: var(--navy-accent); }
.kfx-topbar-divider { width: 1px; height: 18px; background: var(--navy-line); }
.kfx-topbar-context { font-size: var(--fs-small); color: var(--on-navy-3); }
.kfx-topbar-context strong { color: var(--on-navy-2); }

/* Re-inking the bar's controls. Scoped to .kfx-topbar because .kfx-icon-btn and .kfx-avatar are
   used throughout the workspace on light surfaces. Explicit rules rather than a token swap, for
   the same reason as the admin topbar: any popup opened from this bar must stay a light panel. */
.kfx-topbar .kfx-icon-btn                      { color: var(--on-navy-2); }
.kfx-topbar .kfx-icon-btn:hover                { background: var(--navy-fill); color: var(--on-navy); }
.kfx-topbar .kfx-icon-btn:disabled:hover       { background: transparent; }
.kfx-topbar .kfx-avatar                        { background: var(--navy-fill-2); color: var(--on-navy); }

.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); }

/* Display-language picker (staff diagnostics + Test Web): a flag in an icon-sized button, so it sits
   in line with the icons around it, and a menu of flags and names beneath — the same flagcdn images
   the text chat's picker uses. */
.kfx-lang { position: relative; }
.kfx-lang-btn { width: auto; padding: 0 6px; gap: 4px; }
.kfx-lang-flag { width: 20px; height: 15px; border-radius: 2px; object-fit: cover; display: block; }
.kfx-lang-caret { width: 12px; height: 12px; opacity: .7; }
.kfx-lang-menu {
    position: absolute; top: calc(100% + 6px); right: 0; min-width: 170px;
    background: var(--surface); border: 1px solid var(--line, #d9d9e3);
    border-radius: 8px; box-shadow: var(--shadow-pop); padding: 4px; z-index: 1;
}
.kfx-lang-item {
    display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 10px;
    background: transparent; border: none; border-radius: 6px; font-size: 13px;
    color: var(--text); text-align: left; cursor: pointer;
}
.kfx-lang-item:hover { background: var(--surface-2); }
.kfx-lang-item.on { font-weight: 600; }
.kfx-lang-item img { width: 20px; height: 15px; border-radius: 2px; object-fit: cover; }

.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 ──────────────────────────────────────── */
/* The BASE sidebar: the ordinary theme column, following light and dark mode like every other
   panel — exactly as on master — while the chrome knob is off (its default). */
.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;
}

/* The navy panel of the split canvas, matching the admin tool's nav — GATED behind the same
   --adm-nav-chrome: navy knob, via the same style query (a browser without style-query support
   keeps the base column above, which is also the default). Re-points its ink tokens rather than
   restyling each child: the sidebar is a flat list of navigation items with no positioned
   descendants, so nothing inside needs to escape the navy context. (The topbar cannot do this —
   it holds floating menus. See the note on .adm-topbar in keyfax-admin.css.) */
@container style(--adm-nav-chrome: navy) {
    .kfx-sidebar {
        background: var(--brand-navy);
        border-right: 0;
        scrollbar-color: var(--navy-line) transparent;

        --text:           var(--on-navy);
        --text-2:         var(--on-navy-2);
        --text-3:         var(--on-navy-3);
        --text-4:         rgba(255, 255, 255, .45);
        --surface:        var(--navy-fill-2);
        --surface-2:      var(--navy-fill);
        --surface-3:      var(--navy-fill-2);
        --border:         var(--navy-line);
        --border-strong:  var(--navy-line);
        --primary:        var(--navy-accent);
        --primary-soft:   var(--navy-fill-2);
    }
}

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

/* Pinned to the foot of the nav: the Applications section is the way OUT of this workspace, and it is
   shown only to people who can use the admin tool. Keeping it last means an author or an Omfax engineer
   sees Q&A laid out exactly as the advisor they are checking it for does — a section at the top would
   push the working menu down for the very people designing it, and for nobody else.

   margin-top:auto rather than a fixed position: the sidebar is already a flex column, so this takes up
   the slack on a tall screen and simply follows the last item on a short one, where the sidebar scrolls
   instead. padding-bottom:0 because the container's own padding closes the gap below. */
.kfx-sidebar-foot {
    margin-top: auto;
    padding-bottom: 0;
}

.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;
}

/* "Loading repair history…", "No previous repairs recorded", "No policy documents…". Used by the rail
   and by all three nav pages since they were written, and it had NO RULE ANYWHERE — so every one of
   those notes rendered as unstyled body text at full weight, reading like content rather than like the
   absence of it. Quieter and inset to match the rows it stands in for. */
.kfx-cp-note {
    font-size: var(--fs-small);
    color: var(--text-4);
    line-height: 1.45;
    padding: 10px 12px;
}

/* ── Launch messages ─────────────────────────────────────────────────────────────────
   Shown INSTEAD of the Q&A when a ?guid= link cannot be opened, or when another window has taken the
   call off this one. Calm rather than alarming: almost every one of these is somebody re-using a URL
   from their browser history, which is a mistake worth explaining, not an error worth shouting. */
.kfx-launch-note {
    max-width: 560px;
    margin: 32px 24px;
    padding: 20px 22px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: var(--r-md);
}
.kfx-launch-note h2 {
    margin: 0 0 6px;
    font-size: 17px; font-weight: 600; line-height: 1.3;
    color: var(--text);
}
.kfx-launch-note p {
    margin: 0;
    font-size: var(--fs-small); line-height: 1.55;
    color: var(--text-3);
}
.kfx-launch-acts { display: flex; gap: 8px; margin-top: 14px; }

/* ── Policy documents ────────────────────────────────────────────────────────────────
   Consecutive category groups on the Policies page. They used to sit in a .kfx-page that had no rules,
   so one category ran straight into the next. Same rhythm the rail uses between ITS groups. */
.kfx-policy-groups { display: flex; flex-direction: column; gap: 20px; max-width: 900px; }

/* An application (script type) and the category groups filed under it. Documents belong to a customer,
   not to a version, so one page can carry Repairs and Anti-social behaviour at once — and a category
   name only means something inside its application. The heading is a size ABOVE .kfx-cp-h, and rules off,
   so the eye reads two levels rather than a longer list of equals. */
.kfx-doc-app { display: flex; flex-direction: column; gap: 16px; }
.kfx-doc-app-h {
    font-size: var(--fs-small); font-weight: 700;
    color: var(--text-2);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}

/* The way in when there are forty of them. Sits above the groups and filters as you type. */
.kfx-doc-search {
    display: flex; align-items: center; gap: 8px;
    padding: 0 12px; margin-bottom: 4px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    height: 38px;
}
.kfx-doc-search:focus-within { border-color: var(--primary); }
.kfx-doc-search .kfx-icon { color: var(--text-4); flex: none; }
.kfx-doc-search input {
    flex: 1; border: 0; outline: 0; background: transparent;
    font: inherit; font-size: var(--fs-small); color: var(--text);
}
.kfx-doc-search input::placeholder { color: var(--text-4); }
.kfx-doc-clear {
    border: 0; background: transparent; cursor: pointer; padding: 2px;
    color: var(--text-4); display: flex; line-height: 0;
}
.kfx-doc-clear:hover { color: var(--text-2); }

/* How many are in a category, beside its heading — so a search tells you what it found. */
.kfx-doc-count {
    font-size: 10px; font-weight: 600; letter-spacing: 0;
    color: var(--text-4);
    background: var(--bg-2, rgba(0,0,0,.04));
    border-radius: 999px; padding: 1px 7px;
}

.kfx-doc-list { display: flex; flex-direction: column; gap: 4px; }

/* A row is a card of its own rather than a hairline in a shared card: these are things you ACT on —
   two buttons each — and rules between them read as a table where the eye wants targets. */
.kfx-doc-row {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    transition: border-color .12s ease, background .12s ease;
}
.kfx-doc-row:hover { border-color: var(--border-strong, var(--primary)); background: var(--surface); }

/* The file's kind, as the extension rather than a glyph: at this size a Word icon and a PDF icon are
   the same grey rectangle, and "DOCX" is not. Colour carries the family, the letters carry the detail. */
.kfx-doc-badge {
    flex: none; width: 42px; text-align: center;
    font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
    padding: 4px 0; border-radius: 4px;
    color: #fff; background: #7c8794;
    font-family: var(--font-mono, ui-monospace, monospace);
}
.kfx-doc-badge.pdf   { background: #c0392b; }
.kfx-doc-badge.doc   { background: #2b579a; }
.kfx-doc-badge.sheet { background: #1d6f42; }
.kfx-doc-badge.image { background: #7d3c98; }

.kfx-doc-name {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 1px;
    font-size: var(--fs-small); color: var(--text);
}
.kfx-doc-name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The categories a collapsed duplicate was filed under. */
.kfx-doc-also { font-size: var(--fs-xs); color: var(--text-4); }

.kfx-doc-size {
    flex: none; font-size: var(--fs-xs); color: var(--text-4);
    font-variant-numeric: tabular-nums;
}

.kfx-doc-act {
    flex: none; display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: var(--r-sm, 6px);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-2);
    font-size: var(--fs-xs); font-weight: 500;
    text-decoration: none; cursor: pointer; line-height: 1.6;
}
.kfx-doc-act:hover { border-color: var(--primary); color: var(--primary); }

/* ── The document viewer ──────────────────────────────────────────────
   Reuses .kfx-modal-back for the scrim; the panel is its own size because a policy is a page of A4 and
   the notes modal is 540px. */
.kfx-doc-viewer {
    display: flex; flex-direction: column;
    width: min(1100px, 94vw); height: min(90vh, 1000px);
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-pop);
    overflow: hidden;
}
.kfx-doc-viewer-h {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    flex: none;
}
.kfx-doc-viewer-name {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: var(--fs-small); font-weight: 600; color: var(--text);
}
.kfx-doc-frame { flex: 1; width: 100%; border: 0; background: #f1f1f4; }

.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 ──────────────────────────────────────────────── */
/* Navy, closing the frame the topbar and the sidebar open. Without this the navy sidebar ran to the
   bottom of the window and then met a light strip, which read as an unfinished edge rather than a
   deliberate one. Matches .adm-statusbar in the admin tool. A leaf element, so tokens re-point. */
.kfx-status-bar {
    height: 32px; min-height: 32px;
    background: var(--brand-navy);
    border-top: 0;
    display: flex; align-items: center;
    padding: 0 16px; gap: 10px;
    font-size: var(--fs-xs); color: var(--on-navy-3);
    font-family: 'Geist Mono', monospace;

    --text-3: var(--on-navy-3);
    --text-4: rgba(255, 255, 255, .40);
}
.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;
}
/* ── Hero band ──────────────────────────────────────────────────────────────────────
   The art-directed page header: navy scrim over the hero artwork, white heading, closed by
   the purple→red hairline. Opt-in via `hero` on .kfx-screen-header, NOT applied to every
   screen header — the header is shared by screens whose right-hand side holds controls, and
   this treatment is for a screen that INTRODUCES something. It sits above the working area
   and never behind it: imagery behind the category tiles or the conversation would cost
   legibility and buy nothing.

   --kfx-hero-image is the single swap point for licensed photography; see the longer note on
   --adm-hero-image in keyfax-admin.css for why the default is an authored SVG rather than one
   of the brand deck's stock images. */
:root {
    --kfx-hero-image: url('/images/omfax-hero-mesh.svg');
    --kfx-hero-wash:  linear-gradient(100deg,
                        rgba(0, 23, 105, .95) 0%,
                        rgba(0, 23, 105, .78) 34%,
                        rgba(0, 23, 105, .30) 100%);
}
.kfx-screen-header.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    /* Scrim first — background layers paint front-to-back. The colour underneath is the
       fallback while the image loads, so the heading is never white-on-white. */
    background-image: var(--kfx-hero-wash), var(--kfx-hero-image);
    /* Stretched rather than cropped: `cover` on a short band scales a 1600x500 artwork up and shows
       a thin slice with none of the glow. Distortion is invisible on an abstract field. */
    background-size: cover, 100% 100%;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    background-color: var(--brand-navy);
    /* Explicit, so anything inheriting its colour does not keep the light theme's dark ink. */
    color: var(--on-navy);
    border-radius: var(--r-md);
    padding: 20px 24px 22px;
    margin: 0 0 20px;

    --text:    var(--on-navy);
    --text-2:  var(--on-navy-2);
    --text-3:  var(--on-navy-3);
    --primary: var(--navy-accent);
    /* The SURFACE tokens have to move with the text tokens, not just the text ones. This header
       carries buttons ("Open in CRM") painted with background:var(--surface) and colour
       var(--text) — re-pointing only the text turned the label white and left the button white,
       so it rendered as an empty white box on the navy. Any band that hosts a control needs the
       whole neutral set re-pointed, not the ink alone. */
    --surface:       var(--navy-fill-2);
    --surface-2:     var(--navy-fill);
    --surface-3:     var(--navy-fill-2);
    --border:        var(--navy-line);
    --border-strong: var(--navy-line);
}
.kfx-screen-header.hero > * { position: relative; z-index: 1; }
.kfx-screen-header.hero::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: var(--brand-rule); z-index: 2;
}
.kfx-screen-header.hero .kfx-screen-title { color: var(--on-navy); }
.kfx-screen-header.hero .kfx-screen-sub   { color: var(--on-navy-3); }

/* Rubik on the things that announce; body, tables and the conversation stay on Geist. */
.kfx-screen-title,
.kfx-card-title,
.kfx-brand-name,
.kfx-sidebar-label {
    font-family: var(--font-head);
}
.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;
}
/* --surface-2 is near-white (#F1F3F7), which is right ONLY because the button above it has dark
   text (color: var(--text)). A component that restyles .kfx-btn as a SOLID, white-text button must
   give it its own hover too, or this rule will paint white on near-white and the label vanishes —
   which is exactly what happened to Submit and to the priority/quantity popup's Ok on the results
   summary (fixed in KfxResultCards.razor.css, 25 Aug 2026). */
.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);
}

/* The tile's wrapper: the tooltip hangs off THIS (it holds buttons of its own, which may not nest
   inside the tile button), and a grid cell stretches the wrapper, not the button, so the button is
   told to fill it. */
.kfx-cat-tile-wrap { position: relative; display: block; }
.kfx-cat-tile-wrap .kfx-cat-tile { width: 100%; }

.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; }

/* ── Category tile: the matching-topics tooltip ────────────────
   Which topics sit behind a tile, for the current search. Bigger than a native tooltip on purpose:
   the answer is a LIST, and a browser title renders one as a single run-on line.

   CSS-only on :hover — no interop, nothing to tear down, and it cannot be left on screen by a
   component that re-rendered mid-hover. It sits above the tile, outside it, so it never covers the
   tile's own click; the ::after strip bridges the gap beneath it so the pointer can cross from tile
   to tip without the hover dropping on the way. Its topics are buttons (choose one and you go
   straight to it), which is why it hangs off the WRAPPER rather than the tile button. */
.kfx-cat-tip {
    position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
    z-index: 20;
    display: none; flex-direction: column; gap: 3px;
    min-width: 180px; max-width: 280px;
    padding: 9px 11px;
    text-align: left;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--r-sm);
    box-shadow: 0 6px 20px rgb(0 0 0 / 14%);
}
.kfx-cat-tip::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; }
.kfx-cat-tile-wrap:hover .kfx-cat-tip,
.kfx-cat-tile-wrap:focus-within .kfx-cat-tip { display: flex; }
.kfx-cat-tip-head {
    font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-4); margin-bottom: 2px;
}
.kfx-cat-tip-item { font-size: var(--fs-small); color: var(--text); line-height: 1.35; }
.kfx-cat-tip-link {
    display: block; margin: 0 -6px; padding: 2px 6px; width: calc(100% + 12px);
    background: none; border: 0; border-radius: var(--r-sm);
    font: inherit; font-size: var(--fs-small); color: var(--text); text-align: left; cursor: pointer;
}
.kfx-cat-tip-link:hover, .kfx-cat-tip-link:focus-visible { background: var(--primary-soft, rgb(0 0 0 / 6%)); color: var(--primary); outline: none; }
.kfx-cat-tip-more { font-size: var(--fs-xs); color: var(--text-3); margin-top: 2px; }

.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;
}

/* ── Related images ───────────────────────────────────────────
   The author's reference pictures for the current category or topic, sitting under the question
   stage. Two states, chosen by kfx-related-dock.js: in the flow (default) or .is-docked, pinned to
   the bottom of the interview pane when the question is short enough to leave room. The docked look
   gains a top edge and drops its own radius/margin so it reads as part of the pane's chrome rather
   than a card floating over it.

   The single row scrolls left/right when the pictures overflow. "safe center" is what centres a short
   row while degrading to flex-start on overflow — plain "center" in a scroll container pushes the
   first items off the scrollable edge where they can never be reached. */
.kfx-related {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 12px 16px 14px;
    box-shadow: var(--shadow-1);
    margin-bottom: 20px;
}
.kfx-related.is-docked {
    border-radius: 0;
    border-left: 0; border-right: 0; border-bottom: 0;
    margin-bottom: 0;
    box-shadow: 0 -2px 10px rgb(0 0 0 / 8%);
}
.kfx-related-title {
    font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--text-4); margin-bottom: 10px;
}
.kfx-related-track {
    display: flex; gap: 10px;
    overflow-x: auto; overflow-y: hidden;
    padding-bottom: 4px;
    justify-content: center;
    justify-content: safe center;
    scrollbar-width: thin;
}
.kfx-related-item {
    flex: 0 0 auto;
    display: block;                 /* Chromium collapses a flex-item <button> without this */
    padding: 0; line-height: 0; overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    cursor: zoom-in;
    max-width: 220px;               /* the label wraps inside the picture's own width, never past it */
}
.kfx-related-item:hover { border-color: var(--primary); }
.kfx-related-item:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.kfx-related-item img { display: block; height: 96px; width: auto; max-width: 220px; object-fit: cover; margin: 0 auto; }
/* The label under each thumbnail, in body ink rather than the muted grey: it is what tells four
   similar photos apart, so it has to be readable at a glance, docked or in the flow (Tom, 10 Sep
   2026). Two lines at most so a long label cannot stretch the row — the viewer shows it in full. */
.kfx-related-cap {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
    padding: 5px 8px 6px; line-height: 1.25;
    font-size: var(--fs-small); font-weight: 600; color: var(--text); text-align: center;
    background: var(--surface-2); border-top: 1px solid var(--border);
    white-space: normal; overflow-wrap: anywhere;
}

.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;
}

/* The session's customer, when it is not the signed-in user's own — an Omfax advisor running a call
   for a customer. Quieter than the identity it qualifies: it is a fact about the SESSION, not about
   who is reading the screen, and it must not compete with the sign-in for attention. */
.kfx-topbar-acting { opacity: .85; }
.kfx-topbar-acting strong { font-weight: 600; }