/* Library / learning (B14) — page layout only. Components, tokens, icons and themes come from lifeos.css («مِحْوَر»). */

.lb-page [hidden] { display: none !important; }
.lb-split { grid-template-columns: 420px minmax(0, 1fr); }
.lb-left { min-width: 0; }

/* resource list */
.lb-rows > li { list-style: none; }
.lb-row { width: 100%; text-align: start; }
.lb-row .t { overflow-wrap: anywhere; }
.lb-kind { flex: none; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-3); }
.lb-status { display: inline-flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; white-space: nowrap; }
.lb-filter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.lb-filter-grid .field:first-child { grid-column: 1 / -1; }
.lb-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); cursor: pointer; min-height: 32px; }
.lb-check input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }
.lb-pick .ic-24 { color: var(--ink-3); }

/* selected resource */
.lb-title { font-size: 30px; margin-top: 4px; overflow-wrap: anywhere; }
.lb-back { display: none; margin-bottom: 6px; }
.lb-big { font-size: 34px; line-height: 1.15; overflow-wrap: anywhere; }
.lb-reader > summary { list-style: none; }
.lb-reader > summary::-webkit-details-marker { display: none; }
.lb-reader[open] { flex-basis: 100%; }
.lb-reader-note { margin-top: 8px; }
.lb-original { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-2); font-size: 14px; }
.lb-subcard { gap: 10px; }
.lb-unit { align-items: flex-start; }
.lb-unit > .ic { margin-top: 3px; }
.lb-record-actions { margin-top: 4px; }
.lb-step { flex: none; width: 26px; text-align: center; font-family: var(--font-display); font-size: 20px; color: var(--ink-3); }
.lb-path { counter-reset: none; }
.lb-attempt .t { font-size: 14px; }

/* the native meter: a real <progress> drawn as the design's track */
.lb-meter { gap: 6px; }
.lb-progress { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 8px; border: 0; border-radius: 999px; background: var(--surface-3); color: var(--accent); overflow: hidden; }
.lb-progress::-webkit-progress-bar { background: var(--surface-3); border-radius: 999px; }
.lb-progress::-webkit-progress-value { background: var(--accent); border-radius: 999px; }
.lb-progress::-moz-progress-bar { background: var(--accent); border-radius: 999px; }

/* forms and save feedback */
.lb-form { gap: 14px; }
.lb-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.lb-form-grid .lb-wide { grid-column: 1 / -1; }
.lb-ordered .row { gap: 8px; }
.lb-errors { color: var(--danger-ink); font-size: 13px; }
.lb-errors:empty { display: none; }
.lb-errors li, .lb-errors p { margin: 2px 0; }
.lb-feedback .state { white-space: normal; }
.lb-period { margin-top: 8px; }
.lb-compare-row { font-size: 13.5px; margin: 4px 0; overflow-wrap: anywhere; }
.lb-drafts > summary, .lb-links > summary, .lb-history > summary { font-weight: 500; }

.w4b-fold > summary { cursor: pointer; font-size: 13px; color: var(--ink-2); padding: 6px 0; }
.w4b-fold[open] > summary { margin-bottom: 6px; }

@media (max-width: 1023px) {
  .lb-split { grid-template-columns: 1fr; }
  .lb-split[data-view="detail"] .lb-left { display: none; }
  .lb-back { display: inline-flex; }
}
@media (max-width: 640px) {
  .lb-page .btn, .lb-page .seg button, .lb-page .tabs button, .lb-row, .lb-check { min-block-size: 44px; }
  .lb-page .input, .lb-page .select, .lb-page .textarea { font-size: 16px; }
  .lb-title { font-size: 26px; }
  .lb-big { font-size: 28px; }
  .w4b-fold > summary { min-height: 44px; display: flex; align-items: center; }
}
@media (max-width: 600px) {
  .lb-form-grid, .lb-filter-grid { grid-template-columns: 1fr; }
  .lb-status { justify-content: flex-start; }
  .lb-row { flex-wrap: wrap; }
}