/* Knowledge Base: categories, guide lists, the guide page, history and diffs, the Popular guides card.
   Built on the Float tokens in float.css, so it follows every theme and the aurora backdrop. */

.kb-head { padding-bottom: var(--s-5); }
.kb-head-text { min-width: 0; flex: 1 1 280px; }
.kb-head-text h1, .kb-head-text p { overflow-wrap: anywhere; }

/* search bar */
.kb-search { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px var(--s-4); border-radius: var(--r-pill); margin-bottom: max(var(--gap-float, 10px), var(--s-4)); }
.kb-search-ico { display: inline-flex; color: var(--text-faint); flex: none; }
.kb-search-ico svg { width: 18px; height: 18px; }
.kb-search input { flex: 1; min-width: 0; border: 0; background: transparent; box-shadow: none; padding: 8px 4px; font-size: var(--fs-md, 1rem); color: var(--text); }
.kb-search input:focus { outline: none; }
.kb-search .btn { flex: none; }

/* category cards */
.kb-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--gap-float); margin-bottom: var(--s-3); }
.kb-cat { display: flex; gap: var(--s-4); align-items: flex-start; padding: var(--s-4) var(--s-5); color: inherit; text-decoration: none; min-width: 0; }
.kb-cat-ico { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-md); font-size: 1.5rem;
  background: color-mix(in oklab, var(--accent) 14%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 26%, transparent); }
.kb-cat-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.kb-cat-main b { font: 700 var(--fs-lg, 1.15rem)/1.2 var(--font-display); letter-spacing: var(--track-tight); overflow-wrap: anywhere; }
.kb-cat-main .muted { line-height: 1.45; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* guide rows */
.kb-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-float, 10px); }
.kb-row { display: flex; gap: var(--s-4); align-items: center; padding: var(--s-4) var(--s-5); color: inherit; text-decoration: none; min-width: 0; }
.kb-row-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.kb-row-title { font: 650 var(--fs-md, 1rem)/1.3 var(--font-display); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kb-row-text { line-height: 1.45; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kb-row-meta { flex: 0 0 clamp(160px, 30%, 240px); display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; min-width: 0; } /* one width on every row, so pills and names line up down the list */
.kb-row-meta > span:not(.kb-chip) { max-width: 100%; min-width: 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 2; }
.kb-row mark, .kb-row-title mark { background: color-mix(in oklab, var(--accent) 24%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; }

/* guide page */
.kb-ahead { align-items: flex-end; }
.kb-ahead-text { min-width: 0; flex: 1 1 320px; }
.kb-ahead-text h1 { margin: var(--s-3) 0 var(--s-3); overflow-wrap: anywhere; }
.kb-ahead-text .meta { flex-wrap: wrap; }
.kb-ahead-text .meta span { overflow-wrap: anywhere; }
.kb-ahead .thead-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kb-ahead .thead-tools form { display: contents; }
/* category pill (guide lists, search, guide page): the same pill everywhere, emoji in a fixed slot on the first line of text;
   a name longer than the column wraps inside the pill instead of running out of it */
.chip.kb-chip { display: inline-flex; align-items: flex-start; gap: 6px; height: auto; min-height: 24px; padding: 4px 10px 4px 8px; border-radius: 12px; max-width: 100%; min-width: 0; font: 600 var(--fs-xs, 12px)/1 var(--font-ui); letter-spacing: 0; text-decoration: none; vertical-align: middle; }
a.chip.kb-chip:hover { color: var(--text); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 40%, var(--border)); }
.kb-chip-ico { flex: none; display: inline-grid; place-items: center; min-width: 16px; height: 16px; white-space: nowrap; font: 13px/1 "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.kb-chip-txt { min-width: 0; overflow-wrap: anywhere; white-space: normal; text-align: left; line-height: 16px; }
.kb-ahead .chip.kb-chip { align-self: flex-start; }
.kb-body .post-body { font-size: 1.02rem; line-height: 1.7; overflow-wrap: anywhere; }
.kb-body .post-body img { max-width: 100%; height: auto; }

/* history */
.kb-revs { list-style: none; margin: 0; padding: 0; }
.kb-rev { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--border); min-width: 0; }
.kb-rev:last-child { border-bottom: 0; }
.kb-rev-n { flex: none; min-width: 36px; font: 700 var(--fs-sm)/1 var(--font-mono); color: var(--text-faint); }
.kb-rev-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.kb-rev-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.kb-rev-who, .kb-rev-note { overflow-wrap: anywhere; min-width: 0; }
.kb-rev-links { flex: none; white-space: nowrap; }

/* diff */
.kb-diff { list-style: none; margin: 0; padding: 0; border-radius: var(--r-md); overflow: hidden; box-shadow: inset 0 0 0 1px var(--border);
  font: 13px/1.55 var(--font-mono); background: var(--surface-2); }
.kb-diff li { padding: 1px 12px 1px 28px; position: relative; white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
.kb-diff li::before { position: absolute; left: 10px; color: var(--text-faint); }
.kb-d-add { background: color-mix(in oklab, var(--pos) 16%, transparent); }
.kb-d-add::before { content: "+"; color: var(--pos) !important; }
.kb-d-del { background: color-mix(in oklab, var(--neg) 14%, transparent); }
.kb-d-del::before { content: "−"; color: var(--neg) !important; }
.kb-d-gap { text-align: center; color: var(--text-faint); padding: 2px 0 !important; }
.kb-diff ins, .kb-diff del, .kb-d-title ins, .kb-d-title del { text-decoration: none; }
.kb-d-title { overflow-wrap: anywhere; }
.kb-d-title del { color: var(--neg); text-decoration: line-through; }
.kb-d-title ins { color: var(--pos); }
.kb-d-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.kb-d-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.kb-d-key.add { background: color-mix(in oklab, var(--pos) 40%, transparent); margin-left: 8px; }
.kb-d-key.del { background: color-mix(in oklab, var(--neg) 40%, transparent); }

/* Popular guides card on the forum index */
.kb-pop ol { margin: 0; padding: 0; list-style: none; counter-reset: kb; display: grid; gap: 2px; }
.kb-pop li { counter-increment: kb; min-width: 0; }
.kb-pop, .kb-pop ol { min-width: 0; }
.kb-pop a { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--r-sm, 8px); color: inherit; text-decoration: none; min-width: 0; }
.kb-pop a::before { content: counter(kb); flex: none; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%;
  font: 700 11px/1 var(--font-ui); color: var(--accent); background: color-mix(in oklab, var(--accent) 14%, transparent); }
@media (hover: hover) { .kb-pop a:hover { background: var(--surface-2); } }
.kb-pop-t { flex: 1; min-width: 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 2; font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; }
.kb-pop .faint { flex: none; }
.kb-more { margin-top: var(--s-3); }

/* admin */
.kb-cat-edit { display: grid; grid-template-columns: minmax(0, 2fr) 72px 80px minmax(0, 3fr) auto auto; gap: 8px 10px; align-items: end;
  padding: var(--s-3) 0; border-bottom: 1px solid var(--border); }
.kb-cat-new { border-bottom: 0; }
.kb-cat-edit label { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: var(--fs-xs); color: var(--text-muted); }
.kb-cat-edit input { width: 100%; min-width: 0; }
.kb-cat-edit .ip-field { gap: 4px; font-weight: 400; font-size: var(--fs-xs); color: var(--text-muted); }
.kb-cat-edit .ip, .kb-cat-edit .ip-btn { width: 100%; min-width: 0; }
.kb-cat-n { align-self: center; white-space: nowrap; }
.kb-cat-btns { display: flex; gap: 6px; flex-wrap: nowrap; }
.kb-groups { border: 0; padding: 0; margin: 0 0 var(--s-3); display: flex; flex-wrap: wrap; gap: 6px 16px; }
.kb-groups legend { padding: 0; margin-bottom: 6px; }
.kb-form .editor textarea { min-height: 320px; }

@media (max-width: 760px) {
  .kb-row { flex-direction: column; align-items: stretch; gap: var(--s-2, 8px); padding: var(--s-4); }
  .kb-row-meta { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; text-align: left; max-width: none; flex: 1 1 auto; gap: 6px 10px; }
  .kb-cat-edit { grid-template-columns: minmax(0, 1fr) 72px 80px; }
  .kb-desc-in { grid-column: 1 / -1; }
  .kb-cat-btns { grid-column: 1 / -1; flex-wrap: wrap; } /* Save and Delete get their own row instead of spilling out of a narrow column */
  .kb-diff li { padding-right: 8px; }
  .kb-rev { flex-wrap: wrap; align-items: flex-start; }
  .kb-rev-links { flex-basis: 100%; padding-left: calc(36px + var(--s-4)); white-space: normal; }
}

/* page head: the buttons and tabs sit on the title's centre line and the subtitle runs under the title;
   on phones the tools take their own row under the subtitle */
.kb-head { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s-4); row-gap: 6px; }
.kb-head > div:first-child { display: contents; }
.kb-head h1 { flex: 1 1 auto; min-width: 0; margin: 0; }
.kb-head > div:first-child > :not(h1) { order: 2; flex-basis: 100%; min-width: 0; }
.kb-head > .greet-tools { order: 1; margin-left: auto; width: auto; min-width: 0; }
.kb-head > .greet-tools > * { max-width: 100%; }
@media (max-width: 600px) { .kb-head > .greet-tools { order: 3; flex-basis: 100%; margin-left: 0; margin-top: var(--s-2); } }