/* ════════════════════════════════════════════════════════════════
   knowledge.css — Member Portal Knowledge & Library Module
   Figma Console Design System Token Pure (2026-09-17)

   Unified Knowledge module: Documents & Guides + My Notebook.
   Adheres to --oecta-* tokens. Zero raw hex literals.
   Quoted citations use Newsreader italic with 3px amber rule.
   Mobile breakpoint: 768px.
   ════════════════════════════════════════════════════════════════ */

/* ── Panel shell ─────────────────────────────────────────────── */
#library { display: flex; flex-direction: column; min-width: 0; }
#library .lib-shell {
  background: var(--oecta-surface-lowest);
  border-radius: var(--oecta-radius-xl);
  box-shadow: var(--oecta-shadow-sm);
  overflow: hidden;
}
#library .oecta-tabs { border-radius: var(--oecta-radius-xl) var(--oecta-radius-xl) 0 0; }
#library .oecta-tab { min-height: 44px; }
#library .oecta-tab .material-icons-outlined { font-size: 18px; }
#library .oecta-tab-count { color: var(--oecta-text-muted); font-family: var(--oecta-font-mono); }
#library [role="tabpanel"] { padding: var(--oecta-space-xl); }
#library [hidden] { display: none !important; }

/* ── Focus ─────────────────────────────────────────────────── */
#library :where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--oecta-surface-lowest), 0 0 0 4px var(--oecta-primary-container);
}
#library .oecta-tab:focus-visible { border-radius: var(--oecta-radius-sm); }

/* ── Toolbar row (search + filters) ─────────────────────────── */
#library .lib-toolbar { display: flex; align-items: center; gap: var(--oecta-space-md); flex-wrap: wrap; margin-bottom: var(--oecta-space-lg); }
#library .lib-search { position: relative; flex: 1 1 280px; min-width: 0; }
#library .lib-search .material-icons-outlined {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-size: 20px; color: var(--oecta-on-surface-variant); pointer-events: none;
}
#library .oecta-input { font-size: 1rem; min-height: 44px; }
#library .lib-search .oecta-input { padding-left: 44px; }
#library .lib-select { flex: 0 1 260px; min-width: 200px; }
#library .lib-select .oecta-input { font-family: var(--oecta-font-body); }

/* Category / type chips */
#library .oecta-filter-chips { gap: var(--oecta-space-sm); margin-bottom: var(--oecta-space-xl); display: flex; flex-wrap: wrap; }
#library .oecta-filter-chip {
  height: 44px; padding: 0 14px;
  font-size: var(--oecta-text-sm);
  border-radius: var(--oecta-radius-pill);
  color: var(--oecta-on-surface-variant);
  background: var(--oecta-surface-container-low);
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background var(--oecta-duration-fast) var(--oecta-ease), color var(--oecta-duration-fast) var(--oecta-ease);
}
#library .oecta-filter-chip:hover { background: var(--oecta-surface-container); color: var(--oecta-on-surface); }
#library .oecta-filter-chip.is-active { background: var(--oecta-primary-container); color: var(--oecta-surface-lowest); }
#library .oecta-filter-chip-count { font-family: var(--oecta-font-mono); opacity: 1; color: inherit; font-size: var(--oecta-text-xs); }

/* ── Documents tab ──────────────────────────────────────────── */
#library .lib-lead {
  display: grid; grid-template-columns: 1fr auto; gap: var(--oecta-space-xl);
  align-items: center;
  background: var(--oecta-surface-low);
  border-radius: var(--oecta-radius-lg);
  padding: var(--oecta-space-xl);
  margin-bottom: var(--oecta-space-2xl);
}
#library .lib-lead-eyebrow { font-family: var(--oecta-font-body); font-size: var(--oecta-text-xs); font-weight: var(--oecta-weight-bold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--oecta-on-surface-variant); margin-bottom: var(--oecta-space-sm); }
#library .lib-lead-title { font-family: var(--oecta-font-display); font-size: var(--oecta-text-xl); font-weight: var(--oecta-weight-extrabold); letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 var(--oecta-space-sm); color: var(--oecta-on-surface); }
#library .lib-lead-sub { font-size: var(--oecta-text-md); color: var(--oecta-on-surface-variant); line-height: 1.5; margin: 0 0 var(--oecta-space-lg); max-width: 56ch; }
#library .lib-lead-parts { display: flex; gap: var(--oecta-space-lg); flex-wrap: wrap; }
#library .lib-lead-part { font-family: var(--oecta-font-mono); font-size: var(--oecta-text-sm); color: var(--oecta-on-surface-variant); display: inline-flex; align-items: center; gap: 6px; }
#library .lib-lead-part::before { content: ''; width: 6px; height: 6px; border-radius: var(--oecta-radius-round); background: var(--oecta-accent); }
#library .lib-lead-actions { display: flex; flex-direction: column; gap: var(--oecta-space-sm); }
#library .oecta-btn { min-height: 44px; }

#library .lib-group-head {
  display: flex; align-items: baseline; gap: var(--oecta-space-sm);
  padding: var(--oecta-space-lg) 0 var(--oecta-space-sm);
  font-family: var(--oecta-font-display); font-size: var(--oecta-text-md); font-weight: var(--oecta-weight-bold);
  color: var(--oecta-on-surface);
}
#library .lib-group-head .lib-group-count { font-family: var(--oecta-font-mono); font-size: var(--oecta-text-xs); color: var(--oecta-text-muted); font-weight: var(--oecta-weight-regular); }
#library .lib-list { display: flex; flex-direction: column; gap: var(--oecta-space-sm); }

#library .lib-doc {
  display: grid; grid-template-columns: 48px 1fr auto; gap: var(--oecta-space-lg); align-items: center;
  padding: var(--oecta-space-md) var(--oecta-space-lg);
  border-radius: var(--oecta-radius-lg);
  background: var(--oecta-surface-lowest);
  box-shadow: var(--oecta-shadow-xs);
  position: relative;
  transition: background var(--oecta-duration-fast) var(--oecta-ease), box-shadow var(--oecta-duration-base) var(--oecta-ease);
}
#library .lib-doc-title::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
#library .lib-doc:focus-within { box-shadow: var(--oecta-shadow-md); }
#library .lib-doc-actions { position: relative; z-index: 1; }
#library .lib-doc:hover { background: var(--oecta-surface-low); box-shadow: var(--oecta-shadow-md); }
#library .lib-doc-glyph {
  width: 48px; height: 48px; border-radius: var(--oecta-radius-md);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--oecta-surface-container); color: var(--oecta-primary-container);
}
#library .lib-doc-glyph.is-guide { background: var(--oecta-chip-payment-bg); color: var(--oecta-chip-payment-fg); }
#library .lib-doc-glyph .material-icons-outlined { font-size: 24px; }
#library .lib-doc-main { min-width: 0; }
#library .lib-doc-title {
  display: block; font-family: var(--oecta-font-display); font-size: var(--oecta-text-md); font-weight: var(--oecta-weight-bold);
  color: var(--oecta-on-surface); text-decoration: none; margin: 0 0 2px; line-height: 1.3;
}
#library .lib-doc-title:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--oecta-accent); }
#library .lib-doc-desc { font-size: var(--oecta-text-sm); color: var(--oecta-on-surface-variant); line-height: 1.45; margin: 0 0 6px; }
#library .lib-doc-meta { display: flex; align-items: center; gap: var(--oecta-space-sm); flex-wrap: wrap; font-family: var(--oecta-font-mono); font-size: var(--oecta-text-xs); color: var(--oecta-text-muted); }
#library .lib-doc-meta .lib-sep { color: var(--oecta-outline-variant); }
#library .lib-doc-actions { display: flex; align-items: center; gap: var(--oecta-space-xs); position: relative; z-index: 1; }
#library .lib-icon-btn {
  width: 44px; height: 44px; border: 0; border-radius: var(--oecta-radius-md);
  background: transparent; color: var(--oecta-on-surface-variant); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--oecta-duration-fast) var(--oecta-ease), color var(--oecta-duration-fast) var(--oecta-ease);
}
#library .lib-icon-btn:hover { background: var(--oecta-surface-container); color: var(--oecta-on-surface); }
#library .lib-icon-btn .material-icons-outlined { font-size: 22px; }
#library .lib-clip-btn[aria-pressed="true"] { background: var(--oecta-accent); color: var(--oecta-primary); }
#library .lib-clip-btn[aria-pressed="true"]:hover { background: var(--oecta-accent-hover); }

/* ── Empty state ─────────────────────────────────────────────── */
#library .lib-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--oecta-space-3xl) var(--oecta-space-xl); }
#library .lib-empty-disc {
  width: 72px; height: 72px; border-radius: var(--oecta-radius-round);
  background: var(--oecta-surface-container); color: var(--oecta-primary-container);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--oecta-space-lg);
}
#library .lib-empty-disc.is-accent { background: var(--oecta-warning-soft); color: var(--oecta-chip-payment-fg); }
#library .lib-empty-disc .material-icons-outlined { font-size: 32px; }
#library .lib-empty-title { font-family: var(--oecta-font-display); font-size: var(--oecta-text-lg); font-weight: var(--oecta-weight-bold); color: var(--oecta-on-surface); margin: 0 0 var(--oecta-space-sm); }
#library .lib-empty-body { font-size: var(--oecta-text-md); color: var(--oecta-text-muted); line-height: 1.5; max-width: 42ch; margin: 0 0 var(--oecta-space-xl); }
#library .lib-empty-actions { display: flex; gap: var(--oecta-space-sm); flex-wrap: wrap; justify-content: center; }

/* ── Notebook tab ───────────────────────────────────────────── */
#library .nb-composer {
  background: var(--oecta-surface-low);
  border-radius: var(--oecta-radius-lg);
  margin-bottom: var(--oecta-space-xl);
  transition: box-shadow var(--oecta-duration-base) var(--oecta-ease);
}
#library .nb-composer.is-open { background: var(--nb-card-bg, var(--oecta-surface-lowest)); box-shadow: var(--oecta-shadow-lg); }
#library .nb-composer-collapsed {
  display: flex; align-items: center; gap: var(--oecta-space-sm);
  width: 100%; min-height: 56px; padding: 6px 6px 6px var(--oecta-space-lg);
  border: 0; background: transparent; cursor: text; text-align: left;
  font-family: var(--oecta-font-body); font-size: 1rem; color: var(--oecta-text-muted);
  border-radius: var(--oecta-radius-lg);
}
#library .nb-composer-collapsed .nb-ph { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#library .nb-ph-short { display: none; }
#library .nb-composer.is-open .nb-composer-collapsed { display: none; }
#library .nb-composer-expanded { display: none; padding: var(--oecta-space-lg); }
#library .nb-composer.is-open .nb-composer-expanded { display: block; }
#library .nb-comp-head { display: flex; align-items: center; gap: var(--oecta-space-sm); }
#library .nb-comp-title {
  flex: 1; min-width: 0; border: 0; background: transparent; padding: 8px 0;
  font-family: var(--oecta-font-display); font-size: var(--oecta-text-lg); font-weight: var(--oecta-weight-bold); color: var(--oecta-on-surface);
}
#library .nb-comp-title::placeholder, #library .nb-comp-body::placeholder, #library .nb-comp-tags::placeholder { color: var(--oecta-text-subtle); }
#library .nb-comp-body {
  width: 100%; border: 0; background: transparent; resize: vertical; min-height: 88px; padding: 4px 0;
  font-family: var(--oecta-font-body); font-size: 1rem; line-height: 1.5; color: var(--oecta-on-surface);
}
#library .nb-comp-tags { width: 100%; border: 0; background: transparent; padding: 8px 0; font-family: var(--oecta-font-mono); font-size: 1rem; color: var(--oecta-on-surface-variant); }
#library .nb-comp-foot { display: flex; align-items: center; gap: var(--oecta-space-sm); flex-wrap: wrap; margin-top: var(--oecta-space-sm); }
#library .nb-comp-tools { display: flex; align-items: center; gap: var(--oecta-space-xs); flex-wrap: wrap; flex: 1; }
#library .nb-comp-actions { display: flex; gap: var(--oecta-space-sm); margin-left: auto; }
#library .nb-swatches { display: inline-flex; gap: 4px; padding: 0 var(--oecta-space-xs); }
#library .nb-swatch {
  width: 32px; height: 32px; border-radius: var(--oecta-radius-round); border: 0; cursor: pointer;
  background: var(--swatch); box-shadow: inset 0 0 0 1.5px var(--oecta-outline-variant);
  display: inline-flex; align-items: center; justify-content: center; color: var(--oecta-primary-container);
  margin: 6px 0;
}
#library .nb-swatch[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--oecta-primary-container); }
#library .nb-swatch[data-color="default"]  { --swatch: var(--oecta-surface-lowest); }
#library .nb-swatch[data-color="amber"]    { --swatch: var(--oecta-warning-soft); }
#library .nb-swatch[data-color="blue"]     { --swatch: var(--oecta-info-soft); }
#library .nb-swatch[data-color="sage"]     { --swatch: var(--oecta-success-soft); }
#library .nb-swatch[data-color="lavender"] { --swatch: var(--oecta-chip-feedback-bg); }
#library .nb-swatch[data-color="rose"]     { --swatch: var(--oecta-error-soft); }
#library .nb-swatch[data-color="slate"]    { --swatch: var(--oecta-bg-subtle); }
#library .nb-swatch .material-icons-outlined { font-size: 16px; display: none; }
#library .nb-swatch[aria-checked="true"] .material-icons-outlined { display: inline; }
#library .nb-comp-section { min-width: 200px; }
#library .nb-comp-section .oecta-input { min-height: 40px; padding-top: 6px; padding-bottom: 6px; }

/* Card colours */
#library .nb-color-default  { --nb-card-bg: var(--oecta-surface-lowest); }
#library .nb-color-amber    { --nb-card-bg: var(--oecta-warning-soft); }
#library .nb-color-blue     { --nb-card-bg: var(--oecta-info-soft); }
#library .nb-color-sage     { --nb-card-bg: var(--oecta-success-soft); }
#library .nb-color-lavender { --nb-card-bg: var(--oecta-chip-feedback-bg); }
#library .nb-color-rose     { --nb-card-bg: var(--oecta-error-soft); }
#library .nb-color-slate    { --nb-card-bg: var(--oecta-bg-subtle); }

/* Filters: section select + type chips + tags */
#library .nb-type-filter { display: inline-flex; gap: var(--oecta-space-xs); margin-bottom: 0; }
#library .nb-tags { display: flex; gap: var(--oecta-space-sm); flex-wrap: wrap; align-items: center; margin: calc(-1 * var(--oecta-space-md)) 0 var(--oecta-space-xl); }
#library .nb-tags-label { font-family: var(--oecta-font-body); font-size: var(--oecta-text-xs); font-weight: var(--oecta-weight-bold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--oecta-text-muted); margin-right: var(--oecta-space-xs); }
#library .oecta-tag-pill {
  cursor: pointer; min-height: 32px; padding: 4px 10px;
  font-family: var(--oecta-font-mono); font-weight: var(--oecta-weight-medium);
  border-radius: var(--oecta-radius-pill); border: 0;
  background: var(--oecta-surface-container); color: var(--oecta-on-surface-variant);
  transition: background var(--oecta-duration-fast) var(--oecta-ease), color var(--oecta-duration-fast) var(--oecta-ease);
}
#library .oecta-tag-pill:hover { background: var(--oecta-surface-container-high); color: var(--oecta-on-surface); }
#library .oecta-tag-pill.is-emphasis { background: var(--oecta-primary-container); color: var(--oecta-surface-lowest); }

/* Shelves + bento grid */
#library .nb-shelf-head { display: flex; align-items: center; gap: var(--oecta-space-sm); font-family: var(--oecta-font-body); font-size: var(--oecta-text-xs); font-weight: var(--oecta-weight-bold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--oecta-text-muted); margin: 0 0 var(--oecta-space-md); }
#library .nb-shelf-head .material-icons-outlined { font-size: 15px; color: var(--oecta-accent); }
#library .nb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--oecta-space-lg); margin-bottom: var(--oecta-space-2xl); }
#library .nb-grid .nb-card.is-pinned { grid-column: span 2; }

/* The one card: note / checklist / clip */
#library .nb-card {
  background: var(--nb-card-bg, var(--oecta-surface-lowest));
  border-radius: var(--oecta-radius-lg);
  box-shadow: var(--oecta-shadow-sm);
  padding: var(--oecta-space-lg) var(--oecta-space-lg) var(--oecta-space-sm);
  display: flex; flex-direction: column; gap: var(--oecta-space-sm);
  transition: box-shadow var(--oecta-duration-base) var(--oecta-ease), transform var(--oecta-duration-base) var(--oecta-ease);
}
#library .nb-card:hover { box-shadow: var(--oecta-shadow-md); }
#library .nb-card-head { display: flex; align-items: center; gap: var(--oecta-space-sm); min-height: 44px; margin: -6px 0; }
#library .nb-card-sec { display: inline-flex; align-items: center; gap: 5px; font-size: var(--oecta-text-xs); font-weight: var(--oecta-weight-bold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--oecta-text-muted); flex: 1; min-width: 0; }
#library .nb-card-sec .material-icons-outlined { font-size: 15px; }
#library .nb-pin[aria-pressed="true"] { color: var(--oecta-primary-container); }
#library .nb-pin[aria-pressed="true"] .material-icons-outlined { transform: rotate(-30deg); }

#library .nb-cite {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  min-height: 32px; padding: 4px 10px 4px 8px; border: 0; cursor: pointer;
  border-radius: var(--oecta-radius-sm);
  background: var(--oecta-surface-lowest);
  box-shadow: inset 0 0 0 1.5px var(--oecta-outline-variant);
  font-family: var(--oecta-font-mono); font-size: var(--oecta-text-xs); font-weight: var(--oecta-weight-medium); color: var(--oecta-primary-container);
  text-align: left;
}
#library .nb-cite:hover { box-shadow: inset 0 0 0 1.5px var(--oecta-primary-container); }
#library .nb-cite .material-icons-outlined { font-size: 15px; }
#library .nb-cite .nb-cite-src { color: var(--oecta-text-muted); font-family: var(--oecta-font-body); font-weight: var(--oecta-weight-regular); }

/* Quoted clause: Newsreader italic with 3px amber inset rule */
#library .nb-quote {
  font-family: 'Newsreader', Georgia, serif; font-style: italic; font-weight: 500;
  font-size: var(--oecta-text-lg); line-height: 1.4; color: var(--oecta-on-surface);
  margin: var(--oecta-space-xs) 0; padding-left: var(--oecta-space-md);
  box-shadow: inset 3px 0 0 var(--oecta-accent);
}
#library .nb-card-title { font-family: var(--oecta-font-display); font-size: var(--oecta-text-lg); font-weight: var(--oecta-weight-bold); letter-spacing: -0.01em; line-height: 1.25; margin: 0; color: var(--oecta-on-surface); }
#library .nb-card-text { font-size: var(--oecta-text-md); line-height: 1.5; color: var(--oecta-on-surface-variant); margin: 0; }
#library .nb-card-text p { margin: 0 0 var(--oecta-space-sm); }
#library .nb-card-text p:last-child { margin: 0; }

#library .nb-chk { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
#library .nb-chk-item { display: flex; align-items: center; gap: var(--oecta-space-md); min-height: 44px; cursor: pointer; font-size: var(--oecta-text-md); color: var(--oecta-on-surface); }
#library .nb-chk-item input { position: absolute; opacity: 0; width: 1px; height: 1px; }
#library .nb-chk-box {
  width: 22px; height: 22px; border-radius: var(--oecta-radius-sm); flex-shrink: 0;
  box-shadow: inset 0 0 0 2px var(--oecta-outline); background: var(--oecta-surface-lowest);
  display: inline-flex; align-items: center; justify-content: center; color: var(--oecta-surface-lowest);
}
#library .nb-chk-box .material-icons-outlined { font-size: 16px; display: none; }
#library .nb-chk-item input:checked + .nb-chk-box { background: var(--oecta-primary-container); box-shadow: none; }
#library .nb-chk-item input:checked + .nb-chk-box .material-icons-outlined { display: inline; }
#library .nb-chk-item input:checked ~ .nb-chk-text { text-decoration: line-through; color: var(--oecta-text-muted); }
#library .nb-chk-item input:focus-visible + .nb-chk-box { box-shadow: 0 0 0 2px var(--oecta-surface-lowest), 0 0 0 4px var(--oecta-primary-container); }
#library .nb-progress { font-family: var(--oecta-font-mono); font-size: var(--oecta-text-xs); color: var(--oecta-text-muted); }

#library .nb-card-tags { display: flex; gap: var(--oecta-space-xs); flex-wrap: wrap; }
#library .nb-card-tags .oecta-tag-pill { min-height: 28px; padding: 2px 9px; }
#library .nb-card-foot { display: flex; align-items: center; gap: var(--oecta-space-xs); margin-top: auto; }
#library .nb-card-date { font-family: var(--oecta-font-mono); font-size: var(--oecta-text-xs); color: var(--oecta-text-muted); flex: 1; }
#library .nb-card-acts { display: flex; opacity: 0.55; transition: opacity var(--oecta-duration-fast) var(--oecta-ease); }
#library .nb-card:hover .nb-card-acts, #library .nb-card:focus-within .nb-card-acts { opacity: 1; }
#library .nb-card-acts .lib-icon-btn .material-icons-outlined { font-size: 20px; }

/* ── Toast ─────────────────────────────────────────────────── */
#library .lib-toast {
  position: fixed; left: 50%; bottom: var(--oecta-space-xl);
  transform: translate(-50%, 24px); opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: var(--oecta-space-md);
  min-height: 52px; padding: 6px 6px 6px var(--oecta-space-lg);
  max-width: calc(100vw - 32px);
  background: var(--oecta-glass-bg-dark, rgba(15, 23, 42, 0.88));
  backdrop-filter: blur(var(--oecta-glass-blur, 16px)); -webkit-backdrop-filter: blur(var(--oecta-glass-blur, 16px));
  color: var(--oecta-surface-lowest);
  border-radius: var(--oecta-radius-pill);
  box-shadow: var(--oecta-shadow-xl);
  font-size: var(--oecta-text-base); font-weight: var(--oecta-weight-medium);
  z-index: var(--oecta-z-toast, 9999);
  transition: transform var(--oecta-duration-slow) var(--oecta-ease-spring), opacity var(--oecta-duration-base) var(--oecta-ease);
}
#library .lib-toast.is-on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
#library .lib-toast .material-icons-outlined { font-size: 20px; color: var(--oecta-accent-container); }
#library .lib-toast-action {
  border: 0; min-height: 44px; padding: 0 16px; border-radius: var(--oecta-radius-pill);
  background: var(--oecta-accent); color: var(--oecta-primary);
  font-family: var(--oecta-font-body); font-size: var(--oecta-text-sm); font-weight: var(--oecta-weight-bold); cursor: pointer;
}
#library .lib-toast-close { width: 44px; height: 44px; border: 0; border-radius: var(--oecta-radius-round); background: transparent; color: var(--oecta-surface-lowest); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
#library .lib-toast-close .material-icons-outlined { color: inherit; font-size: 18px; }

/* ── Mobile <= 768px ────────────────────────────────────────── */
@media (max-width: 768px) {
  #library { padding: var(--oecta-space-lg) var(--oecta-space-lg) 0; }
  #library .lib-shell { border-radius: var(--oecta-radius-lg); }
  #library .oecta-tabs { border-radius: var(--oecta-radius-lg) var(--oecta-radius-lg) 0 0; padding: 0 var(--oecta-space-xs); }
  #library .oecta-tab { flex: 1 1 auto; justify-content: center; }
  #library .oecta-tab .material-icons-outlined { display: none; }
  #library [role="tabpanel"] { padding: var(--oecta-space-lg); }
  #library .lib-select { flex: 1 1 100%; min-width: 0; }
  #library .oecta-filter-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--oecta-space-lg)) var(--oecta-space-lg); padding: 2px var(--oecta-space-lg); }
  #library .oecta-filter-chips::-webkit-scrollbar { display: none; }
  #library .oecta-filter-chip { flex: 0 0 auto; }
  #library .lib-lead { grid-template-columns: 1fr; padding: var(--oecta-space-lg); }
  #library .lib-lead-actions { flex-direction: row; flex-wrap: wrap; }
  #library .lib-doc { grid-template-columns: 40px 1fr auto; gap: var(--oecta-space-md); padding: var(--oecta-space-md); align-items: start; }
  #library .lib-doc-glyph { width: 40px; height: 40px; }
  #library .lib-doc-actions > a { display: none; }
  #library .lib-doc-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  #library .nb-type-filter { width: 100%; margin: 0; padding: 0; overflow: visible; flex-wrap: wrap; }
  #library .nb-type-filter .oecta-filter-chip { flex: 1; justify-content: center; padding: 0 8px; }
  #library .nb-tags { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--oecta-space-lg)) var(--oecta-space-lg); padding: 2px var(--oecta-space-lg); }
  #library .nb-tags::-webkit-scrollbar { display: none; }
  #library .nb-tags .oecta-tag-pill { flex: 0 0 auto; white-space: nowrap; min-height: 44px; }
  #library .nb-grid { grid-template-columns: 1fr; }
  #library .nb-grid .nb-card.is-pinned { grid-column: auto; }
  #library .nb-card-acts { opacity: 1; }
  #library .nb-composer-collapsed > .lib-icon-btn + .lib-icon-btn { display: none; }
  #library .nb-ph-long { display: none; }
  #library .nb-ph-short { display: inline; }
  #library .nb-cite { min-height: 44px; }
  #library .nb-cite .nb-cite-src { display: none; }
  #library .nb-comp-actions { width: 100%; }
  #library .nb-comp-actions .oecta-btn { flex: 1; }
  #library .nb-comp-section { width: 100%; }
  #library .lib-toast { bottom: calc(var(--oecta-bottom-nav-height, 60px) + var(--oecta-space-md) + env(safe-area-inset-bottom, 0px)); width: calc(100vw - 32px); }
}