/* Knowledge, Sources: the kind facet, the cards and the guide, the Add a source panel's kind choices and
   preview, the source drawer. Colours come from the tokens in styles.css only, so every colour scheme
   and both light and dark apply. The panel and drawer frames reuse platforms.css (.pf-panel, .pf-drawer). */
.ks-head { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 14px; }
.ks-kinds .fseg button { display: inline-flex; align-items: center; gap: 4px; }
.ks-kind { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); flex: none; }
.ks-kind svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fseg .ks-kind { width: 18px; height: 18px; border-radius: 4px; background: none; color: inherit; }
.fseg .ks-kind svg { width: 14px; height: 14px; }
.ks-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 22px; align-items: start; }
.ks-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.ks-card { gap: 10px; }
.ks-card h3 { font-size: 15.5px; }
.ks-top { display: flex; gap: 10px; align-items: flex-start; }
.ks-top .grow { flex: 1; min-width: 0; }
.ks-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; border-block: 1px solid var(--line); padding-block: 8px; }
.ks-stats b { display: block; font-size: 16px; font-variant-numeric: tabular-nums; }
.ks-stats span { font-size: 11.5px; color: var(--muted); }
.ks-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.ks-guide { position: sticky; top: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; font-size: 13px; display: grid; gap: 10px; }
.ks-guide h4 { font-size: 14px; margin: 0; }
.ks-guide p { color: var(--muted); margin: 0; }
.ks-guide dl { margin: 0; }
.ks-guide dt { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-top: 8px; flex-wrap: wrap; }
.ks-guide dt.off { opacity: .6; }
.ks-guide dt .ks-kind { width: 24px; height: 24px; border-radius: 6px; }
.ks-guide dt .ks-kind svg { width: 14px; height: 14px; }
.ks-guide dd { margin: 2px 0 0; color: var(--muted); }
.ks-guide .eg { margin-top: 4px; }
/* the Add a source panel */
.ks-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-top: 8px; }
.ks-choice { display: grid; grid-template-columns: auto 1fr; gap: 10px; border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px; cursor: pointer; align-items: start; }
.ks-choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.ks-choice.off { opacity: .55; cursor: not-allowed; }
.ks-choice b { display: block; }
.ks-choice .note { display: block; margin-top: 4px; }
.ks-choice .ks-kind { width: 30px; height: 30px; }
.ks-choice .ks-kind svg { width: 17px; height: 17px; }
.ks-what { background: var(--surface-2); border-radius: 12px; padding: 14px; display: grid; gap: 8px; font-size: 13px; }
.ks-what h4 { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin: 0; }
.ks-what p { margin: 0; }
.pf-panel .jfiles { margin-top: 8px; }
/* the source drawer */
.ks-drawer { width: min(760px, 100vw); }
.ks-drawer .drawer-head .ks-kind { width: 30px; height: 30px; }
.ks-drawer .drawer-head .ks-kind svg { width: 17px; height: 17px; }
.ks-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-top: 8px; }
.ks-settings > div { min-width: 0; }
.ks-subhead { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 14px; }
.ks-subhead h3 { font-size: 15px; margin: 0; }
.ks-hist { margin: 0; padding-left: 18px; font-size: 13px; color: var(--muted); }
.ks-hist li { margin-bottom: 6px; white-space: normal; overflow-wrap: anywhere; }
.ks-hist .li-prev { white-space: normal; }
.ks-drawer .doc-view { grid-template-columns: minmax(0, 1fr); }
.ks-drawer .doc-frame { height: 50vh; }
.ks-drawer .pf-foot .grow { flex: 1; }
@media (max-width: 1000px) { .ks-layout { grid-template-columns: minmax(0, 1fr); } .ks-guide { position: static; } }
@media (max-width: 720px) { .ks-cards { grid-template-columns: minmax(0, 1fr); } .ks-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Knowledge, Help centre: a shipped list offered for an area that has none saved */
.hq-suggest { margin-top: 6px; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 8px; color: var(--muted); font-size: 12.5px; display: grid; gap: 6px; justify-items: start; }
.hq-suggest ul { margin: 0; padding-left: 18px; opacity: .75; }
.ks-groups { display: grid; gap: 8px; min-width: 0; }
.ks-group { font-size: 15px; margin: 10px 0 2px; display: flex; gap: 8px; align-items: center; }
.ks-group:first-child { margin-top: 0; }
.ksd-top { display: flex; gap: 10px 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.ksd-pills, .ksd-switches { gap: 6px 12px; flex-wrap: wrap; }
.ksd-switches .lswitch { white-space: nowrap; }