/* KRAG components: every visual element of the UI, styled only through tokens (krag-tokens.css).
   Id scheme: each component has an id "KC-<GROUP>-<NAME>" (data-kc attribute) and a class that is the
   id in lower case ("kc-<group>-<name>"). Variants have their own id and add to the base class.
   Logical properties only (inline/block, start/end) so the layout mirrors in RTL with no extra code.
   The catalogue and rules are in xx_marketing/README.md. */

/* ===== KC-BASE: reset and page shell ===== */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
.kc-base-body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: var(--fs-base)/var(--lh-base) var(--font-sans);
  block-size: 100vh; block-size: 100dvh; display: flex; flex-direction: column;
}
.kc-base-app { flex: 1; display: flex; flex-direction: column; min-block-size: 0; }
.kc-base-split { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); min-block-size: 0; position: relative; }
.kc-base-split.is-panel { grid-template-columns: minmax(0, 1fr) minmax(360px, var(--panel-w)); }
.kc-base-split.is-panel.is-full .kc-chat-pane { display: none; }
.kc-base-split.is-panel.is-full { grid-template-columns: minmax(0, 1fr); }
.kc-base-split:not(.is-panel) .kc-panel-shell { display: none; }
.kc-base-split.is-over-view .kc-chat-pane { display: none !important; }
.kc-base-page { flex: 1; overflow: auto; padding: var(--gutter); max-inline-size: var(--page-max); inline-size: 100%; margin-inline: auto; }
.kc-base-page h2 { font-size: var(--fs-h2-page); margin: 0 0 var(--sp-4); }
.kc-base-page h3 { font-size: var(--fs-h3); margin: var(--sp-7) 0 var(--sp-3); }
.kc-base-row { display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: center; margin-block: var(--sp-4); }
.kc-base-row select { inline-size: auto; }
.kc-btn-default:focus-visible, .kc-sso-btn:focus-visible, .kc-fld-input:focus-visible, .kc-fld-textarea:focus-visible, .kc-fld-select:focus-visible,
.kc-chat-cite:focus-visible, .kc-txt-link:focus-visible, .kc-tog-legend:focus-visible, .kc-card-click:focus-visible,
.kc-btn-icon:focus-visible, .kc-btn-send:focus-visible, .kc-pop-item:focus-visible, .kc-seg-item:focus-visible,
.kc-side-conv:focus-visible, .kc-side-search:focus-visible, .kc-side-workspace:focus-visible, .kc-side-newchat:focus-visible,
.kc-lang-toggle:focus-visible, .kc-ans-expand:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.kc-nav-extended :focus-visible, .kc-nav-menubtn:focus-visible, .kc-pay-method:focus-within { outline: var(--focus-ring); outline-offset: -2px; }
.kc-txt-sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.kc-txt-pre { white-space: pre-wrap; margin-block: var(--sp-4); }

/* ===== Top bar: KC-HDR-* ===== */
.kc-hdr-bar { display: flex; align-items: center; gap: var(--sp-6); padding: var(--sp-5) var(--sp-8); min-block-size: 52px; }
.kc-hdr-title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); margin: 0; margin-inline-end: auto; flex: 0 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== Sidebar and menu: KC-NAV-*, KC-SIDE-* (one markup in three formats) ===== */
.kc-nav-shell { flex: 1; display: flex; min-block-size: 0; position: relative; }
.kc-nav-content { flex: 1; min-inline-size: 0; min-block-size: 0; display: flex; flex-direction: column; }
.kc-nav-extended { display: flex; flex-direction: column; flex: none; inline-size: var(--nav-w); background: var(--side); border-inline-end: var(--bw) solid var(--line); font-size: var(--fs-md); overflow: hidden; }
.kc-nav-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-6) var(--sp-5) var(--sp-3) var(--sp-6); padding-inline: var(--sp-6) var(--sp-5); }
.kc-nav-fold, .kc-nav-menubtn { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 36px; min-block-size: 36px; padding: 0; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--muted); cursor: pointer; font: inherit; }
.kc-nav-fold:hover, .kc-nav-menubtn:hover { background: var(--chip); color: var(--ink); }
.kc-nav-fold svg, .kc-nav-menubtn svg { inline-size: 18px; block-size: 18px; }
[dir="rtl"] .kc-nav-fold svg { transform: scaleX(-1); }
.kc-side-brand { display: flex; align-items: center; gap: var(--sp-4); min-inline-size: 0; flex: 1; position: relative; }
.kc-side-logo { flex: none; display: inline-flex; align-items: center; justify-content: center; inline-size: var(--avatar-size); block-size: var(--avatar-size); border-radius: var(--r-md); background: var(--ink); color: var(--bg); font-weight: var(--fw-bold); }
.kc-side-workspace { flex: 1; min-inline-size: 0; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink); font: inherit; text-align: start; cursor: pointer; }
.kc-side-workspace:hover { background: var(--chip); }
.kc-side-workspace > span { display: flex; flex-direction: column; min-inline-size: 0; flex: 1; }
.kc-side-workspace b { font-size: var(--fs-md); }
.kc-side-workspace small { font-size: var(--fs-sm); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kc-side-workspace svg { inline-size: 14px; block-size: 14px; flex: none; color: var(--muted); }
.kc-side-wsmenu { position: absolute; inset-block-start: 100%; inset-inline-start: 0; inset-inline-end: 0; z-index: calc(var(--z-drawer) + 2); margin-block-start: var(--sp-2); padding: var(--sp-3); background: var(--panel); border: var(--bw) solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-menu); }
.kc-side-newchat { display: flex; align-items: center; gap: var(--sp-5); margin: var(--sp-2) var(--sp-5); padding: var(--sp-4) var(--sp-5); border: var(--bw) solid var(--line); border-radius: var(--r-md); background: var(--panel); color: var(--ink); font: inherit; font-weight: var(--fw-semibold); cursor: pointer; box-shadow: var(--shadow-card); }
.kc-side-newchat:hover { border-color: var(--accent); }
.kc-side-newchat svg, .kc-side-out svg { inline-size: 18px; block-size: 18px; flex: none; }
.kc-side-search { margin: var(--sp-2) var(--sp-5) var(--sp-3); inline-size: auto; font: inherit; font-size: var(--fs-input); padding: var(--sp-3) var(--sp-6); border: var(--bw) solid var(--line); border-radius: var(--r-pill); background: var(--panel); color: var(--ink); }
.kc-nav-list { flex: none; padding: var(--sp-2) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-1); }
.kc-nav-item { display: flex; align-items: center; gap: var(--sp-5); inline-size: 100%; padding: var(--sp-4) var(--sp-5); border: 0; border-radius: var(--r-sm); background: none; color: var(--ink); font: inherit; text-align: start; cursor: pointer; min-block-size: 40px; }
.kc-nav-item:hover { background: var(--chip); }
.kc-nav-item.is-on { background: var(--panel); color: var(--ink); font-weight: var(--fw-semibold); box-shadow: var(--shadow-card); }
.kc-nav-icon { display: inline-flex; flex: none; }
.kc-nav-icon svg { inline-size: 18px; block-size: 18px; }
.kc-nav-label { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kc-nav-badge { flex: none; min-inline-size: 22px; padding: 0 var(--sp-3); border-radius: var(--r-pill); background: var(--ink); color: var(--bg); font-size: var(--fs-xs); font-weight: var(--fw-bold); text-align: center; line-height: 20px; font-variant-numeric: tabular-nums; }
.kc-side-history { flex: 1; min-block-size: 0; overflow-y: auto; padding: var(--sp-3) var(--sp-4); }
.kc-side-group { margin-block-end: var(--sp-5); }
.kc-side-grouphead { padding: var(--sp-2) var(--sp-5); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--muted); }
.kc-side-conv { display: block; inline-size: 100%; padding: var(--sp-3) var(--sp-5); border: 0; border-radius: var(--r-sm); background: none; color: var(--ink); font: inherit; text-align: start; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kc-side-conv:hover { background: var(--chip); }
.kc-side-conv.is-on { background: var(--panel); box-shadow: var(--shadow-card); }
.kc-side-user { display: flex; align-items: center; gap: var(--sp-5); padding: var(--sp-5) var(--sp-6); border-block-start: var(--bw) solid var(--line); }
.kc-side-avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; inline-size: var(--avatar-size); block-size: var(--avatar-size); border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.kc-side-user { position: relative; }
.kc-avatar-btn { flex: 1; min-inline-size: 0; display: flex; align-items: center; gap: var(--sp-5); margin: 0; padding: var(--sp-2); border: 0; border-radius: var(--r-sm); background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.kc-avatar-btn:hover { background: var(--chip); }
.kc-avatar-btn:focus-visible, .kc-avatar-item:focus-visible, .kc-btn-addslack:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.kc-avatar-menu { position: fixed; inset-block-end: calc(var(--avatar-size) + var(--sp-10) + var(--sp-6)); inset-inline-start: var(--sp-6); z-index: calc(var(--z-drawer) + 3); min-inline-size: 220px; padding: var(--sp-3); background: var(--panel); border: var(--bw) solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-menu); display: flex; flex-direction: column; gap: var(--sp-1); }
.kc-avatar-menu[hidden] { display: none; }
.kc-avatar-item { display: flex; align-items: center; gap: var(--sp-5); inline-size: 100%; min-block-size: 40px; padding: var(--sp-4) var(--sp-5); border: 0; border-radius: var(--r-sm); background: none; color: var(--ink); font: inherit; text-align: start; cursor: pointer; }
.kc-avatar-item:hover, .kc-avatar-item:focus-visible { background: var(--chip); }
.kc-avatar-item svg { flex: none; inline-size: 18px; block-size: 18px; }
.kc-side-userinfo { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; }
.kc-side-username { font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kc-side-userrole { font-size: var(--fs-sm); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kc-lang-toggle { font: inherit; font-size: var(--fs-md); padding: var(--sp-2) var(--sp-5); border: var(--bw) solid var(--line); border-radius: var(--r-pill); background: var(--panel); color: var(--ink); cursor: pointer; min-block-size: 32px; }
.kc-lang-toggle:hover { border-color: var(--accent); }
.kc-nav-credits { display: flex; align-items: center; gap: var(--sp-5); margin: var(--sp-2) var(--sp-4) var(--sp-4); padding: var(--sp-4) var(--sp-5); border: var(--bw) dashed var(--line); border-radius: var(--r-sm); color: var(--muted); text-decoration: none; }
.kc-nav-credits:hover { background: var(--chip); }
.kc-nav-credits b { color: var(--ink); font-variant-numeric: tabular-nums; }
/* Rail: icons only; the labels stay for screen readers */
.kc-nav-rail { inline-size: var(--nav-rail-w); }
.kc-nav-rail .kc-nav-top { flex-direction: column; justify-content: center; padding-inline: 0; }
.kc-nav-rail .kc-side-workspace, .kc-nav-rail .kc-side-search, .kc-nav-rail .kc-side-history, .kc-nav-rail .kc-side-userinfo, .kc-nav-rail .kc-nav-badge { display: none; }
.kc-nav-rail .kc-nav-item, .kc-nav-rail .kc-nav-credits, .kc-nav-rail .kc-side-newchat { justify-content: center; padding-inline: 0; margin-inline: var(--sp-4); }
.kc-nav-rail .kc-side-newchat { inline-size: auto; }
.kc-nav-rail .kc-nav-credits { border-style: solid; }
.kc-nav-rail .kc-side-user { flex-direction: column; padding-inline: 0; }
.kc-nav-rail .kc-nav-label, .kc-nav-rail .kc-nav-credits b { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.kc-nav-rail .kc-side-history { display: none; }
.kc-nav-rail .kc-nav-list { flex: 1; }
/* Drawer: hidden until the shell is open, then over the content from the start edge */
.kc-nav-drawer { display: none; }
.kc-nav-shell.is-open .kc-nav-drawer { display: flex; position: fixed; z-index: var(--z-drawer); inset-block: 0; inset-inline-start: 0; inline-size: min(86%, var(--nav-drawer-max)); block-size: auto; box-shadow: var(--shadow-menu); }
.kc-nav-drawer .kc-nav-fold { display: none; }
.kc-nav-scrim { display: none; }
.kc-nav-shell.is-open .kc-nav-scrim { display: block; position: fixed; inset: 0; z-index: calc(var(--z-drawer) - 1); background: rgba(0, 0, 0, .45); }
.kc-nav-menubtn { display: none; color: var(--ink); border: var(--bw) solid var(--line); background: var(--panel); }
.kc-wgt-bar { display: flex; gap: var(--sp-4); flex-wrap: wrap; padding: var(--sp-3) var(--sp-8); align-items: center; justify-content: center; }
.kc-wgt-item { font: inherit; color: var(--ink); background: var(--panel); border: var(--bw) solid var(--warn); border-radius: var(--r-pill); padding: var(--sp-2) var(--sp-6); font-size: var(--fs-md); cursor: pointer; box-shadow: var(--shadow-card); }
.kc-wgt-item b { color: var(--warn); }

/* ===== Buttons: KC-BTN-* ===== */
.kc-btn-default { font: inherit; border: var(--bw) solid var(--line); background: var(--panel); color: var(--ink); border-radius: var(--r-sm); padding: 5px var(--sp-5); cursor: pointer; min-block-size: 32px; }
.kc-btn-default:hover:not(:disabled) { border-color: var(--accent); }
.kc-btn-default:disabled, .kc-btn-default[aria-disabled="true"] { opacity: .55; cursor: default; }
.kc-btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.kc-btn-danger { color: var(--bad); border-color: var(--bad); }
.kc-btn-small { font-size: var(--fs-sm); padding: var(--sp-2) var(--sp-4); min-block-size: 30px; }
.kc-btn-suggest { font-size: var(--fs-md); padding: var(--sp-3) var(--sp-6); border-radius: var(--r-pill); box-shadow: var(--shadow-card); }
.kc-btn-tool { font-size: var(--fs-sm); padding: var(--sp-2) var(--sp-4); }
.kc-btn-tool[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.kc-btn-full { inline-size: 100%; margin-block-start: var(--sp-8); }
.kc-btn-back { inline-size: 100%; margin-block-start: var(--sp-8); }
.kc-btn-alt { inline-size: 100%; margin-block-start: var(--sp-4); }
.kc-btn-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; inline-size: var(--icon-btn); block-size: var(--icon-btn); padding: 0; border: var(--bw) solid var(--line); border-radius: 50%; background: var(--panel); color: var(--ink); font: inherit; cursor: pointer; }
.kc-btn-icon:hover:not(:disabled) { border-color: var(--accent); }
.kc-btn-icon:disabled { opacity: .55; cursor: default; }
.kc-btn-icon svg, .kc-btn-send svg { inline-size: 18px; block-size: 18px; }
.kc-btn-send { display: inline-flex; align-items: center; justify-content: center; flex: none; inline-size: var(--send-size); block-size: var(--send-size); padding: 0; border: 0; border-radius: 50%; background: var(--ink); color: var(--bg); cursor: pointer; }
.kc-btn-send:disabled { opacity: .55; cursor: default; }
.kc-btn-send.is-stop svg { inline-size: 14px; block-size: 14px; }
[dir="rtl"] .kc-btn-send:not(.is-stop) svg { transform: scaleX(-1); }

/* ===== Fields: KC-FLD-* ===== */
.kc-fld-label { display: block; margin: var(--sp-5) 0 var(--sp-2); font-size: var(--fs-md); color: var(--muted); }
.kc-fld-input, .kc-fld-textarea, .kc-fld-select {
  font: inherit; font-size: var(--fs-input); padding: 8px 10px; border: var(--bw) solid var(--line);
  border-radius: var(--r-sm); background: var(--panel); color: var(--ink); inline-size: 100%;
}
.kc-fld-textarea { resize: vertical; min-block-size: 90px; }
.kc-fld-textarea-chat { resize: none; block-size: 28px; min-block-size: 0; max-block-size: 168px; border: 0; padding: 0; background: transparent; border-radius: 0; line-height: 1.5; font-size: var(--fs-chat); }
.kc-fld-textarea-chat:focus-visible { outline: none; }
.kc-fld-check { display: flex; gap: var(--sp-4); align-items: center; font-size: var(--fs-md); color: var(--ink); margin-block: var(--sp-2); }
.kc-fld-check input { inline-size: auto; }
.kc-fld-mfa { letter-spacing: .2em; font-family: var(--font-mono); text-align: center; }
.kc-dlg-box .kc-fld-label { margin: var(--sp-4) 0 3px; }
.kc-fld-help { font-size: var(--fs-sm); color: var(--muted); margin-block-start: var(--sp-3); }

/* ===== Messages: KC-MSG-*, KC-TOAST ===== */
.kc-msg-err { color: var(--bad); font-size: var(--fs-md); margin-block-start: var(--sp-5); min-block-size: 1em; }
.kc-msg-note { color: var(--muted); border: var(--bw) dashed var(--line); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-5); margin-block: var(--sp-4); }
.kc-tbl-row > .kc-msg-note { flex-basis: 100%; margin-block: 0; }
.kc-msg-warn { display: flex; gap: var(--sp-4); align-items: flex-start; background: var(--warn-tint); color: var(--ink); border: var(--bw) solid var(--warn); border-inline-start-width: 4px; border-radius: var(--r-md); padding: var(--sp-4) var(--sp-6); margin-block: var(--sp-5); font-size: var(--fs-md); }
.kc-msg-warn b { color: var(--ink); }
.kc-toast { position: fixed; inset-block-end: var(--sp-10); inset-inline-start: 50%; transform: translateX(-50%); z-index: calc(var(--z-drawer) + 5); background: var(--ink); color: var(--bg); padding: var(--sp-4) var(--sp-8); border-radius: var(--r-pill); box-shadow: var(--shadow-menu); font-size: var(--fs-md); }
[dir="rtl"] .kc-toast { transform: translateX(50%); }

/* ===== Text helpers: KC-TXT-* ===== */
.kc-txt-meta { font-size: var(--fs-sm); color: var(--muted); margin-block-start: var(--sp-3); }
.kc-txt-hash { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); word-break: break-all; text-align: start; }
.kc-txt-hash bdi { direction: ltr; unicode-bidi: isolate; }
.kc-txt-rel { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--muted); }
.kc-txt-link { color: var(--accent); cursor: pointer; font-weight: var(--fw-semibold); }
.kc-txt-quote { margin: var(--sp-2) 0 0; color: var(--muted); }
.kc-txt-quote b { color: var(--ink); font-weight: 500; }
.kc-txt-title { font-size: var(--fs-h2); margin: 0 0 var(--sp-3); }

/* ===== Badges and chips: KC-BDG-* ===== */
.kc-bdg-test { font-size: var(--fs-xs); font-weight: var(--fw-bold); padding: 1px 7px; border-radius: var(--r-pill); border: var(--bw) solid var(--warn); color: var(--warn); }
.kc-bdg-chips { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-block-end: var(--sp-5); }
.kc-bdg-chip { display: inline-block; background: var(--chip); border-radius: var(--r-pill); padding: 1px 10px; font-size: var(--fs-sm); color: var(--muted); }
.kc-bdg-chip-confidential { color: var(--warn); }
.kc-bdg-chip-restricted { color: var(--warn); }
.kc-bdg-chip-secret { color: var(--bad); font-weight: var(--fw-bold); }
.kc-bdg-chip-top-secret { color: var(--on-accent); background: var(--bad); font-weight: var(--fw-bold); }
.kc-bdg-status { font-size: var(--fs-xs); padding: 1px var(--sp-4); border-radius: var(--r-pill); background: var(--chip); }
.kc-bdg-status.is-open, .kc-bdg-status.is-needs_review, .kc-bdg-status.is-proposed, .kc-bdg-status.is-draft { color: var(--warn); }
.kc-bdg-status.is-pending { color: var(--warn); }
.kc-bdg-status.is-paid { color: var(--ok); }
.kc-bdg-status.is-passed { color: var(--accent); }
.kc-bdg-status.is-signed, .kc-bdg-status.is-evidenced, .kc-bdg-status.is-published, .kc-bdg-status.is-confirmed, .kc-bdg-status.is-approved { color: var(--ok); }
.kc-bdg-status.is-rejected, .kc-bdg-status.is-withdrawn, .kc-bdg-status.is-superseded { color: var(--bad); }
.kc-bdg-linkstatus { font-size: var(--fs-xs); padding: 1px 7px; border-radius: var(--r-pill); margin-inline-start: auto; background: var(--chip); }
.kc-bdg-linkstatus.is-proposed { color: var(--warn); }
.kc-bdg-linkstatus.is-confirmed { color: var(--ok); }

/* ===== Cards: KC-CARD-* ===== */
.kc-card-plain { border: var(--bw) solid var(--line); border-radius: var(--r-lg); padding: var(--sp-6) var(--sp-8); margin-block-end: var(--sp-5); background: var(--panel); box-shadow: var(--shadow-card); }
.kc-card-click { cursor: pointer; }
.kc-card-click:hover, .kc-card-click:focus { border-color: var(--accent); outline: 0; }
.kc-card-link { border: var(--bw) solid var(--line); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); margin-block-end: var(--sp-3); }
.kc-card-link-top { display: flex; gap: var(--sp-4); align-items: baseline; flex-wrap: wrap; }
.kc-card-link-actions { margin-block-start: var(--sp-3); display: flex; gap: var(--sp-3); }
.kc-card-auth { max-inline-size: var(--login-max); margin: 12vh auto; padding: var(--sp-10); background: var(--panel); border: var(--bw) solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-card); }
.kc-card-auth h2 { margin: 0 0 var(--sp-2); font-size: var(--fs-h2-page); }
.kc-auth-help { margin: 0 0 var(--sp-8); color: var(--muted); font-size: var(--fs-md); }
.kc-auth-qr { display: block; inline-size: 200px; max-inline-size: 100%; block-size: auto; margin-block: var(--sp-3); margin-inline: auto; padding: var(--sp-3); background: var(--qr-bg); border-radius: var(--sp-2); image-rendering: pixelated; }
.kc-auth-link { display: inline-block; margin-block: var(--sp-3); color: var(--accent); }
.kc-card-auth .kc-fld-label { margin-block-start: var(--sp-5); }
.kc-card-info { block-size: 26%; overflow: auto; border-block-start: var(--bw) solid var(--line); padding: var(--sp-6) var(--sp-8); background: var(--panel); font-size: var(--fs-md); }

/* ===== Single sign-on: KC-SSO-* ===== */
/* Third-party sign-in buttons follow each owner's published guideline (docs/KRAG_BRAND_MARKS.md). Colours below are the owners' values,
   not ours; light theme uses the owner's light button, dark theme the owner's dark button. Do not restyle without re-reading the guideline. */
:root {
  --bm-google-bg: #ffffff; --bm-google-stroke: #747775; --bm-google-ink: #1f1f1f;
  --bm-ms-bg: #ffffff; --bm-ms-stroke: #8c8c8c; --bm-ms-ink: #5e5e5e;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bm-google-bg: #131314; --bm-google-stroke: #8e918f; --bm-google-ink: #e3e3e3;
    --bm-ms-bg: #2f2f2f; --bm-ms-stroke: #2f2f2f; --bm-ms-ink: #ffffff;
  }
}
:root[data-theme="dark"] {
  --bm-google-bg: #131314; --bm-google-stroke: #8e918f; --bm-google-ink: #e3e3e3;
  --bm-ms-bg: #2f2f2f; --bm-ms-stroke: #2f2f2f; --bm-ms-ink: #ffffff;
}
.kc-sso-box { margin-block-start: var(--sp-4); display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); }
.kc-sso-btn { display: inline-flex; align-items: center; justify-content: flex-start; box-sizing: border-box; inline-size: 215px; block-size: 41px; margin: 0; padding: 0 12px; border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; }
.kc-sso-btn:disabled { opacity: .55; cursor: default; }
/* Logos sit at the start edge (12px in), like the "in" block in LinkedIn's image. Google: 41px high (Google allows 40px or more), 215px wide like the other two, 4px corners, 12px | G 20px | 10px | text | 12px, Google Sans Medium 14/20 (falls back to Arial) */
.kc-sso-btn.is-google { gap: 10px; border-radius: 4px; background: var(--bm-google-bg); border-color: var(--bm-google-stroke); color: var(--bm-google-ink); font: 500 14px/20px "Google Sans", arial, sans-serif; }
.kc-sso-btn.is-google .kc-brand-logo { block-size: 20px; inline-size: 20px; }
/* Microsoft: 41px high, 215px wide, 12px | symbol 21px | 12px | text | 12px, Segoe UI 15px weight 600 */
.kc-sso-btn.is-microsoft { block-size: 41px; gap: 12px; border-radius: 0; background: var(--bm-ms-bg); border-color: var(--bm-ms-stroke); color: var(--bm-ms-ink); font: 600 15px/20px "Segoe UI", -apple-system, "Helvetica Neue", arial, sans-serif; }
.kc-sso-btn.is-microsoft .kc-brand-logo { block-size: 21px; inline-size: 21px; }
/* LinkedIn: LinkedIn's own button image, unaltered (215x41, hover and active images); the text in the image is English only */
.kc-sso-btn.is-linkedin { inline-size: 215px; block-size: 41px; min-inline-size: 0; padding: 0; border: 0; border-radius: 0; background: url("../img/brands/linkedin-signin-default.png") center / 215px 41px no-repeat; background-image: image-set(url("../img/brands/linkedin-signin-default.png") 1x, url("../img/brands/linkedin-signin-default@2x.png") 2x); color: transparent; font-size: 0; }
.kc-sso-btn.is-linkedin:hover { background-image: image-set(url("../img/brands/linkedin-signin-hover.png") 1x, url("../img/brands/linkedin-signin-hover@2x.png") 2x); }
/* Slack's own "Add to Slack" button image, unaltered (docs/KRAG_BRAND_MARKS.md); 139 x 40, one look for light and dark, English in every language */
.kc-btn-addslack { inline-size: 139px; block-size: 40px; margin: 0; padding: 0; border: 0; border-radius: 0; background: url("../img/brands/add-to-slack.png") center / 139px 40px no-repeat; background-image: image-set(url("../img/brands/add-to-slack.png") 1x, url("../img/brands/add-to-slack@2x.png") 2x); cursor: pointer; }
.kc-btn-addslack:disabled { opacity: .55; cursor: default; }
.kc-sso-btn.is-linkedin:active { background-image: image-set(url("../img/brands/linkedin-signin-active.png") 1x, url("../img/brands/linkedin-signin-active@2x.png") 2x); }

/* ===== Dialogs: KC-DLG-* ===== */
.kc-dlg-box { border: var(--bw) solid var(--line); border-radius: var(--r-xl); background: var(--panel); color: var(--ink); padding: var(--sp-9); max-inline-size: var(--dialog-max); inline-size: 92vw; box-shadow: var(--shadow-dialog); }
.kc-dlg-box::backdrop { background: rgba(0, 0, 0, .45); }
.kc-dlg-title { font-weight: var(--fw-bold); }
.kc-dlg-actions { display: flex; gap: var(--sp-4); justify-content: flex-end; margin-block-start: var(--sp-7); }

/* ===== Popover: KC-POP-* ===== */
.kc-pop-menu { position: absolute; z-index: calc(var(--z-drawer) + 2); min-inline-size: 260px; padding: var(--sp-3); background: var(--panel); border: var(--bw) solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-menu); display: flex; flex-direction: column; gap: var(--sp-1); }
.kc-pop-item { display: flex; align-items: center; gap: var(--sp-5); inline-size: 100%; padding: var(--sp-4) var(--sp-5); border: 0; border-radius: var(--r-sm); background: none; color: var(--ink); font: inherit; text-align: start; cursor: pointer; }
.kc-pop-item:hover:not(:disabled) { background: var(--chip); }
.kc-pop-item:disabled { color: var(--muted); cursor: default; }
.kc-pop-item svg { inline-size: 18px; block-size: 18px; flex: none; }
.kc-pop-item span { display: flex; flex-direction: column; min-inline-size: 0; }
.kc-pop-item small { color: var(--muted); font-size: var(--fs-sm); }

/* ===== Chat: KC-CHAT-* ===== */
.kc-chat-pane { display: flex; flex-direction: column; min-block-size: 0; min-inline-size: 0; position: relative; }
.kc-chat-log { flex: 1; overflow-y: auto; padding: var(--sp-10) var(--gutter) var(--sp-8); }
.kc-chat-thread { max-inline-size: var(--chat-max); margin-inline: auto; display: flex; flex-direction: column; gap: var(--sp-10); }
.kc-chat-turn { display: flex; flex-direction: column; gap: var(--sp-6); }
.kc-chat-q { align-self: flex-end; max-inline-size: 85%; background: var(--q); border-radius: var(--r-bubble); border-end-end-radius: var(--r-xs); padding: var(--sp-6) var(--sp-8); font-size: var(--fs-chat); white-space: pre-wrap; overflow-wrap: anywhere; display: flex; flex-direction: column; gap: var(--sp-4); }
.kc-chat-a { font-size: var(--fs-chat); line-height: 1.6; min-inline-size: 0; }
.kc-chat-a ul { padding-inline-start: var(--sp-10); margin-block: var(--sp-2); }
.kc-chat-a p { margin-block: var(--sp-3); }
.kc-chat-cite { display: inline-flex; align-items: center; gap: var(--sp-2); background: var(--chip); color: var(--accent); border: 0; border-radius: var(--r-pill); padding: 1px var(--sp-4); font: inherit; font-size: var(--fs-sm); cursor: pointer; text-align: start; }
.kc-chat-cite:hover { text-decoration: underline; }
.kc-chat-cite.is-mark { padding: 0 var(--sp-3); min-inline-size: 22px; justify-content: center; vertical-align: 2px; margin-inline: 2px; }
.kc-chat-cite .kc-bdg-status { margin-inline-start: var(--sp-2); }
.kc-chat-sources { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin-block-start: var(--sp-5); }
.kc-chat-sources .kc-chat-cite { padding: var(--sp-2) var(--sp-5); background: var(--panel); border: var(--bw) solid var(--line); color: var(--ink); font-size: var(--fs-md); }
.kc-chat-sources .kc-chat-cite:hover { border-color: var(--accent); }
.kc-chat-meta { font-size: var(--fs-sm); color: var(--muted); margin-block-start: var(--sp-3); }
.kc-chat-reason { margin-block-end: var(--sp-3); font-size: var(--fs-md); color: var(--muted); }
.kc-chat-reason > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); border-radius: var(--r-sm); font-weight: var(--fw-semibold); }
.kc-chat-reason > summary::-webkit-details-marker { display: none; }
.kc-chat-reason > summary::after { content: "\203A"; display: inline-block; transition: transform .15s; font-size: 1.2em; }
.kc-chat-reason[open] > summary::after { transform: rotate(90deg); }
[dir="rtl"] .kc-chat-reason > summary::after { content: "\2039"; }
[dir="rtl"] .kc-chat-reason[open] > summary::after { transform: rotate(-90deg); }
.kc-chat-reason > summary:hover { background: var(--chip); }
.kc-chat-reason > summary:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.kc-chat-reason-body { padding: var(--sp-3) var(--sp-6); border-inline-start: 2px solid var(--line); margin-inline-start: var(--sp-5); }
.kc-chat-reason-body p { margin: var(--sp-2) 0; }
.kc-chat-empty { text-align: center; padding-block: 8vh var(--sp-8); }
.kc-chat-empty h2 { font-size: 26px; margin: 0 0 var(--sp-3); }
.kc-chat-empty p { color: var(--muted); margin: 0 0 var(--sp-8); }
.kc-chat-suggest { min-inline-size: 0; max-inline-size: var(--chat-max); margin: 0 auto var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.kc-chat-suggest[hidden] { display: none; }
.kc-chat-suggest > .kc-seg-box { align-self: flex-start; max-inline-size: 100%; overflow-x: auto; scrollbar-width: none; }
.kc-chat-suggest > .kc-seg-box > * { flex: none; }
.kc-chat-suggest-list { display: flex; gap: var(--sp-3); overflow-x: auto; scrollbar-width: none; padding-block-end: var(--sp-2); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--sp-6), #000 calc(100% - var(--sp-8)), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 var(--sp-6), #000 calc(100% - var(--sp-8)), transparent 100%); }
.kc-chat-suggest-list::-webkit-scrollbar { display: none; }
[dir="rtl"] .kc-chat-suggest-list { -webkit-mask-image: linear-gradient(to left, transparent 0, #000 var(--sp-6), #000 calc(100% - var(--sp-8)), transparent 100%); mask-image: linear-gradient(to left, transparent 0, #000 var(--sp-6), #000 calc(100% - var(--sp-8)), transparent 100%); }
.kc-chat-suggest-list.kc-sugg-personal .kc-btn-suggest { text-align: start; display: flex; flex-direction: column; gap: 2px; border-radius: var(--r-lg); max-inline-size: 22rem; }
.kc-chat-suggest-list.kc-sugg-personal .kc-sugg-q { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kc-sugg-why { font-size: var(--fs-xs); color: var(--muted); font-weight: 500; }
.kc-sugg-why.is-urgent { color: var(--bad); }
.kc-chat-suggest-list .kc-btn-suggest { flex: none; white-space: nowrap; font-size: var(--fs-sm); box-shadow: none; }
.kc-chat-dock { padding: 0 var(--gutter) var(--sp-6); }
.kc-chat-form { max-inline-size: var(--chat-max); margin-inline: auto; display: flex; flex-direction: column; gap: var(--sp-4); background: var(--panel); border: var(--bw) solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-composer); padding: var(--sp-7) var(--sp-7) var(--sp-5) var(--sp-9); position: relative; }
.kc-chat-form:focus-within { outline: var(--focus-ring); outline-offset: 1px; }
.kc-chat-tools { display: flex; align-items: center; gap: var(--sp-4); }
.kc-chat-tools .kc-chat-spacer { flex: 1; }
.kc-chat-staged { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.kc-chat-attach { display: inline-flex; align-items: center; gap: var(--sp-4); max-inline-size: 100%; padding: var(--sp-3) var(--sp-5); background: var(--panel); border: var(--bw) solid var(--line); border-radius: var(--r-md); color: var(--ink); font-size: var(--fs-md); }
.kc-chat-attach-icon { flex: none; display: inline-flex; color: var(--accent); }
.kc-chat-attach-icon svg { inline-size: 22px; block-size: 22px; }
.kc-chat-attach-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-semibold); min-inline-size: 0; }
.kc-chat-attach-size { color: var(--muted); font-size: var(--fs-sm); flex: none; }
.kc-chat-dock .kc-txt-meta { text-align: center; margin-block-start: var(--sp-4); }

/* ===== Answer widgets: KC-ANS-*, KC-SEG-*, KC-STEP-*, KC-KPI-*, KC-CHART-*, KC-REC-*, KC-ACT-*, KC-REFUSE-* ===== */
.kc-ans-card { background: var(--panel); border: var(--bw) solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-card); margin-block: var(--sp-6); overflow: hidden; }
.kc-ans-head { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; padding: var(--sp-6) var(--sp-8) var(--sp-4); }
.kc-ans-title { flex: 1; min-inline-size: 8ch; margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.kc-ans-body { padding: 0 var(--sp-8) var(--sp-6); }
.kc-ans-foot { padding: var(--sp-4) var(--sp-8); border-block-start: var(--bw) solid var(--line); font-size: var(--fs-sm); color: var(--muted); }
.kc-ans-graph { position: relative; contain: layout paint; block-size: var(--ans-graph-h); border-radius: var(--r-md); background: var(--graph-bg); border: var(--bw) solid var(--line); overflow: hidden; }
.kc-ans-expand { font-size: var(--fs-sm); border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: var(--sp-3); }
.kc-ans-expand svg { inline-size: 14px; block-size: 14px; }
.kc-ans-tools { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-block-start: var(--sp-4); }
.kc-seg-box { display: inline-flex; gap: 2px; padding: 3px; background: var(--chip); border-radius: var(--r-pill); }
.kc-seg-item { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: var(--fs-md); padding: var(--sp-2) var(--sp-7); border-radius: var(--r-pill); cursor: pointer; min-block-size: 32px; }
.kc-seg-item[aria-selected="true"] { background: var(--panel); color: var(--ink); font-weight: var(--fw-semibold); box-shadow: var(--shadow-card); }
.kc-step-tree, .kc-step-group { list-style: none; margin: 0; padding: 0; }
.kc-step-group { margin-inline-start: var(--sp-9); padding-inline-start: var(--sp-6); }
.kc-step-item { margin-block: var(--sp-2); }
.kc-step-item:focus { outline: none; }
.kc-step-row { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; padding: var(--sp-3) var(--sp-5); border-radius: var(--r-md); border: var(--bw) solid transparent; cursor: pointer; }
.kc-step-row:hover { background: var(--chip); }
.kc-step-item:focus-visible > .kc-step-row { outline: var(--focus-ring); outline-offset: 1px; background: var(--chip); }
.kc-step-item[aria-expanded] > .kc-step-row::before { content: "\25BE"; color: var(--muted); inline-size: 1em; text-align: center; }
.kc-step-item[aria-expanded="false"] > .kc-step-row::before { content: "\25B8"; }
[dir="rtl"] .kc-step-item[aria-expanded="false"] > .kc-step-row::before { content: "\25C2"; }
.kc-step-item[aria-expanded="false"] > .kc-step-group { display: none; }
.kc-step-num { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; direction: ltr; }
.kc-step-kind { font-size: var(--fs-sm); color: var(--muted); display: inline-flex; align-items: center; gap: var(--sp-2); }
.kc-step-label { font-weight: var(--fw-semibold); min-inline-size: 0; overflow-wrap: anywhere; }
.kc-step-rel { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--muted); }
.kc-step-flag { font-size: var(--fs-xs); padding: 1px var(--sp-4); border-radius: var(--r-pill); background: var(--chip); color: var(--ink); border: var(--bw) solid var(--line); }
.kc-step-flag.is-proposed { border-style: dashed; color: var(--warn); }
.kc-step-flag.is-gap, .kc-step-flag.is-overdue { color: var(--bad); border-color: var(--bad); }
.kc-step-flag.is-cited { color: var(--accent); }
.kc-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-6); }
.kc-kpi-tile { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-6) var(--sp-7); border: var(--bw) solid var(--line); border-radius: var(--r-lg); background: var(--panel); }
.kc-kpi-label { font-size: var(--fs-sm); color: var(--muted); }
.kc-kpi-value { font-size: var(--fs-kpi); font-weight: var(--fw-bold); line-height: 1.2; font-variant-numeric: tabular-nums; }
.kc-kpi-delta { align-self: flex-start; font-size: var(--fs-xs); font-weight: var(--fw-semibold); padding: 1px var(--sp-4); border-radius: var(--r-pill); background: var(--chip); color: var(--ink); display: inline-flex; gap: var(--sp-2); font-variant-numeric: tabular-nums; }
.kc-kpi-delta.is-good { background: var(--ok-tint); }
.kc-kpi-delta.is-bad { background: var(--bad-tint); }
.kc-kpi-spark { inline-size: 100%; block-size: 36px; margin-block-start: var(--sp-2); overflow: visible; }
.kc-kpi-spark path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.kc-kpi-spark circle { fill: var(--accent); }
[dir="rtl"] .kc-kpi-spark { transform: scaleX(-1); }
.kc-chart-bar { margin: 0; }
.kc-chart-cols { display: flex; align-items: stretch; gap: var(--sp-7); block-size: 150px; padding-block-start: var(--sp-8); border-block-end: var(--bw) solid var(--line); }
.kc-chart-col { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: var(--sp-2); }
.kc-chart-fill { display: block; inline-size: 100%; max-inline-size: 56px; block-size: calc(var(--v, 0) * 1%); min-block-size: 2px; background: var(--accent); border-radius: var(--r-sm) var(--r-sm) 0 0; }
.kc-chart-val { font-size: var(--fs-sm); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.kc-chart-lbl { font-size: var(--fs-sm); color: var(--muted); text-align: center; padding-block-start: var(--sp-3); }
.kc-chart-cols + .kc-chart-labels { display: flex; gap: var(--sp-7); }
.kc-rec-card { border: var(--bw) solid var(--line); border-radius: var(--r-lg); padding: var(--sp-6) var(--sp-7); margin-block: var(--sp-4); background: var(--panel); }
.kc-rec-title { margin: 0 0 var(--sp-3); font-size: var(--fs-lg); }
.kc-refuse-card { border: var(--bw) dashed var(--bad); border-radius: var(--r-lg); padding: var(--sp-6) var(--sp-7); margin-block: var(--sp-5); background: var(--bad-tint); color: var(--ink); }
.kc-refuse-card .kc-rec-title { display: flex; align-items: center; gap: var(--sp-3); }
.kc-act-bar { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-block-start: var(--sp-5); }
.kc-act-note { margin: var(--sp-4) 0 0; font-size: var(--fs-sm); color: var(--muted); }

/* ===== Side panel shell: KC-PANEL-*, KC-WIZ-* ===== */
.kc-panel-shell { display: flex; flex-direction: column; min-block-size: 0; min-inline-size: 0; background: var(--panel); border-inline-start: var(--bw) solid var(--line); }
.kc-panel-shell:focus { outline: none; }
.kc-panel-head { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-5) var(--sp-8); border-block-end: var(--bw) solid var(--line); }
.kc-panel-title { flex: 1; margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.kc-panel-body { flex: 1; min-block-size: 0; overflow-y: auto; padding: var(--sp-8); }
.kc-panel-foot { display: flex; gap: var(--sp-4); justify-content: flex-end; flex-wrap: wrap; padding: var(--sp-6) var(--sp-8); border-block-start: var(--bw) solid var(--line); background: var(--panel); }
.kc-wiz-steps { list-style: none; display: flex; gap: var(--sp-3); margin: 0 0 var(--sp-8); padding: 0; flex-wrap: wrap; }
.kc-wiz-step { flex: 1; min-inline-size: 90px; padding: var(--sp-3) var(--sp-5); border-block-end: 3px solid var(--line); color: var(--muted); font-size: var(--fs-sm); }
.kc-wiz-step.is-done { border-color: var(--ok); color: var(--ink); }
.kc-wiz-step.is-on { border-color: var(--accent); color: var(--ink); font-weight: var(--fw-semibold); }

/* ===== Graph pane: KC-GRAPH-* ===== */
.kc-graph-right { flex: 1; display: flex; flex-direction: column; min-block-size: 0; }
.kc-graph-wrap { flex: 1; min-block-size: 0; position: relative; overflow: hidden; contain: strict; background: var(--graph-bg); } /* contain: the canvas can never size its ancestors, which made a scrollbar come and go (flicker) */
.kc-graph-canvas { position: absolute; inset: 0; }
.kc-graph-tools { position: absolute; inset-block-start: var(--sp-4); inset-inline-end: var(--sp-4); z-index: 5; display: flex; gap: var(--sp-3); }
.kc-graph-tools.is-zoom { inset-block-start: auto; inset-block-end: var(--sp-4); inset-inline-end: auto; inset-inline-start: var(--sp-4); }
.kc-graph-legend { font-size: var(--fs-sm); color: var(--muted); padding: var(--sp-3) var(--sp-6); border-block-start: var(--bw) solid var(--line); background: var(--panel); }

/* ===== Toggles: KC-TOG-* ===== */
.kc-tog-legend { cursor: pointer; margin-inline-end: var(--sp-5); white-space: nowrap; font: inherit; color: inherit; background: none; border: 0; padding: var(--sp-1) 0; }
.kc-tog-legend.is-off { opacity: .45; text-decoration: line-through; }

/* ===== Tables and definition lists: KC-TBL-* ===== */
.kc-tbl-def { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-1) var(--sp-7); margin: 0 0 var(--sp-5); }
.kc-tbl-def dt { color: var(--muted); }
.kc-tbl-def dd { margin: 0; }
.kc-tbl-row { display: flex; gap: var(--sp-3); align-items: baseline; flex-wrap: wrap; margin-block: 3px; }

/* ===== Decision trail: KC-TRAIL-* ===== */
.kc-trail-box { border: var(--bw) solid var(--line); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); margin-block: var(--sp-5); }
.kc-trail-row { font-size: var(--fs-md); margin-block: 3px; }
.kc-trail-row.is-signed { color: var(--ok); }
.kc-trail-row.is-pending { color: var(--warn); }
.kc-trail-row.is-stale { color: var(--bad); }
.kc-trail-comment { border-inline-start: 3px solid var(--line); padding: var(--sp-1) var(--sp-5); margin-block: var(--sp-3); }

/* ===== Payment (design only, not wired): KC-PAY-*, KC-PBAR ===== */
.kc-pay-form { display: flex; flex-direction: column; gap: var(--sp-7); max-inline-size: var(--pay-max); padding: var(--sp-8); border: var(--bw) solid var(--line); border-radius: var(--r-xl); background: var(--panel); box-shadow: var(--shadow-card); }
.kc-pay-plan { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-6); padding: var(--sp-5) var(--sp-6); border-radius: var(--r-md); background: var(--chip); }
.kc-pay-plan b, .kc-pay-name { display: block; }
.kc-pay-plan span { font-size: var(--fs-sm); color: var(--muted); }
.kc-pay-plan .kc-pay-amount { font-size: var(--fs-h2); font-weight: var(--fw-bold); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kc-pay-stack { display: flex; flex-direction: column; gap: var(--sp-3); min-inline-size: 0; }
.kc-pay-stack > .kc-seg-box { align-self: flex-start; max-inline-size: 100%; }
.kc-pay-usage { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-6) var(--sp-7); border: var(--bw) solid var(--line); border-radius: var(--r-md); background: var(--panel); }
.kc-pay-usage .kc-pay-line { justify-content: space-between; }
.kc-pay-plan .kc-pay-stack:last-child { align-items: flex-end; text-align: end; }
.kc-pay-methods { margin: 0; padding: 0; border: 0; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.kc-pay-methods legend { padding: 0; margin-block-end: var(--sp-3); font-size: var(--fs-md); color: var(--muted); }
.kc-pay-method { display: flex; align-items: center; gap: var(--sp-5); padding: var(--sp-5) var(--sp-6); border: var(--bw) solid var(--line); border-radius: var(--r-md); background: var(--panel); color: var(--ink); cursor: pointer; }
.kc-pay-method:has(input:checked) { border-color: var(--accent); background: var(--q); font-weight: var(--fw-semibold); }
.kc-pay-card { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--sp-6); }
.kc-pay-card > .kc-pay-wide { grid-column: 1 / -1; }
.kc-pay-apple { font: inherit; font-weight: var(--fw-semibold); inline-size: 100%; padding: var(--sp-5) var(--sp-6); border: var(--bw) solid var(--ink); border-radius: var(--r-md); background: var(--ink); color: var(--bg); cursor: pointer; }
.kc-pay-apple:disabled { opacity: .55; cursor: default; }
/* Apple Pay button: where the browser supports Apple's own button (Safari) it draws it (black on light, white on dark, per Apple's "use on" rules),
   at least 100x30 and with the owner's logo and word. Elsewhere Apple Pay is not offered; this plain custom button carries no Apple Pay text or logo. */
@supports (-webkit-appearance: -apple-pay-button) {
  .kc-pay-apple { -webkit-appearance: -apple-pay-button; -apple-pay-button-type: plain; -apple-pay-button-style: black; min-inline-size: 100px; block-size: 44px; padding: 0; border: 0; background: none; color: transparent; font-size: 0; border-radius: var(--r-sm); }
}
@media (prefers-color-scheme: dark) {
  @supports (-webkit-appearance: -apple-pay-button) { :root:not([data-theme="light"]) .kc-pay-apple { -apple-pay-button-style: white; } }
}
@supports (-webkit-appearance: -apple-pay-button) { :root[data-theme="dark"] .kc-pay-apple { -apple-pay-button-style: white; } }
.kc-pay-stc, .kc-pay-sadad, .kc-pay-voucher, .kc-pay-wallet { display: flex; flex-direction: column; gap: var(--sp-3); }
.kc-pay-line { display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: center; }
.kc-pay-voucher .kc-pay-line .kc-fld-input { flex: 1; min-inline-size: 0; }
.kc-pay-wallet { padding: var(--sp-6) var(--sp-7); border: var(--bw) solid var(--line); border-radius: var(--r-md); background: var(--panel); }
.kc-pay-wallet .kc-pay-balance { font-size: var(--fs-h2); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.kc-pay-note { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.kc-pbar { appearance: none; -webkit-appearance: none; inline-size: 100%; block-size: 8px; border: 0; border-radius: var(--r-xs); background: var(--chip); overflow: hidden; accent-color: var(--accent); }
.kc-pbar::-webkit-progress-bar { background: var(--chip); border-radius: var(--r-xs); }
.kc-pbar::-webkit-progress-value { background: var(--accent); border-radius: var(--r-xs); }
.kc-pbar::-moz-progress-bar { background: var(--accent); border-radius: var(--r-xs); }

/* ===== Loaders: KC-LOAD-* ===== */
.kc-load-text { font-size: var(--fs-sm); color: var(--muted); }
.kc-load-spin { display: inline-block; inline-size: 14px; block-size: 14px; border: 2px solid var(--line); border-block-start-color: var(--accent); border-radius: 50%; vertical-align: -2px; animation: kc-spin .8s linear infinite; }
@keyframes kc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .kc-load-spin { animation-duration: 3s; } .kc-chat-reason > summary::after { transition: none; } }

/* ===== Responsive ===== */
@media (max-width: 1100px) {
  /* the side panel overlays the chat instead of sharing the row */
  .kc-base-split.is-panel { grid-template-columns: minmax(0, 1fr); }
  .kc-base-split.is-panel .kc-panel-shell { position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: min(100%, var(--panel-w)); z-index: 10; box-shadow: var(--shadow-menu); }
  .kc-base-split.is-panel.is-full .kc-panel-shell { inline-size: 100%; }
  .kc-base-split.is-panel.is-full .kc-chat-pane { display: flex; }
}
@media (max-width: 599px) {
  :root { --chat-max: 100%; --ans-graph-h: clamp(300px, 46vh, 400px); }
  .kc-nav-menubtn { display: inline-flex; }
  .kc-base-split.is-panel .kc-panel-shell { inline-size: 100%; }
  .kc-chat-log { padding-block-start: var(--sp-6); }
  .kc-chat-q { max-inline-size: 92%; }
  .kc-chat-empty { padding-block-start: var(--sp-8); }
  .kc-chat-form { padding-inline-start: var(--sp-7); }
  .kc-ans-head, .kc-ans-body, .kc-ans-foot { padding-inline: var(--sp-6); }
  .kc-hdr-bar { padding-inline: var(--sp-6); }
  .kc-hdr-bar > .kc-btn-default:not(.kc-nav-menubtn) { display: none; }
}
.kc-hdr-title, .kc-chat-q, .kc-side-conv, .kc-ans-title, .kc-rec-title { unicode-bidi: plaintext; }

/* ===== File picker: KC-FLD-FILE ===== */
.kc-fld-file { position: relative; display: flex; align-items: center; gap: var(--sp-5); inline-size: 100%; box-sizing: border-box; padding: var(--sp-3) var(--sp-5); border: var(--bw) solid var(--line); border-radius: var(--r-md); background: var(--panel); cursor: pointer; }
.kc-fld-file-input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; overflow: hidden; }
.kc-fld-file-btn { padding: var(--sp-2) var(--sp-6); border: var(--bw) solid var(--line); border-radius: var(--r-pill); background: var(--bg); color: var(--ink); font-size: var(--fs-md); font-weight: var(--fw-semibold); white-space: nowrap; }
.kc-fld-file-name { color: var(--muted); font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-inline-size: 0; unicode-bidi: plaintext; }
.kc-fld-file.is-filled .kc-fld-file-name { color: var(--ink); }
.kc-fld-file:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.kc-fld-file:hover .kc-fld-file-btn { border-color: var(--accent); }

/* ===== Icons (ported) ===== */
/* Ported from unified-apis docs/30_marketing/brand/design-system/icons/*.svg and the .ico mask mechanism in
   static/css/alter-mal.css. First-party Alter-Mal artwork (licence confirmed by the sponsor: Alter-Mal first-party).
   <i class="kc-ico-icon kc-ico-NAME" aria-hidden="true"></i>: 24px line drawings drawn in the text colour.
   Directional icons (arrows, chevrons) mirror in right-to-left. */
.kc-ico-icon{display:inline-block;flex:none;width:var(--ico-size,16px);height:var(--ico-size,16px);vertical-align:-3px;
  background-color:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.kc-ico-icon.is-sm{--ico-size:12px}.kc-ico-icon.is-md{--ico-size:18px}.kc-ico-icon.is-lg{--ico-size:22px}
:root[dir="rtl"] .kc-ico-arrow-left,:root[dir="rtl"] .kc-ico-arrow-right,:root[dir="rtl"] .kc-ico-chevron-right,
:root[dir="rtl"] .kc-ico-turn{transform:scaleX(-1)}
.kc-ico-alert{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.2L2.5 18a2 2 0 0 0 1.7 3h15.6a2 2 0 0 0 1.7-3L13.7 4.2a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9.5v4.5M12 17.5h.01'/%3E%3C/svg%3E")}
.kc-ico-arrow-down{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6.5 13.5L12 19l5.5-5.5'/%3E%3C/svg%3E")}
.kc-ico-arrow-left{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12H5M10 6.5L4.5 12l5.5 5.5'/%3E%3C/svg%3E")}
.kc-ico-arrow-right{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M14 6.5l5.5 5.5-5.5 5.5'/%3E%3C/svg%3E")}
.kc-ico-arrow-up{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M6.5 10.5L12 5l5.5 5.5'/%3E%3C/svg%3E")}
.kc-ico-ask{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-12 7.6L3 21l1.9-5.7A8.5 8.5 0 1 1 21 11.5z'/%3E%3C/svg%3E")}
.kc-ico-banknote{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='20' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Cpath d='M6 12h.01M18 12h.01'/%3E%3C/svg%3E")}
.kc-ico-board{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13h18M6 13v6M18 13v6'/%3E%3Ccircle cx='7' cy='7' r='2'/%3E%3Ccircle cx='12' cy='6.5' r='2'/%3E%3Ccircle cx='17' cy='7' r='2'/%3E%3C/svg%3E")}
.kc-ico-book{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5A2.5 2.5 0 0 1 6.5 3H20v15H6.5A2.5 2.5 0 0 0 4 20.5z'/%3E%3Cpath d='M4 20.5A2.5 2.5 0 0 0 6.5 23H20'/%3E%3C/svg%3E")}
.kc-ico-branch{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='5.5' r='2.2'/%3E%3Ccircle cx='6' cy='18.5' r='2.2'/%3E%3Ccircle cx='18' cy='8' r='2.2'/%3E%3Cpath d='M6 7.7v8.6M18 10.2c0 4-4 4.6-10 7.2'/%3E%3C/svg%3E")}
.kc-ico-bulb{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0 0 12 3z'/%3E%3C/svg%3E")}
.kc-ico-calc{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Cpath d='M8 7h8M8.5 12h1M12 12h1M15.5 12h.01M8.5 16h1M12 16h1M15.5 16h.01'/%3E%3C/svg%3E")}
.kc-ico-chart{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16M7.5 16.5v-5M12 16.5V7M16.5 16.5V10'/%3E%3C/svg%3E")}
.kc-ico-check-bold{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12 10 17 19 7'/%3E%3C/svg%3E")}
.kc-ico-check-circle{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.8 2.8L16 10'/%3E%3C/svg%3E")}
.kc-ico-check-square{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='3'/%3E%3Cpath d='M8 12.3l2.8 2.8L16 9.6'/%3E%3C/svg%3E")}
.kc-ico-check{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12 10 17 19 7'/%3E%3C/svg%3E")}
.kc-ico-chevron-down{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
.kc-ico-chevron-right{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E")}
.kc-ico-chevron-up{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E")}
.kc-ico-clock{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.2 2'/%3E%3C/svg%3E")}
.kc-ico-coin{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M14.5 9.2c-.5-.8-1.4-1.2-2.5-1.2-1.4 0-2.5.8-2.5 2s1 1.7 2.5 2 2.5.8 2.5 2-1.1 2-2.5 2c-1.1 0-2-.4-2.5-1.2M12 6v2M12 16v2'/%3E%3C/svg%3E")}
.kc-ico-connect{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3v4M15 3v4M6.5 7h11v3.5a5.5 5.5 0 0 1-11 0V7zM12 16v5'/%3E%3C/svg%3E")}
.kc-ico-cursor{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3l6 17 2.5-7L21 10.5z'/%3E%3C/svg%3E")}
.kc-ico-down{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19L5 7h14z' fill='black'/%3E%3C/svg%3E")}
.kc-ico-etl{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7.5h13M14 4.5l3 3-3 3M20 16.5H7M10 13.5l-3 3 3 3'/%3E%3C/svg%3E")}
.kc-ico-eye{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='2.8'/%3E%3C/svg%3E")}
.kc-ico-fetch{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17.5a4.5 4.5 0 0 1-.6-8.96A6 6 0 0 1 17.8 8a4.5 4.5 0 0 1 .7 9'/%3E%3Cpath d='M12 11v10M8.8 17.8L12 21l3.2-3.2'/%3E%3C/svg%3E")}
.kc-ico-firm{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V7l7-4 7 4v14'/%3E%3Cpath d='M9 21v-5h6v5'/%3E%3Cpath d='M9 10h.01M12 10h.01M15 10h.01M9 13h.01M12 13h.01M15 13h.01'/%3E%3C/svg%3E")}
.kc-ico-flag{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 21V4M5.5 4h12l-2.5 4 2.5 4h-12'/%3E%3C/svg%3E")}
.kc-ico-gauge{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 17.5a8.5 8.5 0 1 1 17 0'/%3E%3Cpath d='M12 17.5l4.2-5.2'/%3E%3Ccircle cx='12' cy='17.5' r='1'/%3E%3C/svg%3E")}
.kc-ico-gear{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3M5.3 5.3l2.1 2.1M16.6 16.6l2.1 2.1M5.3 18.7l2.1-2.1M16.6 7.4l2.1-2.1'/%3E%3C/svg%3E")}
.kc-ico-help{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.7.4-1 1-1 1.7M12 17h.01'/%3E%3C/svg%3E")}
.kc-ico-home{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-8 9 8M5 9.5V20h14V9.5M10 20v-6h4v6'/%3E%3C/svg%3E")}
.kc-ico-info{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E")}
.kc-ico-key{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4.2'/%3E%3Cpath d='M11 12l9-9M16.5 6.5l3 3M14 9l2 2'/%3E%3C/svg%3E")}
.kc-ico-list{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h12M9 12h12M9 18h12'/%3E%3Cpath d='M4 6h.01M4 12h.01M4 18h.01'/%3E%3C/svg%3E")}
.kc-ico-lock{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E")}
.kc-ico-log{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8.5L18 6.5V21H6z'/%3E%3Cpath d='M14 3v4h4M9 12h6M9 16h6'/%3E%3C/svg%3E")}
.kc-ico-mail{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2'/%3E%3Cpath d='M3.5 7l8.5 6 8.5-6'/%3E%3C/svg%3E")}
.kc-ico-menu{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E")}
.kc-ico-panel{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M9 4v16'/%3E%3C/svg%3E")}
.kc-ico-pie{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12A9 9 0 1 1 12 3v9z'/%3E%3Cpath d='M15 3.5A9 9 0 0 1 20.5 9H15z'/%3E%3C/svg%3E")}
.kc-ico-pin{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6l-1 6 4 4H6l4-4z'/%3E%3Cpath d='M12 13v8'/%3E%3C/svg%3E")}
.kc-ico-refresh{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 0 0-14.9-3.5M4 4v3.5h3.5M4 13a8 8 0 0 0 14.9 3.5M20 20v-3.5h-3.5'/%3E%3C/svg%3E")}
.kc-ico-rename{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h9M4 12h6M4 17h9M16 9l4 3-4 3'/%3E%3C/svg%3E")}
.kc-ico-robot{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='8' width='16' height='12' rx='3'/%3E%3Cpath d='M12 4v4M9.5 17h5M2 13v3M22 13v3'/%3E%3Ccircle cx='12' cy='3' r='1'/%3E%3Ccircle cx='9' cy='13' r='1.2'/%3E%3Ccircle cx='15' cy='13' r='1.2'/%3E%3C/svg%3E")}
.kc-ico-rows{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h10'/%3E%3C/svg%3E")}
.kc-ico-scale{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M7 21h10M5 7h14'/%3E%3Cpath d='M2 14l3-7 3 7a3 3 0 0 1-6 0z'/%3E%3Cpath d='M16 14l3-7 3 7a3 3 0 0 1-6 0z'/%3E%3C/svg%3E")}
.kc-ico-search{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.3-4.3'/%3E%3C/svg%3E")}
.kc-ico-share{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpolyline points='8 7 12 3 16 7'/%3E%3Cpath d='M8 11H6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2'/%3E%3C/svg%3E")}
.kc-ico-shield-check{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/%3E%3Cpolyline points='8.5 12 11 14.5 15.5 10'/%3E%3C/svg%3E")}
.kc-ico-shield{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/%3E%3C/svg%3E")}
.kc-ico-source{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='6.5' rx='1.5'/%3E%3Crect x='4' y='13.5' width='16' height='6.5' rx='1.5'/%3E%3Cpath d='M8 7.3h.01M8 16.8h.01'/%3E%3C/svg%3E")}
.kc-ico-stage{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l9 5-9 5-9-5 9-5z'/%3E%3Cpath d='M3 12.5l9 5 9-5'/%3E%3Cpath d='M3 16.5l9 5 9-5'/%3E%3C/svg%3E")}
.kc-ico-start{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10 8.5l5.2 3.5-5.2 3.5z'/%3E%3C/svg%3E")}
.kc-ico-store{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5.5' rx='7.5' ry='2.8'/%3E%3Cpath d='M4.5 5.5v13c0 1.5 3.4 2.8 7.5 2.8s7.5-1.3 7.5-2.8v-13M4.5 12c0 1.5 3.4 2.8 7.5 2.8s7.5-1.3 7.5-2.8'/%3E%3C/svg%3E")}
.kc-ico-table{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='15' rx='1.5'/%3E%3Cpath d='M3.5 9.5h17M3.5 14.5h17M9.5 9.5v10'/%3E%3C/svg%3E")}
.kc-ico-tag{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.5V4h8.5l8.5 8.5-8.5 8.5z'/%3E%3Ccircle cx='8' cy='8.5' r='1.3'/%3E%3C/svg%3E")}
.kc-ico-target{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3C/svg%3E")}
.kc-ico-trash{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M9 7V4.5h6V7M6.5 7l1 13h9l1-13'/%3E%3C/svg%3E")}
.kc-ico-trend{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 17 9 11 13 15 21 7'/%3E%3Cpolyline points='15 7 21 7 21 13'/%3E%3C/svg%3E")}
.kc-ico-turn{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.34-5.66L20 8.5'/%3E%3Cpolyline points='20 3.5 20 8.5 15 8.5'/%3E%3C/svg%3E")}
.kc-ico-type{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 6h8M9 6v12M14 12h5M16.5 12v6'/%3E%3C/svg%3E")}
.kc-ico-unfold{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9l5-5 5 5M7 15l5 5 5-5'/%3E%3C/svg%3E")}
.kc-ico-unlock{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 7.6-1.7'/%3E%3C/svg%3E")}
.kc-ico-up{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5l7 12H5z' fill='black'/%3E%3C/svg%3E")}
.kc-ico-user{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.8'/%3E%3Cpath d='M4.5 20.5c1.2-4 4-6 7.5-6s6.3 2 7.5 6'/%3E%3C/svg%3E")}
.kc-ico-wait{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3h11M6.5 21h11M7.5 3c0 5.5 9 5.5 9 9s-9 3.5-9 9M16.5 3c0 5.5-9 5.5-9 9s9 3.5 9 9'/%3E%3C/svg%3E")}
.kc-ico-wallet{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='3'/%3E%3Cpath d='M6 7l10-3v3'/%3E%3Cpath d='M16.5 13.5h.01'/%3E%3C/svg%3E")}
.kc-ico-worker{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='7' width='10' height='10' rx='1.5'/%3E%3Cpath d='M10 3v4M14 3v4M10 17v4M14 17v4M3 10h4M3 14h4M17 10h4M17 14h4'/%3E%3C/svg%3E")}
.kc-ico-x-bold{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")}
.kc-ico-x-circle{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9 9l6 6M15 9l-6 6'/%3E%3C/svg%3E")}
.kc-ico-x{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")}
.kc-ico-zap{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 3L5 13.5h6L10 21l8-10.5h-6z'/%3E%3C/svg%3E")}

/* ===== Ported component styles (unified-apis static/css/alter-mal.css) ===== */
/* KC-MSG-WARN variants: ported from .note (message box, icon and border in the status colour, text stays body colour) */
.kc-msg-warn.is-info { background: var(--info-tint); border-color: var(--info); }
.kc-msg-warn.is-ok { background: var(--ok-tint); border-color: var(--ok); }
.kc-msg-warn.is-bad { background: var(--bad-tint); border-color: var(--bad); }
/* KC-EMPTY-STATE: ported from .empty-state */
.kc-empty-state { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); text-align: center; padding: 28px 20px;
  border: 1.5px dashed var(--line); border-radius: var(--r-lg); background: var(--panel); color: var(--muted); }
.kc-empty-state .kc-ico-icon { color: var(--accent); }
.kc-empty-state-icon { display: inline-grid; place-items: center; inline-size: 42px; block-size: 42px; border-radius: 50%; background: var(--accent-bg); color: var(--accent); }
/* KC-BDG-AILABEL: ported from .ai-label; colour plus a word, never colour alone */
.kc-bdg-ailabel { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  border-radius: 5px; padding: 0 6px; color: var(--lc, var(--muted)); background: color-mix(in srgb, var(--lc, var(--muted)) 14%, transparent); }
.kc-bdg-ailabel.is-calculated { --lc: var(--ok); }
.kc-bdg-ailabel.is-estimated { --lc: var(--warn); }
.kc-bdg-ailabel.is-explained { --lc: var(--muted); }
.kc-bdg-ailabel.is-suggested { --lc: var(--info); }
/* KC-TBL-DATA: ported from .c-rows and .n (figures line up by digit) */
.kc-tbl-data { inline-size: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.kc-tbl-data th { text-align: start; color: var(--muted); font-weight: var(--fw-semibold); padding: var(--sp-4) var(--sp-5); border-block-end: var(--bw) solid var(--line); }
.kc-tbl-data td { padding: var(--sp-4) var(--sp-5); border-block-end: var(--bw) solid var(--line); }
.kc-tbl-data .n, .kc-tbl-data td.is-num { text-align: end; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
/* Avatar status dot: ported from .sb-user .av::after */
.kc-side-avatar.is-online { position: relative; }
.kc-side-avatar.is-online::after { content: ""; position: absolute; inset-block-end: -2px; inset-inline-end: -2px; inline-size: 10px; block-size: 10px;
  border-radius: 50%; background: var(--ok); border: 2px solid var(--side); }
/* Input focus ring: ported from .input focus (border + soft ring) */
.kc-form-input:focus, .kc-form-select:focus, .kc-form-textarea:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }

/* Class colour dots (legend, steps): colour from the --graph-node-* tokens */
.kc-gdot{color:var(--graph-node-other)}
.kc-gdot[data-cls="body"]{color:var(--graph-node-body)}
.kc-gdot[data-cls="authority"]{color:var(--graph-node-authority)}
.kc-gdot[data-cls="threshold"]{color:var(--graph-node-threshold)}
.kc-gdot[data-cls="metric"]{color:var(--graph-node-metric)}
.kc-gdot[data-cls="document"]{color:var(--graph-node-document)}
.kc-gdot[data-cls="policy"]{color:var(--graph-node-policy)}
.kc-gdot[data-cls="documentversion"]{color:var(--graph-node-documentversion)}
.kc-gdot[data-cls="meeting"]{color:var(--graph-node-meeting)}
.kc-gdot[data-cls="matter"]{color:var(--graph-node-matter)}
.kc-gdot[data-cls="recommendation"]{color:var(--graph-node-recommendation)}
.kc-gdot[data-cls="decision"]{color:var(--graph-node-decision)}
.kc-gdot[data-cls="action"]{color:var(--graph-node-action)}
.kc-gdot[data-cls="party"]{color:var(--graph-node-party)}
.kc-gdot[data-cls="other"]{color:var(--graph-node-other)}
.kc-graph-legend-row{display:flex;flex-wrap:wrap;gap:var(--sp-3)}

/* ===== Chat shell details ===== */
.kc-chat-tools { position: relative; }
.kc-chat-tools .kc-pop-menu { inset-block-end: calc(100% + var(--sp-3)); inset-inline-start: 0; }
.kc-graph-right.is-info-only .kc-graph-wrap, .kc-graph-right.is-info-only .kc-graph-legend { display: none; }
.kc-graph-right.is-info-only .kc-card-info { block-size: auto; flex: 1; border-block-start: 0; }
.kc-panel-shell .kc-graph-right[hidden], .kc-panel-shell [hidden] { display: none !important; }
.kc-rec-card .kc-bdg-chips { margin-block: var(--sp-3); }
.kc-chat-a .kc-msg-warn { margin-block: var(--sp-5); }
.kc-side-conv .kc-ico-icon { margin-inline-end: var(--sp-2); }
.kc-nav-item .kc-ico-icon { --ico-size: 18px; }
.kc-chat-q .kc-chat-attach { display: flex; margin-block-end: var(--sp-3); }
.kc-tbl-data a, .kc-tbl-data .kc-txt-link { cursor: pointer; }
.kc-ans-toolwrap { position: relative; display: inline-block; }
.kc-ans-toolwrap .kc-pop-menu { inset-block-start: calc(100% + var(--sp-2)); inset-inline-start: 0; }
.kc-tbl-scroll { overflow-x: auto; }
.kc-chat-prose { min-block-size: 1em; }
.kc-ans-tools { align-items: center; }
.kc-ans-tools .kc-btn-default { display: inline-flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-md); }
.kc-ans-tools svg { inline-size: 16px; block-size: 16px; flex: none; }

/* ---- Welcome home screen (empty chat) ---- */
.kc-home { text-align: start; max-inline-size: 760px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--sp-8); }
.kc-home-head { font-size: 22px; line-height: 1.35; margin: 0; font-weight: var(--fw-semibold); }
.kc-home-head span:last-child { color: var(--muted); font-weight: var(--fw-regular, 400); }
.kc-home-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-6); }
.kc-home-tile { font: inherit; color: var(--ink); text-align: start; display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-6) var(--sp-7); background: var(--panel); border: var(--bw) solid var(--line); border-inline-start: var(--bw-accent) solid var(--line); border-radius: var(--r-lg); cursor: pointer; box-shadow: var(--shadow-card); }
.kc-home-tile.is-warn { background: var(--warn-tint); border-inline-start-color: var(--warn); }
.kc-home-tile.is-danger { background: var(--bad-tint); border-inline-start-color: var(--bad); }
.kc-home-tile.is-info { background: var(--info-tint); border-inline-start-color: var(--info); }
.kc-home-tile.is-calm { cursor: default; box-shadow: none; opacity: .9; }
.kc-home-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kc-home-tile-count { font-size: var(--fs-kpi); font-weight: var(--fw-bold); line-height: 1.2; font-variant-numeric: tabular-nums; }
.kc-home-tile.is-calm .kc-home-tile-count { color: var(--ok); }
.kc-home-tile-label { font-size: var(--fs-sm); color: var(--ink); }
.kc-home-panel { display: flex; flex-direction: column; gap: var(--sp-6); }
.kc-home-panel-title { font-size: var(--fs-h2); margin: 0; }
.kc-home-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--sp-6); }
.kc-home-card { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-8); background: var(--panel); border: var(--bw) solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-card); }
.kc-home-card-cat { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.kc-home-card-text { margin: 0; font-size: var(--fs-md); line-height: 1.5; }
.kc-home-card-text b { font-weight: var(--fw-bold); }
.kc-home-card-fig { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.kc-home-fig-num { font-size: 34px; font-weight: var(--fw-bold); line-height: 1.1; font-variant-numeric: tabular-nums; }
.kc-home-card-fig.is-up .kc-home-fig-num { color: var(--bad); }
.kc-home-fig-label { font-size: var(--fs-sm); color: var(--muted); }
.kc-home-card-actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-block-start: auto; }
.kc-home-empty { margin: 0; color: var(--muted); text-align: center; padding-block: var(--sp-8); }
.kc-chat-empty.has-home > h2, .kc-chat-empty.has-home > p { display: none; }
@media (max-width: 599px) { .kc-home-head { font-size: 19px; } .kc-home-tiles { grid-template-columns: repeat(2, 1fr); } .kc-home-cards { grid-template-columns: 1fr; } }

/* Files view: filters, and the version history folded under a document */
.kc-files-history { margin: 0; padding-inline-start: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-3); }
.kc-files-history .kc-txt-meta { margin-inline-start: var(--sp-4); }
#vfiles > .kc-base-row { flex-wrap: wrap; gap: var(--sp-4); margin-block-end: var(--sp-4); }
#vfiles > .kc-base-row .kc-fld-input { flex: 1 1 200px; min-inline-size: 0; }

/* Suggestions and the chat footnote scale with the chat box */
.kc-chat-suggest .kc-seg-item { font-size: clamp(11px, 1.4vw, var(--fs-sm)); padding: 2px 10px; }
.kc-chat-suggest-list .kc-btn-suggest { font-size: clamp(11px, 1.4vw, var(--fs-sm)); padding: 3px 10px; min-block-size: 0; line-height: 1.4; }
.kc-chat-dock .kc-txt-meta { font-size: clamp(10px, 1.3vw, var(--fs-sm)); }

/* Idle sign-out notice */
#idlenote { position: fixed; inset-block-end: var(--sp-6); inset-inline: var(--sp-6); margin-inline: auto; max-inline-size: 520px; z-index: 50; box-shadow: var(--shadow-menu); background: var(--panel); }

/* KC-TXT-FOOTNOTE: page footnote on every screen, shown in Arabic only (how node names were Arabised) */
.kc-txt-footnote { flex: none; margin: 0; padding: var(--sp-1) var(--sp-4); font-size: clamp(10px, 1.2vw, var(--fs-sm)); color: var(--muted); border-block-start: 1px solid var(--border); text-align: center; }
:root:not([lang="ar"]) .kc-txt-footnote { display: none; }

/* KC-BRAND-LOGO: the owner's artwork, unaltered: no chip, padding, recolour or reshaping (docs/KRAG_BRAND_MARKS.md).
   Width follows the artwork's own aspect ratio; only the height is set. */
.kc-brand-logo { display: inline-block; flex: none; block-size: 20px; inline-size: auto; vertical-align: middle; }
.kc-brand-logo.is-sm { block-size: 16px; }
/* Payment marks in one list share one height (Apple: the Apple Pay mark must not be smaller than the other marks) */
.kc-pay-method .kc-brand-logo { block-size: 24px; margin-inline-end: var(--sp-2); }

/* KC-NAME-SRC, KC-NAME-EDIT, KC-NAME-HIST: Arabic names view */
.kc-name-src { display: inline-block; padding: 1px var(--sp-8, 8px); border-radius: 999px; background: var(--chip); color: var(--muted); font-size: .8125rem; white-space: nowrap; }
.kc-name-src.is-override { color: var(--warn); }
.kc-name-src.is-actual { color: var(--ok); }
.kc-name-edit { display: flex; flex-wrap: wrap; gap: var(--sp-4, 4px); align-items: center; min-inline-size: 16rem; }
.kc-name-edit .kc-fld-input { flex: 1 1 12rem; min-inline-size: 0; }
.kc-name-edit .kc-msg-err { flex-basis: 100%; }
.kc-name-hist { margin: 0; padding-inline-start: 1.25rem; display: grid; gap: var(--sp-8, 8px); }
.kc-bdg-status.is-reviewed, .kc-bdg-status.is-approved { color: var(--ok); }
.kc-bdg-status.is-overridden { color: var(--warn); }
.kc-bdg-status.is-missing, .kc-bdg-status.is-retired { color: var(--bad); }

/* Phone: the open graph (explorer or expanded answer) gets a usable height; the record or legend below scrolls */
@media (max-width: 599px) {
  .kc-graph-right .kc-graph-wrap { flex: none; block-size: max(320px, 48vh); }
}

/* Steps tree: no guide lines; the secondary group ("Further sources") sits under a divider, in normal weight, without a number */
.kc-step-item.has-divider { margin-block-start: var(--sp-6); padding-block-start: var(--sp-3); border-block-start: var(--bw) solid var(--line); }
.kc-step-item.is-secondary .kc-step-label { font-weight: var(--fw-normal, 400); }
.kc-step-item.is-secondary .kc-step-kind, .kc-step-item.is-secondary .kc-step-rel { font-weight: var(--fw-normal, 400); }

/* Chat history rows: the conversation button and a two-step delete */
.kc-side-row { display: flex; align-items: center; gap: var(--sp-2); }
.kc-side-row .kc-side-conv { flex: 1; min-inline-size: 0; inline-size: auto; }
.kc-side-del { flex: none; border: 0; background: none; color: var(--muted); font: inherit; font-size: var(--fs-sm); padding: var(--sp-2) var(--sp-4); border-radius: var(--r-sm); cursor: pointer; opacity: .6; }
.kc-side-del:hover, .kc-side-del:focus-visible, .kc-side-del.is-armed { opacity: 1; background: var(--chip); }
.kc-side-del.is-armed { color: var(--bad); }
.kc-side-del:focus-visible { outline: var(--focus-ring); outline-offset: 1px; }
/* Findings and actions: follow-up flags and finding states (the text label always says it too) */
.kc-bdg-status.is-overdue { color: var(--bad); }
.kc-bdg-status.is-due_soon, .kc-bdg-status.is-in_remediation, .kc-bdg-status.is-no_owner, .kc-bdg-status.is-no_due_date { color: var(--warn); }
.kc-bdg-status.is-closed { color: var(--ok); }

/* ===== KC-DOC: document kit pages (tools/kit/kit.js) =====
   Pages are written as content only; the kit draws them with these components. Tokens only, logical properties only,
   so light, dark and RTL (Arabic) follow the tokens and the dir of the page. */
.kc-doc-body { margin: 0; background: var(--bg); color: var(--ink); font: var(--fs-base)/var(--lh-base) var(--font-sans); }
:root[lang="ar"] .kc-doc-body { font-family: var(--font-ar); }
.kc-doc-page { max-inline-size: var(--doc-max); margin-inline: auto; padding: var(--sp-10) var(--gutter); padding-block-end: calc(var(--sp-10) * 2); }
.kc-doc-page h2 { font-size: var(--fs-h2-page); margin: var(--sp-10) 0 var(--sp-4); }
.kc-doc-page h3 { font-size: var(--fs-h3); margin: var(--sp-9) 0 var(--sp-3); }
.kc-doc-page h4 { font-size: var(--fs-md); color: var(--muted); margin: var(--sp-8) 0 var(--sp-3); }
.kc-doc-page p, .kc-doc-page ul, .kc-doc-page ol { margin: 0 0 var(--sp-6); }
.kc-doc-page ul, .kc-doc-page ol { padding-inline-start: var(--sp-10); }
.kc-doc-page a { color: var(--accent); }
.kc-doc-page code { font-family: var(--font-mono); font-size: .92em; background: var(--chip); padding: 0 var(--sp-2); border-radius: var(--r-xs); }
.kc-doc-page pre { background: var(--panel); border: var(--bw) solid var(--line); border-radius: var(--r-md); padding: var(--sp-6) var(--sp-7); overflow-x: auto; }
.kc-doc-page pre code { background: none; padding: 0; }
.kc-doc-page blockquote { margin: 0 0 var(--sp-6); padding: var(--sp-3) var(--sp-7); border-inline-start: var(--bw-accent) solid var(--line); color: var(--muted); }
.kc-doc-page hr { border: 0; border-block-start: var(--bw) solid var(--line); margin-block: var(--sp-10); }
.kc-doc-page :focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.kc-doc-head { margin-block-end: var(--sp-8); }
.kc-doc-title { font-size: var(--fs-kpi); line-height: 1.25; margin: var(--sp-3) 0; }
.kc-doc-lede { color: var(--muted); font-size: var(--fs-lg); margin: 0; }
.kc-doc-ref { font-family: var(--font-mono); font-size: var(--fs-sm); background: var(--accent-bg); color: var(--accent); padding: 0 var(--sp-3); border-radius: var(--r-xs); white-space: nowrap; text-decoration: none; }
.kc-doc-page .kc-kpi-grid { margin-block: var(--sp-6); }
.kc-doc-page .kc-kpi-delta .kc-ico-icon, .kc-doc-page .kc-bdg-status .kc-ico-icon { --ico-size: 12px; vertical-align: 0; }
.kc-doc-page .kc-bdg-status { display: inline-flex; align-items: center; gap: var(--sp-2); white-space: nowrap; }
.kc-doc-page .kc-msg-warn { margin-block: var(--sp-5); }
.kc-doc-page .kc-msg-warn .kc-ico-icon { flex: none; margin-block-start: var(--sp-1); }
/* Document kit status words on the status pill (the icon and the word say it; colour only supports it) */
.kc-bdg-status.is-done, .kc-bdg-status.is-ok { color: var(--ok); }
.kc-bdg-status.is-progress { color: var(--info); }
.kc-bdg-status.is-todo { color: var(--muted); }
.kc-bdg-status.is-blocked, .kc-bdg-status.is-fail { color: var(--bad); }
.kc-bdg-status.is-warn { color: var(--warn); }
/* Table */
.kc-doc-table { overflow-x: auto; border: var(--bw) solid var(--line); border-radius: var(--r-md); background: var(--panel); margin-block: var(--sp-6); }
.kc-doc-table .kc-tbl-data { min-inline-size: var(--doc-table-min); }
.kc-doc-table .kc-tbl-data th { white-space: nowrap; }
.kc-doc-table .kc-tbl-data td { vertical-align: top; }
.kc-doc-table .kc-tbl-data th.is-num { text-align: end; }
.kc-doc-table .kc-tbl-data tr:last-child td { border-block-end: 0; }
.kc-doc-table .kc-tbl-data tr.is-hot td { background: var(--bad-tint); }
.kc-doc-bar { display: flex; gap: var(--sp-1); padding: var(--sp-4) var(--sp-5) 0; }
.kc-doc-seg { flex: 1; block-size: var(--sp-4); border-radius: var(--r-pill); background: var(--muted); }
.kc-doc-seg.is-done, .kc-doc-seg.is-ok { background: var(--ok); }
.kc-doc-seg.is-progress { background: var(--info); }
.kc-doc-seg.is-warn { background: var(--warn); }
.kc-doc-seg.is-blocked, .kc-doc-seg.is-fail { background: var(--bad); }
/* Steps */
.kc-doc-steps { list-style: none; counter-reset: kdoc-step; margin: var(--sp-6) 0; padding: 0; display: grid; gap: var(--sp-5); }
.kc-doc-page .kc-doc-steps { padding-inline-start: 0; }
.kc-doc-step { counter-increment: kdoc-step; display: flex; gap: var(--sp-6); align-items: flex-start; }
.kc-doc-step::before { content: counter(kdoc-step); flex: none; display: grid; place-items: center; inline-size: var(--avatar-size); block-size: var(--avatar-size); border-radius: 50%; background: var(--accent); color: var(--on-accent); font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.kc-doc-step-title { font-weight: var(--fw-semibold); }
.kc-doc-step-detail { color: var(--muted); font-size: var(--fs-md); }
/* Diagram (the drawing keeps its left-to-right layering in RTL pages) */
.kc-doc-dgm { margin-block: var(--sp-6); }
.kc-doc-dgm > h3 { margin-block-start: 0; }
.kc-doc-dgm-scroll { overflow-x: auto; }
.kc-doc-dgm-svg { display: block; max-inline-size: none; }
.kc-doc-dgm-box { fill: var(--panel); stroke: var(--accent); stroke-width: var(--bw-accent); }
.kc-doc-dgm-box.is-db, .kc-doc-dgm-box.is-user { fill: var(--accent-bg); }
.kc-doc-dgm-box.is-queue { stroke: var(--warn); }
.kc-doc-dgm-box.is-cache { stroke: var(--ok); }
.kc-doc-dgm-box.is-ext { stroke: var(--muted); stroke-dasharray: 6 4; }
.kc-doc-dgm-text { fill: var(--ink); font: var(--fs-md) var(--font-sans); }
.kc-doc-dgm-edge { fill: none; stroke: var(--muted); stroke-width: var(--bw-accent); }
.kc-doc-dgm-arrow { fill: var(--muted); }
.kc-doc-dgm-lab { fill: var(--panel); stroke: var(--line); stroke-width: var(--bw); }
.kc-doc-dgm-labt { fill: var(--muted); font: var(--fs-sm) var(--font-sans); }
/* Tree */
.kc-doc-tree { margin-block: var(--sp-6); }
.kc-doc-tree-tools { display: flex; gap: var(--sp-4); margin-block-end: var(--sp-4); }
.kc-doc-tree-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); }
.kc-doc-tree-row .kc-txt-meta { margin: 0; }
summary.kc-doc-tree-row { cursor: pointer; list-style: none; }
summary.kc-doc-tree-row::-webkit-details-marker { display: none; }
summary.kc-doc-tree-row:hover { background: var(--chip); }
summary.kc-doc-tree-row::before { content: ""; flex: none; inline-size: var(--sp-3); block-size: var(--sp-3); border-inline-end: var(--bw-accent) solid var(--muted); border-block-end: var(--bw-accent) solid var(--muted); transform: rotate(-45deg); }
.kc-doc-tree-branch[open] > summary.kc-doc-tree-row::before { transform: rotate(45deg); }
[dir="rtl"] .kc-doc-tree-branch:not([open]) > summary.kc-doc-tree-row::before { transform: rotate(135deg); }
.kc-doc-tree-leaf { padding-inline-start: calc(var(--sp-4) + var(--sp-3) + var(--sp-4)); }
.kc-doc-tree-title { font-weight: var(--fw-semibold); }
.kc-doc-tree-kids { margin-inline-start: var(--sp-6); padding-inline-start: var(--sp-4); border-inline-start: var(--bw) solid var(--line); }
/* Filter, board and board card */
.kc-doc-filter { display: inline-block; margin-inline-end: var(--sp-8); margin-block: var(--sp-3); }
.kc-doc-filter .kc-fld-select { inline-size: auto; min-inline-size: 160px; }
.kc-doc-board { display: flex; gap: var(--sp-6); align-items: flex-start; overflow-x: auto; margin-block: var(--sp-6); padding-block-end: var(--sp-4); }
.kc-doc-lane { flex: 1 0 var(--doc-lane-w); min-inline-size: var(--doc-lane-w); background: var(--side); border-radius: var(--r-lg); padding: var(--sp-5); }
.kc-doc-lane-head { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-md); margin: 0 0 var(--sp-4); }
.kc-doc-lane-body { display: grid; gap: var(--sp-4); }
.kc-doc-bcard { background: var(--panel); border: var(--bw) solid var(--line); border-radius: var(--r-md); padding: var(--sp-5) var(--sp-6); box-shadow: var(--shadow-card); }
.kc-doc-bcard-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); margin-block-end: var(--sp-3); }
.kc-doc-bcard-title { font-size: var(--fs-md); margin-block-end: var(--sp-3); }
.kc-doc-bcard .kc-bdg-chips { margin-block-end: 0; }
/* Ticket card */
.kc-doc-ticket { margin-block: var(--sp-6); }
.kc-doc-ticket-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5); cursor: pointer; }
.kc-doc-ticket-body { padding-block-start: var(--sp-4); }