/* Library, calendar and usage screens. Loaded by public/js/lib/library-kit.js. */

/* library */
.lx-filters { display: grid; gap: var(--space-3); margin-bottom: var(--space-5); }
.lx-selects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.lx-grid { --min-col: 230px; }
.lx-group { margin-bottom: var(--space-6); }
.lx-group .section-head a { color: var(--text); text-decoration: none; }
.lx-group .section-head a:hover { text-decoration: underline; }
.lx-actions { display: flex; gap: var(--space-1); margin: 0 -6px; flex-wrap: wrap; }
.lx-more { display: flex; justify-content: center; margin: var(--space-5) 0; }
@media (min-width: 900px) {
  .lx-filters { grid-template-columns: minmax(240px, 1fr) auto auto; align-items: center; }
}
@media (max-width: 599px) {
  .lx-selects { grid-template-columns: minmax(0, 1fr); }
  .lx-grid { --min-col: 150px; gap: var(--space-3); }
}

/* calendar */
.lx-cal-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.lx-cal-label { font-size: var(--fs-l); }
.lx-cal-body { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1100px) { .lx-cal-body { grid-template-columns: minmax(0, 1fr) 280px; } }
.lx-cal-main { min-width: 0; }
.lx-note { margin-top: var(--space-4); }
.lx-over { background: var(--accent-soft) !important; outline: 2px dashed var(--accent); outline-offset: -3px; }
.cal-entry[draggable="true"] { cursor: grab; }

.lx-tray { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); max-height: 70vh; overflow: auto; }
.lx-tray-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.lx-tray-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--surface-2); cursor: grab; min-width: 0; }
.lx-tray-item img { width: 56px; height: 44px; object-fit: contain; background: var(--surface); border-radius: var(--radius-s); flex: none; }
.lx-tray-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
@media (max-width: 1099px) {
  .lx-tray { max-height: none; }
  .lx-tray-list { flex-direction: row; overflow-x: auto; padding-bottom: var(--space-2); }
  .lx-tray-item { min-width: 220px; }
}

.lx-week { display: flex; flex-direction: column; gap: var(--space-3); }
.lx-week-day { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); padding: var(--space-3) var(--space-4); }
.lx-week-day.today { border-color: var(--accent); }
.lx-week-day > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.lx-week-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.lx-week-entry { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); border-radius: var(--radius-m); background: var(--surface-2); min-width: 0; }
.lx-week-entry img, .lx-noimg { width: 64px; height: 48px; object-fit: contain; background: var(--surface); border-radius: var(--radius-s); flex: none; display: grid; place-items: center; color: var(--muted); }
.lx-entry-open { display: flex; flex-direction: column; gap: 2px; text-align: left; border: 0; background: none; padding: 0; min-width: 0; flex: 1 1 auto; min-height: 44px; justify-content: center; color: var(--text); }
.lx-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lx-entry-img { width: 100%; max-height: 260px; object-fit: contain; background: var(--surface-2); border-radius: var(--radius-m); }
.lx-caption { white-space: pre-wrap; font-size: var(--fs-s); background: var(--surface-2); border-radius: var(--radius-m); padding: var(--space-3); }
.lx-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.lx-feed { margin-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.lx-feed-url { max-width: 100%; overflow-x: auto; background: var(--surface-2); border-radius: var(--radius-m); padding: var(--space-2) var(--space-3); font-size: var(--fs-xs); }

/* usage */
.lx-hero { display: grid; gap: var(--space-4); }
.lx-hero-num strong { font-size: var(--fs-2xl); font-variant-numeric: tabular-nums; }
.lx-chart { display: flex; flex-direction: column; gap: var(--space-2); }
.lx-bars { display: flex; align-items: stretch; gap: 3px; height: 140px; border-bottom: 1px solid var(--border-strong); padding-bottom: 18px; position: relative; }
.lx-bar { flex: 1 1 0; min-width: 0; position: relative; display: flex; align-items: flex-end; border-radius: 3px 3px 0 0; }
.lx-bar::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--surface-3); border-radius: 1px; }
.lx-bar-fill { display: block; width: 100%; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 0; position: relative; }
.lx-bar:hover .lx-bar-fill { background: var(--accent-hover); }
.lx-bar.today::after { content: ''; position: absolute; left: 50%; bottom: -14px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--text-2); }
.lx-bar-day { position: absolute; bottom: -18px; left: 0; font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lx-bars { margin-bottom: var(--space-2); }

/* print: a clean page of the numbers */
@media print { .lx-actions, .lx-tray, .lx-feed { display: none; } }

.lx-tray-item .icon-btn { flex: 0 0 44px; min-width: 44px; }
.lx-tray-item .lx-tray-text { overflow-wrap: anywhere; }