/*
 * ColoringJoy Core - Category Library layout ([coloringjoy_library] and [coloringjoy_animal_library]).
 * Every selector starts with .cj-lib so it cannot affect other ColoringJoy grids.
 * The cards themselves are styled by the existing book/page card CSS and Card Settings.
 */
.cj-lib { --cj-navy: #244a76; --cj-navy-soft: #eaf0f7; width: 100%; margin: 28px 0; padding: 32px; box-sizing: border-box; color: #1f2d3d; background: #ffffff; border: 1px solid #e3e9f0; border-radius: 28px; }
.cj-lib *, .cj-lib *::before, .cj-lib *::after { box-sizing: border-box; }
.cj-lib [hidden] { display: none !important; }

/* Heading + description */
.cj-lib .cj-lib-head { margin: 0 0 24px; text-align: center; }
.cj-lib .cj-lib-heading { margin: 0 0 8px !important; font-size: clamp(26px, 3.4vw, 36px) !important; line-height: 1.2 !important; font-weight: 800 !important; color: var(--cj-navy) !important; }
.cj-lib .cj-lib-desc { max-width: 640px; margin: 0 auto; color: #5b6b7e; font-size: 17px; line-height: 1.6; }

/* Books / Pages tabs: two wide buttons, the selected one filled */
.cj-lib .cj-lib-tabs { display: flex; gap: 10px; width: 100%; margin: 0 0 28px; padding: 0 0 22px; border-bottom: 1px solid #e3e9f0; }
.cj-lib button.cj-lib-tab { appearance: none; flex: 1 1 0; min-height: 52px; margin: 0; padding: 12px 18px !important; border: 0 !important; border-radius: 14px !important; background: transparent !important; color: var(--cj-navy) !important; font: inherit; font-size: 18px; font-weight: 700; line-height: 1.2; text-align: center; text-transform: none; cursor: pointer; box-shadow: none; transition: background .15s ease, color .15s ease; }
.cj-lib button.cj-lib-tab:hover { background: var(--cj-navy-soft) !important; }
.cj-lib button.cj-lib-tab[aria-selected="true"] { background: var(--cj-navy) !important; color: #ffffff !important; }

/* Layout */
.cj-lib .cj-lib-panel { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 36px; align-items: start; }
.cj-lib.cj-lib-no-side .cj-lib-panel { grid-template-columns: minmax(0, 1fr); }
.cj-lib .cj-lib-main { min-width: 0; }
.cj-lib .cj-lib-side { position: sticky; top: 24px; }

/* Sidebar */
.cj-lib .cj-lib-side-title { margin: 0 0 12px !important; padding: 0 !important; font-size: 16px !important; font-weight: 800 !important; letter-spacing: .06em; text-transform: uppercase; line-height: 1.3 !important; color: var(--cj-navy) !important; }
.cj-lib .cj-lib-filters { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.cj-lib .cj-lib-filters li { margin: 0; padding: 0; list-style: none; }
.cj-lib button.cj-lib-filter { appearance: none; display: block; width: 100%; margin: 0; padding: 12px 16px !important; border: 0 !important; border-radius: 12px !important; background: transparent !important; color: #1f2d3d !important; font: inherit; font-size: 17px; font-weight: 500; line-height: 1.3; text-align: left; text-transform: none; cursor: pointer; box-shadow: none; transition: background .15s ease, color .15s ease; }
.cj-lib button.cj-lib-filter:hover { background: #f3f6fa !important; }
.cj-lib button.cj-lib-filter[aria-pressed="true"] { background: var(--cj-navy-soft) !important; color: var(--cj-navy) !important; font-weight: 800; }

/* Status line, grid area, empty state */
.cj-lib .cj-lib-summary { margin: 0 0 16px; color: #64748b; font-size: 14px; line-height: 1.5; }
.cj-lib .cj-lib-grid-wrap { transition: opacity .15s ease; }
.cj-lib.is-loading .cj-lib-grid-wrap { opacity: .5; pointer-events: none; }
.cj-lib .cj-lib-grid { margin: 0 !important; }
.cj-lib .cj-lib-empty { padding: 40px 24px; text-align: center; background: #ffffff; border: 2px dashed #d8e0ea; border-radius: 18px; }
.cj-lib .cj-lib-empty-title { margin: 0 0 8px; font-size: 18px; font-weight: 700; color: #142b45; }
.cj-lib .cj-lib-empty-text { margin: 0 0 18px; color: #64748b; }

/* Buttons that match the card button */
.cj-lib button.cj-lib-more-btn, .cj-lib button.cj-lib-reset { appearance: none; margin: 0; padding: 12px 26px !important; border: 0 !important; border-radius: 999px !important; background: #f2c94c !important; color: #222222 !important; font: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; cursor: pointer; text-transform: none; box-shadow: none; transition: background .15s ease; }
.cj-lib button.cj-lib-more-btn:hover, .cj-lib button.cj-lib-reset:hover { background: #e8b92b !important; color: #222222 !important; }
.cj-lib button.cj-lib-more-btn:disabled { opacity: .6; cursor: default; }
.cj-lib .cj-lib-more { margin-top: 28px; text-align: center; }

/* Visible keyboard focus */
.cj-lib button:focus-visible, .cj-lib a:focus-visible { outline: 3px solid #2b6cb0; outline-offset: 2px; }

/* Tablet and mobile: filters become a horizontally scrollable row above the grid. */
@media (max-width: 900px) {
	.cj-lib { padding: 20px; border-radius: 22px; }
	.cj-lib .cj-lib-panel { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.cj-lib .cj-lib-side { position: static; }
	.cj-lib .cj-lib-side-title { display: none; }
	.cj-lib .cj-lib-filters { flex-direction: row; flex-wrap: nowrap; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
	.cj-lib .cj-lib-filters li { flex: 0 0 auto; }
	.cj-lib button.cj-lib-filter { width: auto; white-space: nowrap; border: 1px solid #e3e9f0 !important; border-radius: 999px !important; padding: 8px 16px !important; background: #ffffff !important; font-size: 15px; }
	.cj-lib button.cj-lib-filter[aria-pressed="true"] { border-color: var(--cj-navy) !important; }
}
@media (max-width: 480px) {
	.cj-lib { padding: 16px; }
	.cj-lib button.cj-lib-tab { min-height: 46px; padding: 10px 8px !important; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.cj-lib .cj-lib-grid-wrap, .cj-lib button { transition: none; }
}