resolution states (KmsScreen.js _resolveKmsTerms). A resolved
term (data-kms-resolved="1") gets the dotted-underline/help-cursor affordance from its
own inline style (see _KMS_TERM_SPAN_STYLE — deliberately not relied on solely via this
class, per the Part 1 spike note); this class rule is a belt-and-suspenders visual
backstop for whenever the class itself does survive. An unresolved span (archived term,
cross-org, glossary disabled, network failure) is never given this class by the resolver
and renders as plain, unstyled text — exactly the words the author typed. */
.kms-root .rte-editor span.kms-term, .kms-root .art-body span.kms-term {
border-bottom: 1px dotted #6B46C1; cursor: help;
}
.kms-root .rte-editor span.kms-term:focus, .kms-root .art-body span.kms-term:focus {
outline: 2px solid var(--kms-primary); outline-offset: 1px; border-radius: 2px;
}
/* The shared glossary-term tooltip — appended to document.body (outside .kms-root, same
as _askText's/_kmsImagePicker's modal shell), so intentionally unscoped. Definition text
is written via .textContent only (KmsScreen.js _glossShowTooltip) — see the hard
security rule in that function's own comment. */
.kms-term-tooltip {
position: fixed; z-index: 80; max-width: 320px; padding: 8px 12px;
background: #1A1D21; color: #FFFFFF; font-size: 12.5px; line-height: 1.5;
border-radius: 8px; box-shadow: 0 6px 20px rgba(16,24,40,.24); pointer-events: none;
}
/* "Choose a glossary term" picker rows — rendered in a .modal-overlay/.modal appended to
document.body (same shared shell as _askText/_kmsImagePicker), so unscoped like the
sibling .rte-img-pick-* rules above. */
.rte-term-pick-item {
display: flex; flex-direction: column; align-items: flex-start; width: 100%;
padding: 8px 10px; border: 0; border-bottom: 1px solid #EEF0F3; background: transparent;
text-align: inherit; font-family: inherit; cursor: pointer;
}
.rte-term-pick-item:hover { background: #F8FAFC; }
.rte-term-pick-name { font-size: 13.5px; color: #1A1D21; }
.rte-term-pick-def { font-size: 12px; color: #6B7280; margin-top: 2px; }
/* Collapsed state. A template may declare several rich-text fields; opening them all at once
buries the content under toolbars, so a field shows an excerpt until it is asked for. */
.kms-root .rte[data-mode="collapsed"] { background: var(--kms-surface); }
.kms-root .rte-preview { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 13px; min-height: 44px; cursor: pointer; }
.kms-root .rte-preview:hover { background: #FAFBFD; }
.kms-root .rte-preview-text { flex: 1; font-size: 13.5px; line-height: 1.55; color: var(--kms-t1); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kms-root .rte-preview-text.empty { color: var(--kms-tFaint); }
.kms-root .rte-open-btn { flex-shrink: 0; display: flex; align-items: center; gap: 5px; padding: 6px 12px; border: 1px solid var(--kms-border); border-radius: 7px; background: var(--kms-surface); color: var(--kms-primary); font-size: 12.5px; font-weight: 600; }
.kms-root .rte-open-btn .ms { font-size: 16px; }
.kms-root .rte-preview:hover .rte-open-btn { border-color: var(--kms-primary); background: var(--kms-primary-bg); }
/* Fullscreen: long procedures do not fit a 480px box. */
.kms-root .rte.rte-fullscreen { position: fixed; inset: 18px; z-index: 900; background: var(--kms-surface); box-shadow: 0 18px 60px rgba(15, 23, 42, .28); display: flex; flex-direction: column; }
.kms-root .rte.rte-fullscreen .rte-editor,
.kms-root .rte.rte-fullscreen .rte-html { flex: 1; max-height: none; }
/* ---- Article ---- */
.kms-root .back-btn { display: flex; align-items: center; gap: 7px; padding: 8px 15px; background: var(--kms-surface); border: 1px solid var(--kms-border); border-radius: 9px; cursor: pointer; font-size: 13.5px; font-family: inherit; color: var(--kms-t2); margin-bottom: 16px; }
.kms-root .art-layout { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; }
.kms-root .signbar { background: #FBEFD2; border: 1.5px solid #E8D29A; border-radius: 14px; padding: 16px 20px; display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.kms-root .sign-btn { padding: 10px 18px; background: #6B4900; color: #fff; border: none; border-radius: 9px; font-size: 13.5px; font-weight: 700; cursor: pointer; font-family: inherit; }
.kms-root .art-card { background: var(--kms-surface); border: 1px solid var(--kms-border2); border-radius: 14px; padding: 30px 34px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.kms-root .art-meta { display: flex; align-items: center; gap: 16px; font-size: 13px; color: var(--kms-t3); padding-bottom: 18px; border-bottom: 1px solid var(--kms-border2); margin-bottom: 22px; flex-wrap: wrap; }
.kms-root .art-body { font-size: 15.5px; line-height: 1.85; color: var(--kms-t2); }
.kms-root .art-body h2 { font-size: 18px; font-weight: 700; color: var(--kms-t1); margin: 22px 0 10px; }
.kms-root .art-body p { margin-bottom: 14px; }
.kms-root .art-body ul, .kms-root .art-body ol { padding-inline-start: 22px; margin-bottom: 14px; }
.kms-root .art-body li { margin-bottom: 6px; }
/* The editor can now emit these, so the viewer has to render them. */
.kms-root .art-body h1 { font-size: 21px; font-weight: 700; color: var(--kms-t1); margin: 24px 0 10px; }
.kms-root .art-body h3 { font-size: 16px; font-weight: 700; color: var(--kms-t1); margin: 18px 0 8px; }
.kms-root .art-body h4 { font-size: 14.5px; font-weight: 700; color: var(--kms-t1); margin: 16px 0 8px; }
.kms-root .art-body blockquote { margin: 0 0 14px; padding: 8px 16px; border-inline-start: 3px solid var(--kms-border2); color: var(--kms-t3, var(--kms-t2)); }
.kms-root .art-body pre { margin: 0 0 14px; padding: 12px 14px; border-radius: 8px; background: #F5F7FA; font-family: 'SF Mono', Consolas, monospace; font-size: 13px; white-space: pre-wrap; }
.kms-root .art-body hr { border: none; border-top: 1px solid var(--kms-border); margin: 18px 0; }
.kms-root .art-body a { color: var(--kms-primary); }
.kms-root .art-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 0; }
.kms-root .qa { border: 1px solid var(--kms-border2); border-radius: 12px; overflow: hidden; margin-bottom: 10px; }
.kms-root .qa.open { border-color: #C9D6F5; background: #FBFCFE; }
.kms-root .qa-q { width: 100%; text-align: right; font-family: inherit; padding: 14px 16px; cursor: pointer; display: flex; align-items: center; gap: 12px; background: transparent; border: none; font-size: 14.5px; font-weight: 600; color: var(--kms-t1); }
.kms-root .qa-n { width: 26px; height: 26px; border-radius: 7px; background: var(--kms-primary-bg); color: var(--kms-primary); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; flex-shrink: 0; }
.kms-root .qa.open .qa-n { background: var(--kms-primary); color: #fff; }
.kms-root .qa-chev { transition: transform 0.2s; }
.kms-root .qa.open .qa-chev { transform: rotate(180deg); }
.kms-root .qa-a { display: none; padding: 0 16px 16px 54px; font-size: 14px; line-height: 1.75; color: var(--kms-t2); }
.kms-root .qa.open .qa-a { display: block; }
/* ---- AI search ---- */
.kms-root .srch-box { display: flex; align-items: center; gap: 10px; max-width: 680px; margin: 0 auto; background: var(--kms-surface); border: 2px solid var(--kms-border); border-radius: 14px; padding: 12px 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.06); }
.kms-root .srch-box input { flex: 1; border: none; outline: none; background: transparent; font-size: 15.5px; color: var(--kms-t1); direction: rtl; font-family: inherit; }
.kms-root .srch-go { padding: 8px 18px; background: var(--kms-primary); color: #fff; border: none; border-radius: 10px; font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
.kms-root .srch-chip { padding: 7px 16px; border: 1.5px solid var(--kms-border); border-radius: 20px; background: var(--kms-surface); color: var(--kms-t3); font-size: 13px; cursor: pointer; font-family: inherit; }
.kms-root .srch-chip:hover { border-color: var(--kms-primary); color: var(--kms-primary); }
.kms-root .ai-answer { background: #F8FAFF; border: 1px solid var(--kms-border2); border-inline-start: 3px solid var(--kms-primary); border-radius: 14px; padding: 20px 22px; }
/* ---- Admin / health ---- */
.kms-root .admin-banner { background: linear-gradient(120deg,#1B2230,#2A3950 60%,#2563EB 140%); border-radius: 16px; padding: 22px 26px; color: #fff; display: flex; align-items: center; gap: 24px; }
.kms-root .gap-btn { padding: 7px 14px; background: var(--kms-primary); color: #fff; border: none; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap; }
/* Responsive: collapse the two-column layouts on narrow screens */
@media (max-width: 1100px) {
.kms-root .layout, .kms-root .art-layout { grid-template-columns: 1fr; }
.kms-root .cgrid { grid-template-columns: repeat(2,1fr); }
}
/* ============================================================================
REDESIGN LAYER — the Botica KMS mockup's navigation shell.
Everything below is prefixed `kms-` even inside `.kms-root`, because these
names (rail / tab / badge / seg / suggest) are the ones most likely to be
reinvented by another screen later. The block above is untouched: it still
dresses the cards, lists and editor these controls navigate between.
============================================================================ */
.kms-root {
--kms-surface2: #F7F9FC;
--kms-surface3: #EEF1F6;
--kms-r-sm: 8px; --kms-r-md: 10px; --kms-r-lg: 14px;
--kms-sh-md: 0 4px 6px -1px rgba(16,24,40,.09), 0 2px 4px -2px rgba(16,24,40,.06);
--kms-sh-panel: 0 16px 40px -8px rgba(16,24,40,.18), 0 4px 12px -4px rgba(16,24,40,.10);
}
/* ---- Header bar: knowledge map + search + role switch ---- */
.kms-root .kms-hbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.kms-root .kms-mmbtn { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; flex: none;
border: 1px solid var(--kms-border); background: var(--kms-surface); border-radius: var(--kms-r-sm);
font-size: 13px; font-weight: 600; color: var(--kms-t2); cursor: pointer; font-family: inherit; }
.kms-root .kms-mmbtn:hover { background: var(--kms-surface3); color: var(--kms-t1); }
.kms-root .kms-mmbtn[aria-expanded="true"] { background: var(--kms-primary); border-color: var(--kms-primary); color: #fff; }
.kms-root .kms-kbd { font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 4px;
background: var(--kms-surface3); color: var(--kms-tFaint); border: 1px solid var(--kms-border); }
.kms-root .kms-mmbtn[aria-expanded="true"] .kms-kbd { background: rgba(255,255,255,.2); color: #fff; border-color: transparent; }
.kms-root .kms-seg { display: flex; background: var(--kms-surface3); border-radius: var(--kms-r-sm); padding: 2px; flex: none; }
.kms-root .kms-seg button { border: none; background: transparent; padding: 6px 14px; border-radius: 6px;
cursor: pointer; color: var(--kms-tFaint); font-weight: 600; font-size: 12.5px; font-family: inherit; }
.kms-root .kms-seg button.on { background: var(--kms-surface); color: var(--kms-t1); box-shadow: var(--kms-sh-md); }
/* ---- Search with type-ahead ---- */
.kms-root .kms-search-wrap { flex: 1; min-width: 260px; max-width: 620px; position: relative; }
.kms-root .kms-search-box { display: flex; align-items: center; gap: 9px; height: 36px; padding: 0 12px;
border: 1px solid var(--kms-border); background: var(--kms-surface2); border-radius: var(--kms-r-md); }
.kms-root .kms-search-box:focus-within { border-color: var(--kms-primary); background: var(--kms-surface);
box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.kms-root .kms-search-box input { flex: 1; border: none; outline: none; background: transparent;
font-size: 13.5px; color: var(--kms-t1); font-family: inherit; }
.kms-root .kms-search-box input::placeholder { color: var(--kms-tFaint); }
.kms-root .kms-suggest { position: absolute; inset-inline: 0; top: calc(100% + 6px); background: var(--kms-surface);
border: 1px solid var(--kms-border); border-radius: var(--kms-r-lg); box-shadow: var(--kms-sh-panel);
max-height: 440px; overflow-y: auto; z-index: 60; padding: 6px; }
.kms-root .kms-sg-group { font-size: 10px; font-weight: 800; letter-spacing: .05em; color: var(--kms-tFaint);
padding: 8px 9px 4px; }
.kms-root .kms-sg-row { display: flex; align-items: center; gap: 9px; padding: 8px 9px;
border-radius: var(--kms-r-sm); cursor: pointer; }
.kms-root .kms-sg-row:hover, .kms-root .kms-sg-row.sel { background: var(--kms-surface3); }
.kms-root .kms-sg-body { min-width: 0; flex: 1; }
.kms-root .kms-sg-title { font-size: 13px; color: var(--kms-t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kms-root .kms-sg-title b { color: var(--kms-primary); font-weight: 800; }
.kms-root .kms-sg-path { font-size: 11px; color: var(--kms-tFaint); margin-top: 2px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kms-root .kms-sg-all { border-top: 1px solid var(--kms-border2); margin-top: 6px; padding: 9px;
font-size: 12px; font-weight: 600; color: var(--kms-primary); cursor: pointer; border-radius: var(--kms-r-sm); }
.kms-root .kms-sg-all:hover { background: var(--kms-surface3); }
.kms-root .kms-sg-empty { padding: 20px 12px; text-align: center; }
.kms-root .kms-sg-empty p { font-size: 13px; color: var(--kms-t3); margin-bottom: 11px; }
.kms-root .kms-sg-empty .row { display: flex; gap: 8px; justify-content: center; }
/* Announced, never drawn — the result count for screen readers. */
.kms-root .kms-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* ---- Knowledge map (mega menu) ---- */
.kms-root .kms-mm-scrim { position: fixed; inset: 0; background: rgba(15,23,42,.28); z-index: 80; }
.kms-root .kms-mm { position: fixed; top: 96px; inset-inline-end: 40px; width: min(1000px, calc(100vw - 340px));
background: var(--kms-surface); border: 1px solid var(--kms-border); border-radius: var(--kms-r-lg);
box-shadow: var(--kms-sh-panel); z-index: 90; overflow: hidden; }
.kms-root .kms-mm-bar { display: flex; align-items: center; gap: 10px; padding: 10px 13px;
border-bottom: 1px solid var(--kms-border2); background: var(--kms-surface2); }
.kms-root .kms-mm-bar b { font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--kms-t3); flex: 1; }
.kms-root .kms-mm-cols { display: flex; height: 400px; }
.kms-root .kms-mm-col { flex: 1; min-width: 0; border-inline-start: 1px solid var(--kms-border2);
overflow-y: auto; padding: 6px; }
.kms-root .kms-mm-col:first-child { border-inline-start: none; }
.kms-root .kms-mm-col.empty { background: var(--kms-surface2); }
.kms-root .kms-mm-hint { padding: 15px 11px; font-size: 12px; color: var(--kms-tFaint); line-height: 1.7; }
.kms-root .kms-mm-cols.single { display: block; height: 400px; overflow-y: auto; padding: 6px; }
.kms-root .kms-mrow { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: var(--kms-r-sm);
cursor: pointer; font-size: 13px; color: var(--kms-t2); }
.kms-root .kms-mrow:hover, .kms-root .kms-mrow.on { background: var(--kms-surface3); color: var(--kms-t1); }
.kms-root .kms-mrow.on { font-weight: 600; }
.kms-root .kms-mrow.cur { background: #EFF4FF; color: #1D4ED8; font-weight: 600; }
.kms-root .kms-mrow .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kms-root .kms-mrow .cnt { flex: none; font-size: 11px; color: var(--kms-tFaint); font-variant-numeric: tabular-nums; }
/* ---- Knowledge tree rail ---- */
.kms-root .kms-body { display: flex; gap: 16px; align-items: flex-start; }
.kms-root .kms-main { flex: 1; min-width: 0; }
.kms-root .kms-rail { flex: none; background: var(--kms-surface); border: 1px solid var(--kms-border2);
border-radius: var(--kms-r-lg); display: flex; flex-direction: column; overflow: hidden;
position: sticky; top: 12px; max-height: calc(100vh - 140px); }
.kms-root .kms-rail.collapsed { width: 44px !important; }
.kms-root .kms-rail.collapsed .kms-rail-head,
.kms-root .kms-rail.collapsed .kms-rail-body,
.kms-root .kms-rail.collapsed .kms-rail-foot { display: none; }
.kms-root .kms-rail-strip { display: none; flex-direction: column; align-items: center; gap: 10px; padding: 10px 0; }
.kms-root .kms-rail.collapsed .kms-rail-strip { display: flex; }
.kms-root .kms-rail-head { flex: none; padding: 10px; border-bottom: 1px solid var(--kms-border2);
display: flex; flex-direction: column; gap: 8px; }
.kms-root .kms-rail-title { display: flex; align-items: center; gap: 6px; }
.kms-root .kms-rail-title b { font-size: 12px; font-weight: 800; letter-spacing: .03em; color: var(--kms-t3); flex: 1; }
.kms-root .kms-rail-filter { display: flex; align-items: center; gap: 7px; padding: 0 9px; height: 30px;
border: 1px solid var(--kms-border); border-radius: var(--kms-r-sm); background: var(--kms-surface2); }
.kms-root .kms-rail-filter:focus-within { border-color: var(--kms-primary); background: var(--kms-surface); }
.kms-root .kms-rail-filter input { flex: 1; border: none; outline: none; background: transparent;
font-size: 12px; color: var(--kms-t1); font-family: inherit; }
.kms-root .kms-rail-body { flex: 1; overflow-y: auto; padding: 5px; }
.kms-root .kms-rail-foot { flex: none; border-top: 1px solid var(--kms-border2); padding: 6px 8px;
display: flex; flex-direction: column; gap: 2px; }
.kms-root .kms-rail-toggle { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--kms-t3);
padding: 5px 6px; border-radius: 6px; cursor: pointer; user-select: none; }
.kms-root .kms-rail-toggle:hover { background: var(--kms-surface3); color: var(--kms-t1); }
.kms-root .kms-rail-toggle input { accent-color: var(--kms-primary); width: 13px; height: 13px; }
/* Inside the rail, not straddling its edge: the rail clips its overflow, so a handle hung
off the outside is a handle nobody can grab. */
.kms-root .kms-resizer { position: absolute; inset-inline-end: 0; top: 0; bottom: 0; width: 5px;
cursor: col-resize; z-index: 5; }
.kms-root .kms-resizer:hover { background: rgba(37,99,235,.28); }
.kms-root .kms-rail.collapsed .kms-resizer { display: none; }
.kms-root .kms-tnode { display: flex; align-items: center; gap: 5px; padding: 5px 6px; border-radius: 6px;
cursor: pointer; font-size: 12.5px; color: var(--kms-t2); white-space: nowrap; scroll-margin: 60px; }
.kms-root .kms-tnode:hover { background: var(--kms-surface3); color: var(--kms-t1); }
.kms-root .kms-tnode.cur { background: #EFF4FF; color: #1D4ED8; font-weight: 600;
box-shadow: inset 0 0 0 1px #C7D9FB; }
.kms-root .kms-tnode .tw { flex: none; width: 16px; height: 16px; display: flex; align-items: center;
justify-content: center; color: var(--kms-tFaint); background: none; border: none; cursor: pointer; padding: 0; }
.kms-root .kms-tnode .tw .ms { font-size: 16px; }
.kms-root .kms-tnode .lbl { overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.kms-root .kms-tnode .lbl mark { background: #FEF08A; color: #713F12; border-radius: 3px; padding: 0 1px; }
.kms-root .kms-tnode .cnt { flex: none; font-size: 11px; color: var(--kms-tFaint); font-variant-numeric: tabular-nums; }
/* Editing a category is an editor-mode affordance and it only appears on the row you are
pointing at — 248 rows each showing three buttons is a wall, not a tree. */
.kms-root .kms-tnode .kms-tact { display: none; gap: 2px; flex: none; }
.kms-root .kms-tnode:hover .kms-tact { display: flex; }
.kms-root .kms-tnode:hover .cnt { display: none; }
.kms-root .kms-tact button { background: none; border: none; cursor: pointer; padding: 1px; line-height: 1;
color: var(--kms-tFaint); border-radius: 4px; }
.kms-root .kms-tact button:hover { background: #fff; color: var(--kms-primary); }
.kms-root .kms-tact button.del:hover { color: #9A1B0B; }
.kms-root .kms-tact .ms { font-size: 15px; }
/* ---- Badges / status pills ---- */
.kms-root .kms-badge { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
white-space: nowrap; flex: none; display: inline-flex; align-items: center; gap: 4px; }
.kms-root .kms-badge.ok { background: #D1FAE5; color: #047857; }
.kms-root .kms-badge.ai { background: #EDE9FE; color: #6D28D9; }
.kms-root .kms-badge.warn { background: #FEF3C7; color: #92400E; }
.kms-root .kms-badge.err { background: #FEE2E2; color: #B91C1C; }
.kms-root .kms-badge.mute { background: var(--kms-surface3); color: var(--kms-tFaint); }
/* ---- Article header + tabs ---- */
.kms-root .kms-art-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 4px; }
.kms-root .kms-art-icon { width: 40px; height: 40px; flex: none; border-radius: var(--kms-r-md);
background: var(--kms-surface3); display: flex; align-items: center; justify-content: center; color: var(--kms-t3); }
.kms-root .kms-art-icon .ms { font-size: 22px; }
.kms-root .kms-art-metaline { display: flex; align-items: center; gap: 8px; font-size: 12px;
color: var(--kms-tFaint); margin: 8px 0 4px; flex-wrap: wrap; }
.kms-root .kms-art-metaline code { background: var(--kms-surface3); padding: 2px 7px; border-radius: 5px;
font-size: 11px; color: var(--kms-t3); font-variant-numeric: tabular-nums; }
.kms-root .kms-actionbar { display: flex; gap: 8px; margin: 14px 0 16px; flex-wrap: wrap; }
/* ---- Lifecycle side panel (article read view) ---- */
.kms-root .kms-side-h { font-size: 11.5px; font-weight: 800; letter-spacing: .03em; color: var(--kms-tFaint);
margin-bottom: 11px; }
.kms-root .kms-kv { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px;
padding: 7px 0; border-bottom: 1px solid var(--kms-border2); color: var(--kms-t3); }
.kms-root .kms-kv:last-child { border-bottom: none; }
.kms-root .kms-kv b { color: var(--kms-t1); font-weight: 600; text-align: end; }
/* ---- Header tray: history / favourites / notifications ---- */
.kms-root .kms-tray { display: flex; align-items: center; gap: 2px; flex: none; position: relative; }
.kms-root .kms-tray-btn { position: relative; width: 34px; height: 34px; border-radius: var(--kms-r-sm);
border: 1px solid transparent; background: transparent; color: var(--kms-t3); cursor: pointer;
display: flex; align-items: center; justify-content: center; }
.kms-root .kms-tray-btn .ms { font-size: 20px; }
.kms-root .kms-tray-btn:hover { background: var(--kms-surface3); color: var(--kms-t1); }
.kms-root .kms-tray-btn.on { background: var(--kms-primary-bg); color: var(--kms-primary);
border-color: #C7D9FB; }
.kms-root .kms-tray-badge { position: absolute; top: -1px; inset-inline-end: -1px; min-width: 16px;
height: 16px; border-radius: 999px; background: #DC2626; color: #fff; font-size: 10px;
font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
/* The scrim only has to catch the next click; it must not dim the page, because these
dropdowns are glanced at and dismissed constantly. */
.kms-root .kms-tray-scrim { position: fixed; inset: 0; z-index: 70; }
.kms-root .kms-tray-panel { position: absolute; top: calc(100% + 6px); inset-inline-end: 0;
width: 300px; max-height: 380px; overflow-y: auto; z-index: 80; background: var(--kms-surface);
border: 1px solid var(--kms-border); border-radius: var(--kms-r-lg); box-shadow: var(--kms-sh-panel); }
.kms-root .kms-tray-head { padding: 10px 13px; font-size: 12.5px; font-weight: 700;
color: var(--kms-t1); border-bottom: 1px solid var(--kms-border2); }
.kms-root .kms-tray-row { display: flex; align-items: center; gap: 9px; padding: 9px 13px;
cursor: pointer; border-bottom: 1px solid var(--kms-border2); }
.kms-root .kms-tray-row:last-child { border-bottom: none; }
.kms-root .kms-tray-row:hover { background: var(--kms-surface2); }
.kms-root .kms-tray-t { font-size: 12.5px; color: var(--kms-t1); overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; }
.kms-root .kms-tray-m { font-size: 11px; color: var(--kms-tFaint); margin-top: 2px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kms-root .kms-tray-empty { padding: 22px 13px; text-align: center; font-size: 12.5px;
color: var(--kms-tFaint); }
/* ---- Dashboard banner + external links ---- */
.kms-root .kms-banner { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px;
border-radius: var(--kms-r-md); margin-bottom: 14px; font-size: 13px; line-height: 1.6; }
.kms-root .kms-banner.info { background: #EFF6FF; border: 1px solid #BFDBFE; color: #1E40AF; }
.kms-root .kms-banner.warning { background: #FEF9C3; border: 1px solid #FDE68A; color: #854D0E; }
.kms-root .kms-banner.critical { background: #FEE2E2; border: 1px solid #FECACA; color: #991B1B; }
.kms-root .kms-banner .bd { flex: 1; min-width: 0; }
.kms-root .kms-banner .x { border: none; background: transparent; color: inherit; opacity: .6;
cursor: pointer; font-size: 18px; line-height: 1; padding: 0 2px; }
.kms-root .kms-banner .x:hover { opacity: 1; }
.kms-root .kms-xl { display: flex; flex-wrap: wrap; gap: 9px; }
.kms-root .kms-xlink { display: inline-flex; align-items: center; gap: 8px; background: var(--kms-surface);
border: 1px solid var(--kms-border2); border-radius: var(--kms-r-md); padding: 9px 14px;
cursor: pointer; font-weight: 600; font-size: 12.5px; color: var(--kms-t1); text-decoration: none; }
.kms-root .kms-xlink:hover { box-shadow: var(--kms-sh-md); color: var(--kms-primary); }
/* ---- "What's new" picture cards ---- */
.kms-root .kms-wn { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.kms-root .kms-wcard { background: var(--kms-surface); border: 1px solid var(--kms-border2);
border-radius: var(--kms-r-lg); overflow: hidden; cursor: pointer;
transition: box-shadow .15s, transform .15s; }
.kms-root .kms-wcard:hover { box-shadow: var(--kms-sh-md); transform: translateY(-1px); }
.kms-root .kms-wimg { height: 96px; display: flex; align-items: center; justify-content: center; }
.kms-root .kms-wb { padding: 10px 12px; }
.kms-root .kms-wt { font-size: 12.5px; font-weight: 600; line-height: 1.45; margin-bottom: 5px;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kms-root .kms-wm { font-size: 11px; color: var(--kms-tFaint); display: flex; gap: 5px;
align-items: center; flex-wrap: wrap; }
/* ---- Item lifecycle ---- */
.kms-root .kms-lc-warn { display: flex; align-items: flex-start; gap: 9px; padding: 10px 13px;
border-radius: var(--kms-r-md); margin-bottom: 12px; font-size: 13px; line-height: 1.6; }
.kms-root .kms-lc-warn.err { background: #FEE2E2; color: #991B1B; border: 1px solid #FECACA; }
.kms-root .kms-lc-warn.warn { background: #FEF3C7; color: #92400E; border: 1px solid #FDE68A; }
.kms-root .kms-lc-note { display: flex; align-items: flex-start; gap: 9px; padding: 10px 13px;
border-radius: var(--kms-r-md); margin-bottom: 12px; font-size: 13px; line-height: 1.6;
background: #EFF6FF; color: #1E40AF; border: 1px solid #BFDBFE; }
/* The lifecycle panel sits beside the editor's tabs rather than becoming one of them: it
governs the whole item, so it has to stay readable whichever tab is open. */
.kms-root .kms-edit-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px;
gap: 18px; align-items: start; }
.kms-root .kms-lc-panel { padding: 16px 18px; position: sticky; top: 12px; }
@media (max-width: 1100px) {
.kms-root .kms-edit-layout { grid-template-columns: 1fr; }
.kms-root .kms-lc-panel { position: static; }
}
/* ---- No horizontal scrolling, ever ----------------------------------------------------
A grid or flex child defaults to min-width:auto, meaning it refuses to shrink below its
content. One long word, a wide table or a code block in an article is then enough to
push the whole two-column layout wider than the page — and in RTL the column that goes
off the edge is the one at the end, so the details panel got clipped rather than the
text that caused it.
min-width:0 lets the columns shrink; the rules under it give the genuinely wide things
somewhere of their own to scroll, so the page itself never has to. */
.kms-root .art-layout > *,
.kms-root .layout > *,
.kms-root .kms-edit-layout > *,
.kms-root .kms-body > * { min-width: 0; }
.kms-root .art-body { overflow-wrap: anywhere; }
.kms-root .art-body pre { overflow-x: auto; }
/* A table is the one thing that must not be forced to wrap — it scrolls in its own box. */
.kms-root .art-body table { display: block; width: max-content; max-width: 100%; overflow-x: auto; }
.kms-root .kms-kv b { overflow-wrap: anywhere; }
/* ---- Ask Botica: a conversation ---------------------------------------------------------
Column layout with the composer pinned to the bottom, because a thread grows downward and
the input must not travel with it. The height is the view's, not the content's — otherwise
an empty conversation puts the composer under the intro text instead of at the foot of the
screen, and the first thing the feature says about itself is that it is unfinished. */
.kms-root .kms-ask { display: flex; flex-direction: column; height: 100%; min-height: 480px;
max-width: 820px; margin: 0 auto; width: 100%; }
.kms-root .kms-ask-msgs { flex: 1; overflow-y: auto; padding: 4px 2px 16px; }
.kms-root .kms-ask-intro { text-align: center; padding: 34px 0 20px; }
.kms-root .kms-ask-mark { width: 56px; height: 56px; border-radius: 16px; background: var(--kms-primary);
display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.kms-root .kms-ask-intro h2 { font-size: 25px; font-weight: 800; color: var(--kms-t1); margin-bottom: 8px; }
.kms-root .kms-ask-intro p { font-size: 14.5px; color: var(--kms-t3); }
.kms-root .kms-ask-chips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
/* The asker's own words, aligned to the side the reader's eye returns to (RTL: the right). */
.kms-root .kms-ask-you { display: flex; justify-content: flex-start; margin: 14px 0; }
.kms-root .kms-ask-you > div { background: var(--kms-primary); color: #fff; font-size: 14.5px;
font-weight: 500; padding: 10px 14px; border-radius: 14px 14px 4px 14px; max-width: 78%;
overflow-wrap: anywhere; }
.kms-root .kms-ask-bot { background: var(--kms-surface); border: 1px solid var(--kms-border);
border-radius: var(--kms-r-md, 12px); padding: 14px 16px; margin: 0 0 16px; max-width: 92%; }
.kms-root .kms-ask-top { margin-bottom: 8px; }
.kms-root .kms-ask-text { font-size: 14.5px; line-height: 1.75; color: var(--kms-t2);
overflow-wrap: anywhere; }
.kms-root .kms-ask-text p { margin: 0 0 10px; }
.kms-root .kms-ask-text p:last-child { margin-bottom: 0; }
.kms-root .kms-ask-text ul { margin: 6px 0 10px; padding-inline-start: 20px; }
.kms-root .kms-ask-text li { margin-bottom: 4px; }
/* Citations. Deliberately the most clickable thing in the bubble: the answer is unapproved,
so the source is the part worth reaching for. */
.kms-root .kms-ask-srcs { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--kms-border2);
display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.kms-root .kms-ask-srcs-h { font-size: 11.5px; font-weight: 700; color: var(--kms-tFaint);
letter-spacing: 0.2px; }
.kms-root .kms-ask-src { display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
background: var(--kms-surface3); border: 1px solid var(--kms-border); border-radius: 999px;
padding: 5px 12px; font-size: 12.5px; font-family: inherit; color: var(--kms-t2);
cursor: pointer; text-align: start; }
.kms-root .kms-ask-src:hover { border-color: var(--kms-primary); color: var(--kms-primary); }
.kms-root .kms-ask-src.is-gone { cursor: default; opacity: 0.75; }
.kms-root .kms-ask-src.is-gone:hover { border-color: var(--kms-border); color: var(--kms-t2); }
.kms-root .kms-ask-src-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }
.kms-root .kms-ask-fu { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.kms-root .kms-ask-composer { flex: none; display: flex; gap: 8px; align-items: center;
padding: 12px 0 4px; border-top: 1px solid var(--kms-border); }
.kms-root .kms-ask-composer input { flex: 1; min-width: 0; padding: 11px 14px; font-size: 14.5px;
font-family: inherit; color: var(--kms-t1); background: var(--kms-surface);
border: 1px solid var(--kms-border); border-radius: 10px; }
.kms-root .kms-ask-composer input:focus { outline: none; border-color: var(--kms-primary); }
.kms-root .kms-ask-composer input:disabled { background: var(--kms-surface3); color: var(--kms-tFaint); }
/* ---- Achievements / gamification (U6) ------------------------------------------------
The badge wall, points summary and leaderboard for kms_gamification_enabled orgs.
Scoped, like everything else here, under .kms-root; new classes only, nothing above is
touched. */
.kms-root .kms-ach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 20px; }
.kms-root .kms-ach-stat { background: var(--kms-surface); border: 1px solid var(--kms-border2);
border-radius: var(--kms-r-lg); padding: 16px 18px; }
.kms-root .kms-ach-stat-label { font-size: 12px; color: var(--kms-t3); font-weight: 600; margin-bottom: 6px; }
.kms-root .kms-ach-stat-value { font-size: 26px; font-weight: 800; color: var(--kms-t1); letter-spacing: -0.3px; }
.kms-root .kms-ach-stat-sub { font-size: 12px; color: var(--kms-tFaint); margin-top: 4px; }
.kms-root .kms-ach-activity { display: flex; flex-direction: column; }
.kms-root .kms-ach-act-row { display: flex; align-items: center; gap: 10px; padding: 10px 0;
border-bottom: 1px solid var(--kms-border2); }
.kms-root .kms-ach-act-row:last-child { border-bottom: none; }
.kms-root .kms-ach-act-ic { width: 30px; height: 30px; border-radius: 8px; flex: none;
background: var(--kms-primary-bg); color: var(--kms-primary); display: flex;
align-items: center; justify-content: center; }
.kms-root .kms-ach-act-ic .ms { font-size: 16px; }
.kms-root .kms-ach-act-tx { flex: 1; min-width: 0; font-size: 13.5px; color: var(--kms-t1); }
.kms-root .kms-ach-act-tx small { display: block; font-size: 11.5px; color: var(--kms-tFaint); margin-top: 2px; }
.kms-root .kms-ach-act-pts { font-size: 13px; font-weight: 700; color: #047857; white-space: nowrap; }
.kms-root .kms-ach-badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.kms-root .kms-ach-badge { background: var(--kms-surface); border: 1px solid var(--kms-border2);
border-radius: var(--kms-r-lg); padding: 16px; text-align: center; transition: all 0.15s; }
.kms-root .kms-ach-badge.locked { opacity: 0.55; filter: grayscale(0.4); }
.kms-root .kms-ach-badge-ic { width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 10px;
display: flex; align-items: center; justify-content: center; background: var(--kms-primary-bg);
color: var(--kms-primary); }
.kms-root .kms-ach-badge.locked .kms-ach-badge-ic { background: var(--kms-surface3); color: var(--kms-tFaint); }
.kms-root .kms-ach-badge-ic .ms { font-size: 24px; }
.kms-root .kms-ach-badge-nm { font-size: 13.5px; font-weight: 700; color: var(--kms-t1); margin-bottom: 3px; }
.kms-root .kms-ach-badge-ds { font-size: 11.5px; color: var(--kms-t3); margin-bottom: 8px; min-height: 28px; }
.kms-root .kms-ach-badge-meta { font-size: 11px; color: var(--kms-tFaint); }
.kms-root .kms-ach-lb-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.kms-root .kms-ach-lb-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px;
border-bottom: 1px solid var(--kms-border2); font-size: 13.5px; }
.kms-root .kms-ach-lb-row:last-child { border-bottom: none; }
.kms-root .kms-ach-lb-row.me { background: var(--kms-primary-bg); border-radius: 10px; font-weight: 700; }
.kms-root .kms-ach-lb-rank { width: 26px; flex: none; text-align: center; font-weight: 800; color: var(--kms-t3); }
.kms-root .kms-ach-lb-row.me .kms-ach-lb-rank { color: var(--kms-primary); }
.kms-root .kms-ach-lb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--kms-t1); }
.kms-root .kms-ach-lb-badges { font-size: 12px; color: var(--kms-tFaint); flex: none; display: flex; align-items: center; gap: 3px; }
.kms-root .kms-ach-lb-pts { font-size: 13.5px; font-weight: 700; color: var(--kms-t1); flex: none; width: 70px; text-align: end; }
/* ---- Training & readiness (U5) ---- */
/* The full body of a briefing/procedure — rendered via _briefBodyHtml() in KmsScreen.js's
_wireBriefing() (and reused as-is by ui/briefingGateModal.js), which escapes the whole
body first and only then re-allows a small fixed allowlist of bare tags. The safety
guarantee lives in that function, not here; pre-wrap is presentational only, and by the
time it applies there are no literal newline characters left in the markup for it to act
on (_briefBodyHtml already turns them into /
). */
.kms-root .kms-briefing-body { white-space: pre-wrap; word-break: break-word; font-size: 13.5px;
line-height: 1.7; color: var(--kms-t1); }
.kms-root .te-q-row .te-opt-row:last-child { margin-bottom: 2px; }
/* ---- Print: an item on paper is the item, not the app around it ---- */
@media print {
body > *:not(#contentArea), .sidebar, .app-header, .kms-rail, .kms-hbar,
.kms-root .kms-actionbar, .kms-root .kms-sitebar, .kms-root .back-btn { display: none !important; }
.kms-root .kms-body { display: block; }
.kms-root .art-layout { grid-template-columns: 1fr; }
.kms-root .art-card { border: none; box-shadow: none; padding: 0; }
}