/* Knowledge view — index health, search tester, catalog, documents (plan S1–S4).
   Linked from inside <main id="view-knowledge">; every rule is scoped to it so
   nothing here reaches another view. Tokens only, from tokens.css (UI.md §2).
   No inline styles are set by knowledge.js — the score bar is a <meter>. */

/* ---- tabs: segmented pills under the title (UI.md §1) -------------------- */
#view-knowledge .ktabs{display:flex;flex-wrap:wrap;gap:var(--s-1);margin:var(--s-3) 0 var(--s-4);
  padding:var(--s-1);border:1px solid var(--line);border-radius:var(--radius);width:fit-content;
  max-width:100%;background:var(--surface)}
#view-knowledge .ktabs [role="tab"]{font:inherit;font-size:var(--text-sm);padding:var(--s-1) var(--s-3);
  border:1px solid transparent;border-radius:var(--radius);background:none;color:var(--fg);cursor:pointer}
#view-knowledge .ktabs [role="tab"]:hover{background:var(--surface-2)}
#view-knowledge .ktabs [role="tab"][aria-selected="true"]{background:var(--accent);color:var(--accent-fg);
  font-weight:var(--weight-bold)}
#view-knowledge .ktabs [role="tab"]:focus-visible{outline:var(--focus-width) solid var(--focus);
  outline-offset:var(--focus-offset)}

#view-knowledge .ksec{margin:var(--s-5) 0}
#view-knowledge .ksec h3{display:flex;align-items:baseline;gap:var(--s-2);flex-wrap:wrap}
#view-knowledge .num{text-align:right;font-variant-numeric:tabular-nums}
#view-knowledge th.num{text-align:right}
#view-knowledge td{vertical-align:top}
#view-knowledge .chip{margin-right:var(--s-1)}
#view-knowledge .ktiers{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-1)}

/* ---- the tier badge, on every item (plan Q2) ----------------------------- */
#view-knowledge .ktier{display:inline-flex;align-items:baseline;gap:var(--s-1);font-size:var(--text-xs);
  line-height:1.6;padding:0 var(--s-2);border:1px solid var(--line);border-radius:999px;
  white-space:nowrap;margin-right:var(--s-1);color:var(--fg);background:var(--surface)}
#view-knowledge .ktier-k{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-size:.85em}

/* ---- S1 ------------------------------------------------------------------ */
/* THE RED BANNER. Red because content the assistant cannot find is a fault in
   what it answers from, not a limit on what can be said. */
#view-knowledge .kbanner{border:1px solid var(--bad);border-left:4px solid var(--bad);border-radius:var(--radius);
  background:color-mix(in srgb,var(--bad) 8%,var(--bg));padding:var(--s-3) var(--s-4);margin:0 0 var(--s-3)}
#view-knowledge .kbanner b{color:var(--bad)}
#view-knowledge .kbanner ul{margin:var(--s-2) 0 0;padding-left:var(--s-5)}
#view-knowledge .kbanner li{margin:var(--s-1) 0;overflow-wrap:anywhere}
#view-knowledge .kclear{border:1px solid var(--line);border-left:4px solid var(--ok);border-radius:var(--radius);
  padding:var(--s-2) var(--s-4);margin:0 0 var(--s-3)}
#view-knowledge .kclear b{color:var(--ok)}
#view-knowledge .fig.kfig-bad{border-color:var(--bad)}
#view-knowledge .fig.kfig-bad b{color:var(--bad)}
#view-knowledge .kidx .kid{max-width:22rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#view-knowledge .kcounts td{white-space:nowrap}
#view-knowledge .kidx td:nth-child(3){white-space:nowrap}
#view-knowledge .kerrrow td{border-top:0;padding-top:0}
#view-knowledge .kerr{white-space:pre-wrap;overflow-wrap:anywhere}
#view-knowledge .kcounts th[scope="row"]{color:var(--fg);text-transform:none;letter-spacing:0}

/* ---- S2 ------------------------------------------------------------------ */
#view-knowledge .kform{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));
  gap:var(--s-3) var(--s-4);align-items:end;max-width:60rem;margin:0 0 var(--s-3)}
#view-knowledge .kform .kwide{grid-column:1 / -1}
#view-knowledge .kform label{display:flex;flex-direction:column;gap:var(--s-1);font-size:var(--text-sm)}
#view-knowledge .kform textarea,#view-knowledge .kform input[type="number"],#view-knowledge .kform select,
#view-knowledge .kfilters input,#view-knowledge .kfilters select{font:inherit;font-size:var(--text-sm);
  padding:var(--s-1) var(--s-2);border:1px solid var(--line);border-radius:var(--radius);
  background:var(--bg);color:var(--fg)}
#view-knowledge .kform textarea{resize:vertical;width:100%}
#view-knowledge .kform input:invalid:not(:placeholder-shown){border-color:var(--bad)}
#view-knowledge .kkinds{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);
  border:1px solid var(--line);border-radius:var(--radius);padding:var(--s-2) var(--s-3);margin:0}
#view-knowledge .kkinds legend{font-size:var(--text-xs);color:var(--muted);padding:0 var(--s-1)}
#view-knowledge .kkinds label,#view-knowledge .kform .kcheck{flex-direction:row;align-items:center;gap:var(--s-1)}
#view-knowledge .kform .kcheck{grid-column:1 / span 2}
#view-knowledge .kform p{margin:0;max-width:70ch}
#view-knowledge button{font:inherit;font-size:var(--text-sm);padding:var(--s-1) var(--s-3);
  background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-border)}

#view-knowledge .kgap{border:1px solid var(--warn);border-left:4px solid var(--warn);border-radius:var(--radius);
  background:var(--warnbg);padding:var(--s-3) var(--s-4);margin:var(--s-3) 0}
#view-knowledge .kgap b{color:var(--warn)}
#view-knowledge .kgap p{margin:var(--s-1) 0}
#view-knowledge .kgap-no{border-left:4px solid var(--ok);padding:var(--s-2) var(--s-3);margin:var(--s-3) 0}

#view-knowledge .kresults,#view-knowledge .kpassages{list-style:none;margin:0;padding:0}
#view-knowledge .kresult,#view-knowledge .kpassage{border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--s-2) var(--s-3);margin:0 0 var(--s-2)}
#view-knowledge .kresult-h,#view-knowledge .kpassage-h{display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--s-1) var(--s-2);margin-bottom:var(--s-1)}
#view-knowledge .kresult-h .ktitle{overflow-wrap:anywhere}
#view-knowledge .kresult-f{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
  gap:var(--s-2);margin-top:var(--s-1)}
#view-knowledge .krank{font-family:var(--mono);font-size:var(--text-xs);color:var(--muted)}
#view-knowledge .kscore{margin-left:auto;font-variant-numeric:tabular-nums;font-size:var(--text-sm);
  white-space:nowrap;display:inline-flex;align-items:center;gap:var(--s-1)}
#view-knowledge .kscore meter{width:6rem}
#view-knowledge .ktext{max-height:18rem;overflow:auto;padding:var(--s-2);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius)}
#view-knowledge .kq{white-space:pre-wrap;overflow-wrap:anywhere}
#view-knowledge .kchips{display:flex;flex-wrap:wrap;gap:var(--s-1)}
#view-knowledge .kfold{margin:var(--s-2) 0}
#view-knowledge .kfold > summary{cursor:pointer;font-size:var(--text-sm)}
#view-knowledge .kexcl{margin:var(--s-2) 0;padding-left:var(--s-5);font-size:var(--text-sm);
  max-height:16rem;overflow:auto}
#view-knowledge .kdiag td{white-space:nowrap}
#view-knowledge .kdiag td:first-child{white-space:normal;min-width:16rem}
#view-knowledge .kdiag tr.kreturned{background:var(--accent-weak)}
#view-knowledge .kdiag .kmissing{color:var(--muted);font-style:italic;text-align:center}
#view-knowledge .klink{background:none;border:0;padding:0;color:var(--link);text-decoration:underline;
  cursor:pointer;overflow-wrap:anywhere;text-align:left}

/* ---- S3 / S4 lists ------------------------------------------------------- */
#view-knowledge .kfilters{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);align-items:end;
  margin:0 0 var(--s-3);font-size:var(--text-sm)}
#view-knowledge .kfilters label{display:flex;flex-direction:column;gap:var(--s-1)}
#view-knowledge .krow{cursor:pointer}
#view-knowledge .klist td:first-child code{white-space:nowrap}
#view-knowledge .krow:hover{background:var(--surface-2)}
#view-knowledge .klist .kname{max-width:24rem;overflow-wrap:anywhere}
#view-knowledge .klist .kcat{max-width:12rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#view-knowledge .kprice{white-space:nowrap}
#view-knowledge .kprice .chip{margin-left:var(--s-1)}
#view-knowledge .kpager{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
  gap:var(--s-2);margin:var(--s-3) 0}
#view-knowledge .kpager-b{display:flex;gap:var(--s-2)}

/* ---- the detail panel ---------------------------------------------------- */
#kpanel{max-width:64rem;width:92vw;max-height:calc(100vh - var(--s-6));padding:0;overflow:hidden}
#kpanel[open]{display:flex;flex-direction:column}
#kpanel .kp-head{margin:0;padding:var(--s-3) var(--s-5);justify-content:space-between;gap:var(--s-4)}
#kpanel .kp-head h3{margin:0;overflow-wrap:anywhere}
#kpcontent{overflow:auto;padding:0 var(--s-5) var(--s-5)}
#kpanel .kp-sec{border-top:1px solid var(--line);padding:var(--s-3) 0}
#kpanel .kp-sec:first-of-type{border-top:0}
#kpanel h4{margin:0 0 var(--s-2);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted)}
#view-knowledge .kp-kv{display:grid;grid-template-columns:max-content 1fr;gap:var(--s-1) var(--s-4);
  margin:var(--s-2) 0;font-size:var(--text-sm)}
#view-knowledge .kp-kv dt{color:var(--muted)}
#view-knowledge .kp-kv dd{margin:0;overflow-wrap:anywhere;min-width:0}
#view-knowledge .kfields{margin:0}
#view-knowledge .kflist{margin:0;padding-left:var(--s-4)}
#view-knowledge .kfield{white-space:pre-wrap;overflow-wrap:anywhere}
#view-knowledge .kattrs{max-width:48rem}