/* One color family per category, shared by filters and resource labels. */
body:has(#reader-grid) :is([data-filter-family="course"],.tag-course){--family-bg:#eaf2ff;--family-fg:#173f79;--family-selected:#173f79}
html[data-theme="dark"] body:has(#reader-grid) :is([data-filter-family="course"],.tag-course){--family-bg:#243d60;--family-fg:#d6e6ff;--family-selected:#d6e6ff}
body:has(#reader-grid) :is([data-filter-family="kind"],:is(.tag-nonfiction,.tag-literature,.tag-primary)){--family-bg:#f3edfc;--family-fg:#613986;--family-selected:#613986}
html[data-theme="dark"] body:has(#reader-grid) :is([data-filter-family="kind"],:is(.tag-nonfiction,.tag-literature,.tag-primary)){--family-bg:#48325e;--family-fg:#edddff;--family-selected:#edddff}
body:has(#reader-grid) :is([data-filter-family="source"],:is(.tag-use-curated,.tag-use-library,.tag-use-archive)){--family-bg:#e4f5f2;--family-fg:#155e55;--family-selected:#155e55}
html[data-theme="dark"] body:has(#reader-grid) :is([data-filter-family="source"],:is(.tag-use-curated,.tag-use-library,.tag-use-archive)){--family-bg:#204b46;--family-fg:#c7f3ea;--family-selected:#c7f3ea}
body:has(#reader-grid) :is([data-filter-family="rights"],:is(.tag-rights-open,.tag-rights-nd,.tag-rights-free,.tag-rights-varies)){--family-bg:#fff3d8;--family-fg:#704909;--family-selected:#704909}
html[data-theme="dark"] body:has(#reader-grid) :is([data-filter-family="rights"],:is(.tag-rights-open,.tag-rights-nd,.tag-rights-free,.tag-rights-varies)){--family-bg:#534321;--family-fg:#ffe4a6;--family-selected:#ffe4a6}

body:has(#reader-grid) .toolbar .filter-group{padding:16px 0 16px 16px;border:0;border-left:4px solid var(--family-fg);margin:16px 0}
body:has(#reader-grid) .toolbar .filter-group-title{display:block;margin:0 0 10px;font-size:1rem;color:var(--family-fg)!important}
html body:has(#reader-grid) .toolbar .filter-group .filter-button,
html body:has(#reader-grid) .tag{background:var(--family-bg)!important;color:var(--family-fg)!important;border:1px solid var(--family-fg)!important}
html body:has(#reader-grid) .toolbar .filter-group .filter-button{position:relative;min-height:44px;max-width:100%;padding:8px 2em;text-align:center;justify-content:center;white-space:normal}
html body:has(#reader-grid) .toolbar .filter-group .filter-button::before{content:"";position:absolute;left:.65em;top:50%;transform:translateY(-50%);width:1em;margin:0}
html body:has(#reader-grid) .toolbar .filter-group .filter-button.active{background:var(--family-selected)!important;color:#fff!important;box-shadow:inset 0 0 0 1px var(--family-selected)}
html body:has(#reader-grid) .toolbar .filter-group .filter-button.active::before{content:"✓"}
html[data-theme="dark"] body:has(#reader-grid) .toolbar .filter-group .filter-button.active{color:#142033!important}
html body:has(#reader-grid) .toolbar .filter-group .filter-button:hover{text-decoration:underline;text-underline-offset:3px}
html body:has(#reader-grid) .toolbar .filter-group .filter-button:focus-visible{outline:3px solid var(--family-fg)!important;outline-offset:3px}
body:has(#reader-grid) .rights-help{margin-top:20px;padding:14px 16px;border:1px solid #718096;border-radius:10px}
body:has(#reader-grid) .rights-help summary{cursor:pointer;font-weight:700;min-height:28px}
body:has(#reader-grid) .rights-key{margin-top:12px}
body:has(#reader-grid) .filter-toolbar-actions{margin-top:16px}
@media(max-width:600px){body:has(#reader-grid) .toolbar .filter-group{padding-left:12px}body:has(#reader-grid) .filter-row{gap:10px}}