/* UI-U11-001/002 — shared Book/Note product detail + Explore Library. */
html[data-lms-design-system] .u11-product,
html[data-lms-design-system] .u11-library { display:grid; gap:var(--lms-space-6); color:var(--lms-color-text-primary); }
html[data-lms-design-system] .u11-product *,
html[data-lms-design-system] .u11-library * { min-width:0; }
html[data-lms-design-system] .u11-breadcrumb { display:flex; flex-wrap:wrap; gap:var(--lms-space-2); align-items:center; font-size:var(--lms-font-size-body-sm); color:var(--lms-color-text-muted); }
html[data-lms-design-system] .u11-breadcrumb a { color:var(--lms-color-text-secondary); text-decoration:none; }
html[data-lms-design-system] .u11-breadcrumb a:hover { color:var(--lms-color-brand-600); }

html[data-lms-design-system] .u11-product-hero { display:grid; grid-template-columns:minmax(16rem, .75fr) minmax(0,1.65fr); overflow:hidden; }
html[data-lms-design-system] .u11-product-cover { display:grid; align-content:start; gap:var(--lms-space-3); padding:var(--lms-space-4); background:var(--lms-color-surface-subtle); border-inline-end:1px solid var(--lms-color-divider); }
html[data-lms-design-system] .u11-product-cover > img { display:block; width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; border-radius:var(--lms-radius-md); background:var(--lms-color-surface); box-shadow:var(--lms-shadow-card); }
html[data-lms-design-system] .u11-cover-placeholder { display:grid; place-items:center; align-content:center; gap:var(--lms-space-2); width:100%; min-height:13rem; aspect-ratio:3/4; border:1px dashed var(--lms-color-border); border-radius:var(--lms-radius-md); background:var(--lms-color-surface); color:var(--lms-color-text-muted); }
html[data-lms-design-system] .u11-cover-placeholder [data-lms-icon] { width:3rem; height:3rem; color:var(--lms-color-brand-500); }
html[data-lms-design-system] .u11-sample-strip { display:grid; grid-auto-flow:column; grid-auto-columns:4.5rem; gap:var(--lms-space-2); overflow-x:auto; padding-block-end:.25rem; }
html[data-lms-design-system] .u11-sample-thumb { padding:0; border:2px solid transparent; border-radius:var(--lms-radius-sm); background:transparent; overflow:hidden; cursor:pointer; }
html[data-lms-design-system] .u11-sample-thumb:hover,
html[data-lms-design-system] .u11-sample-thumb:focus-visible { border-color:var(--lms-color-brand-500); outline:none; }
html[data-lms-design-system] .u11-sample-thumb img { display:block; width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; }
html[data-lms-design-system] .u11-product-main { display:grid; align-content:center; gap:var(--lms-space-4); padding:clamp(1.5rem,4vw,3rem); }
html[data-lms-design-system] .u11-product-kicker { display:flex; flex-wrap:wrap; gap:var(--lms-space-2); }
html[data-lms-design-system] .u11-product-title { margin:0; font-size:clamp(2rem,4vw,3.25rem); line-height:1.25; color:var(--lms-color-text-primary); }
html[data-lms-design-system] .u11-product-subtitle { margin:0; color:var(--lms-color-text-secondary); font-size:var(--lms-font-size-body-lg); }
html[data-lms-design-system] .u11-product-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--lms-space-2); }
html[data-lms-design-system] .u11-product-facts > div { display:grid; gap:.25rem; padding:var(--lms-space-3); border:1px solid var(--lms-color-divider); border-radius:var(--lms-radius-md); background:var(--lms-color-surface-subtle); }
html[data-lms-design-system] .u11-product-facts span { color:var(--lms-color-text-muted); font-size:var(--lms-font-size-caption); }
html[data-lms-design-system] .u11-product-facts strong,
html[data-lms-design-system] .u11-product-facts a { color:var(--lms-color-text-primary); font-weight:700; text-decoration:none; }
html[data-lms-design-system] .u11-product-lead { margin:0; color:var(--lms-color-text-secondary); line-height:2; }
html[data-lms-design-system] .u11-product-actions { display:flex; flex-wrap:wrap; gap:var(--lms-space-2); }
html[data-lms-design-system] .u11-access-note { display:flex; gap:var(--lms-space-2); align-items:flex-start; margin:0; padding:var(--lms-space-3); border:1px solid var(--lms-color-warning-border); border-radius:var(--lms-radius-md); background:var(--lms-color-warning-bg); color:var(--lms-color-text-secondary); }
html[data-lms-design-system] .u11-access-note [data-lms-icon] { flex:0 0 1.2rem; width:1.2rem; height:1.2rem; margin-block-start:.25rem; }
html[data-lms-design-system] .u11-product-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(16rem,.34fr); gap:var(--lms-space-4); align-items:start; }
html[data-lms-design-system] .u11-product-content { display:grid; gap:var(--lms-space-4); }
html[data-lms-design-system] .u11-product-aside { position:sticky; top:6rem; }
html[data-lms-design-system] .u11-rich-copy { line-height:2; color:var(--lms-color-text-secondary); }
html[data-lms-design-system] .u11-rich-copy p:last-child { margin-bottom:0; }
html[data-lms-design-system] .u11-metadata { display:grid; gap:0; margin:0; }
html[data-lms-design-system] .u11-metadata > div { display:grid; grid-template-columns:minmax(6rem,.8fr) minmax(0,1.2fr); gap:var(--lms-space-2); padding:var(--lms-space-2) 0; border-block-end:1px solid var(--lms-color-divider); }
html[data-lms-design-system] .u11-metadata > div:last-child { border-block-end:0; }
html[data-lms-design-system] .u11-metadata dt { color:var(--lms-color-text-muted); font-weight:500; }
html[data-lms-design-system] .u11-metadata dd { margin:0; color:var(--lms-color-text-primary); font-weight:600; overflow-wrap:anywhere; }
html[data-lms-design-system] .u11-sample-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--lms-space-3); }
html[data-lms-design-system] .u11-sample-grid figure { margin:0; display:grid; gap:var(--lms-space-2); }
html[data-lms-design-system] .u11-sample-grid img { display:block; width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; border-radius:var(--lms-radius-md); border:1px solid var(--lms-color-divider); }
html[data-lms-design-system] .u11-sample-grid figcaption { color:var(--lms-color-text-muted); font-size:var(--lms-font-size-caption); }
html[data-lms-design-system] .u11-section-heading { display:flex; justify-content:space-between; align-items:end; gap:var(--lms-space-3); }
html[data-lms-design-system] .u11-section-heading h2 { margin:0; }
html[data-lms-design-system] .u11-eyebrow { margin:0 0 .25rem; color:var(--lms-color-brand-600); font-weight:700; font-size:var(--lms-font-size-caption); }
html[data-lms-design-system] .u11-related { display:grid; gap:var(--lms-space-3); }
html[data-lms-design-system] .u11-related-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--lms-space-3); }
html[data-lms-design-system] .u11-related-card { display:grid; grid-template-columns:6rem minmax(0,1fr); gap:var(--lms-space-3); padding:var(--lms-space-3); border:1px solid var(--lms-color-divider); border-radius:var(--lms-radius-md); background:var(--lms-color-surface); color:var(--lms-color-text-primary); text-decoration:none; box-shadow:var(--lms-shadow-card); }
html[data-lms-design-system] .u11-related-card:hover { border-color:var(--lms-color-brand-400); }
html[data-lms-design-system] .u11-related-cover { display:grid; place-items:center; overflow:hidden; border-radius:var(--lms-radius-sm); background:var(--lms-color-surface-subtle); aspect-ratio:3/4; }
html[data-lms-design-system] .u11-related-cover img { width:100%; height:100%; object-fit:cover; }
html[data-lms-design-system] .u11-related-cover [data-lms-icon] { width:2rem; height:2rem; }
html[data-lms-design-system] .u11-related-card h3 { margin:.4rem 0 .25rem; font-size:var(--lms-font-size-body); }
html[data-lms-design-system] .u11-related-card p { margin:0 0 .5rem; color:var(--lms-color-text-muted); }
html[data-lms-design-system] .u11-product .lms-card__title,
html[data-lms-design-system] .u11-product .u11-section-heading h2,
html[data-lms-design-system] .u11-product .u11-related-card h3,
html[data-lms-design-system] .u11-library .u11-library-card h2 { color:var(--lms-color-text-primary); }
html[data-lms-design-system] .u11-product .u11-breadcrumb,
html[data-lms-design-system] .u11-product .u11-product-facts span { color:var(--lms-color-text-secondary); }
html[data-lms-design-system] .u11-library .lms-page-header__eyebrow { color:var(--lms-color-link); }
html[data-lms-design-system] .u11-library .lms-page-header__description { color:var(--lms-color-text-secondary); }


html[data-lms-design-system] .u11-library-header { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; }
html[data-lms-design-system] .u11-library-stats { display:grid; grid-template-columns:repeat(4,minmax(5rem,1fr)); gap:var(--lms-space-2); }
html[data-lms-design-system] .u11-library-stats > div { display:grid; justify-items:center; padding:var(--lms-space-2) var(--lms-space-3); border:1px solid var(--lms-color-divider); border-radius:var(--lms-radius-md); background:var(--lms-color-surface); }
html[data-lms-design-system] .u11-library-stats strong { font-size:1.5rem; }
html[data-lms-design-system] .u11-library-stats span { color:var(--lms-color-text-muted); font-size:var(--lms-font-size-caption); }
html[data-lms-design-system] .u11-library-toolbar { display:none; justify-content:space-between; gap:var(--lms-space-2); }
html[data-lms-design-system] .u11-filter-grid { display:grid; grid-template-columns:minmax(15rem,2fr) repeat(4,minmax(9rem,1fr)) auto; gap:var(--lms-space-3); align-items:end; }
html[data-lms-design-system] .u11-field { display:grid; gap:var(--lms-space-1); color:var(--lms-color-text-secondary); font-weight:600; }
html[data-lms-design-system] .u11-field > span { font-size:var(--lms-font-size-caption); }
html[data-lms-design-system] .u11-filter-actions { display:flex; }
html[data-lms-design-system] .u11-library-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--lms-space-4); }
html[data-lms-design-system] .u11-library-card { display:grid; grid-template-rows:13rem 1fr; min-height:31rem; border:1px solid var(--lms-color-divider); border-radius:var(--lms-radius-lg); overflow:hidden; background:var(--lms-color-surface); box-shadow:var(--lms-shadow-card); }
html[data-lms-design-system] .u11-library-cover { min-height:0; overflow:hidden; background:var(--lms-color-surface-subtle); }
html[data-lms-design-system] .u11-library-cover img { width:100%; height:100%; object-fit:cover; }
html[data-lms-design-system] .u11-library-cover .u11-cover-placeholder { min-height:100%; height:100%; aspect-ratio:auto; border:0; border-radius:0; }
html[data-lms-design-system] .u11-library-card__body { display:grid; grid-template-rows:auto auto minmax(3.5rem,auto) auto 1fr; gap:var(--lms-space-3); padding:var(--lms-space-4); }
html[data-lms-design-system] .u11-library-card__badges { display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--lms-space-2); }
html[data-lms-design-system] .u11-library-card h2 { margin:0; font-size:1.15rem; line-height:1.6; }
html[data-lms-design-system] .u11-library-card__subtitle,
html[data-lms-design-system] .u11-library-card__description,
html[data-lms-design-system] .u11-library-card__category { margin:0; color:var(--lms-color-text-muted); }
html[data-lms-design-system] .u11-library-card__description { line-height:1.8; }
html[data-lms-design-system] .u11-library-card__category { display:flex; gap:.35rem; align-items:center; font-size:var(--lms-font-size-caption); }
html[data-lms-design-system] .u11-library-card__category [data-lms-icon] { width:1rem; height:1rem; }
html[data-lms-design-system] .u11-library-card__footer { display:flex; justify-content:space-between; align-items:end; gap:var(--lms-space-2); margin-block-start:auto; }
html[data-lms-design-system] .u11-owner-link { color:var(--lms-color-text-secondary); text-decoration:none; font-size:var(--lms-font-size-caption); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html[data-lms-design-system] .u11-pagination { display:flex; justify-content:space-between; align-items:center; gap:var(--lms-space-3); padding:var(--lms-space-3); border:1px solid var(--lms-color-divider); border-radius:var(--lms-radius-md); }
html[data-lms-design-system] .u11-pagination > div { display:flex; gap:var(--lms-space-2); align-items:center; }
html[data-lms-design-system] .u11-skeleton-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--lms-space-4); }
html[data-lms-design-system] .u11-skeleton-grid[hidden] { display:none !important; }
html[data-lms-design-system] .u11-skeleton-card { display:grid; gap:var(--lms-space-3); min-height:29rem; padding:var(--lms-space-4); border:1px solid var(--lms-color-divider); border-radius:var(--lms-radius-lg); background:var(--lms-color-surface); }
html[data-lms-design-system] .u11-skeleton-card span { display:block; height:1.1rem; border-radius:999px; background:linear-gradient(90deg,var(--lms-color-surface-subtle),var(--lms-color-surface-elevated),var(--lms-color-surface-subtle)); background-size:200% 100%; animation:u11-skeleton 1.2s linear infinite; }
html[data-lms-design-system] .u11-skeleton-card span:first-child { height:13rem; border-radius:var(--lms-radius-md); }
@keyframes u11-skeleton { to { background-position:-200% 0; } }

@media (max-width:1199px) {
  html[data-lms-design-system] .u11-filter-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  html[data-lms-design-system] .u11-field--search { grid-column:span 2; }
  html[data-lms-design-system] .u11-library-grid,
  html[data-lms-design-system] .u11-skeleton-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  html[data-lms-design-system] .u11-related-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:767px) {
  html[data-lms-design-system] .u11-product,
  html[data-lms-design-system] .u11-library { gap:var(--lms-space-4); }
  html[data-lms-design-system] .u11-product-hero,
  html[data-lms-design-system] .u11-product-layout,
  html[data-lms-design-system] .u11-library-header { grid-template-columns:1fr; }
  html[data-lms-design-system] .u11-product-cover { border-inline-end:0; border-block-end:1px solid var(--lms-color-divider); }
  html[data-lms-design-system] .u11-product-cover > img,
  html[data-lms-design-system] .u11-cover-placeholder { max-height:26rem; aspect-ratio:3/4; }
  html[data-lms-design-system] .u11-product-facts { grid-template-columns:1fr; }
  html[data-lms-design-system] .u11-product-actions .lms-btn { width:100%; }
  html[data-lms-design-system] .u11-product-aside { position:static; }
  html[data-lms-design-system] .u11-sample-grid { grid-template-columns:1fr; }
  html[data-lms-design-system] .u11-related-grid,
  html[data-lms-design-system] .u11-library-grid,
  html[data-lms-design-system] .u11-skeleton-grid { grid-template-columns:1fr; }
  html[data-lms-design-system] .u11-related-card { grid-template-columns:5rem minmax(0,1fr); }
  html[data-lms-design-system] .u11-section-heading { align-items:start; flex-direction:column; }
  html[data-lms-design-system] .u11-library-stats { grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }
  html[data-lms-design-system] .u11-library-toolbar { display:flex; }
  html[data-lms-design-system] .u11-filter-panel { display:none; }
  html[data-lms-design-system] .u11-filter-panel.is-open { display:block; }
  html[data-lms-design-system] .u11-filter-grid { grid-template-columns:1fr; }
  html[data-lms-design-system] .u11-field--search { grid-column:auto; }
  html[data-lms-design-system] .u11-filter-actions .lms-btn { width:100%; }
  html[data-lms-design-system] .u11-library-card { grid-template-rows:12rem 1fr; min-height:29rem; }
  html[data-lms-design-system] .u11-pagination { align-items:flex-start; flex-direction:column; }
  html[data-lms-design-system] .u11-pagination > div:last-child { width:100%; justify-content:space-between; }
}
@media (prefers-reduced-motion:reduce) {
  html[data-lms-design-system] .u11-skeleton-card span { animation:none !important; }
  html[data-lms-design-system] .u11-library-card,
  html[data-lms-design-system] .u11-related-card { transition:none !important; }
}