/* tool_collection.css: /tools/collection (COLLECTION lane). Tokens and atoms from theme.css only.
   Progress bars use the Bestiary progress colours (--c-progress-fill / --c-progress-empty). */
.k-tool .col-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-2) var(--sp-3); margin: var(--sp-3) 0 var(--sp-2); }
.k-tool .col-f { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; max-width: 100%; }
.k-tool .col-f > span { color: var(--fg-soft); font-size: var(--fs-s); }
.k-tool .col-q { flex: 1 1 14rem; }
.k-tool .col-q input { flex: 0 0 auto; width: 100%; box-sizing: border-box; }
.k-tool .col-f select { max-width: 100%; }
.k-tool .col-check { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); cursor: pointer; }
.k-tool .col-check input, .k-tool .col-box { width: 24px; height: 24px; margin: 0; accent-color: var(--c-progress-fill); cursor: pointer; flex: 0 0 auto; }
.k-tool .col-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: var(--sp-2) 0; }
.k-tool .col-file { cursor: pointer; }
.k-tool .col-file:focus-within { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.k-tool .col-save-note { margin: var(--sp-1) 0; font-size: var(--fs-s); }
.k-tool .col-ask { margin: var(--sp-3) 0; }
.k-tool .col-ask p { margin-top: 0; }
.k-tool .col-total { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); margin: var(--sp-3) 0; color: var(--fg); }
.k-tool .col-total .col-bar { flex: 1 1 10rem; }
.k-tool .col-bar { display: inline-block; position: relative; height: 10px; min-width: 4rem; background: var(--c-progress-empty); border: 2px solid var(--c-panel-border); overflow: hidden; vertical-align: middle; }
.k-tool .col-fill { display: block; height: 100%; width: 0; background: var(--c-progress-fill); }
.k-tool .col-sec { margin: var(--sp-4) 0 0; }
.k-tool .col-sec > h2 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); margin: 0 0 var(--sp-1); }
.k-tool .col-sec > h2 .col-bar { flex: 1 1 6rem; }
.k-tool .col-count { color: var(--fg-soft); font-size: var(--fs-s); font-weight: 400; white-space: nowrap; }
.k-tool .is-complete .col-count { color: var(--c-tip-good); }
.k-tool details.col-group { margin: 0 0 var(--sp-1); }
.k-tool details.col-group > summary { display: flex; flex-wrap: nowrap; width: 100%; box-sizing: border-box; align-items: center; gap: var(--sp-1) var(--sp-3); }
.k-tool .col-gname { flex: 1 1 auto; min-width: 0; color: var(--fg); overflow-wrap: anywhere; }
.k-tool details.col-group > summary .col-bar { flex: 0 1 6rem; min-width: 2.5rem; }
.k-tool .col-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); column-gap: var(--sp-3); }
.k-tool .col-item { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); border-top: 2px solid var(--c-line); min-width: 0; }
.k-tool .col-item .ent { min-width: 0; overflow-wrap: anywhere; }
.k-tool .col-item.is-done .ent { opacity: 0.6; }
.k-tool .col-more { margin: var(--sp-2) 0; }
.col-hide-done .col-item.is-done { display: none; }
.k-tool .col-gname .ico { vertical-align: middle; margin-right: var(--sp-1); }
.k-tool .col-sets { margin: var(--sp-1) 0; font-size: var(--fs-s); color: var(--fg-soft); }