/* Lore — reusable components: cards, rows, modals, sheets, skeletons, comments. */

/* Story card */
.lore-card {
	display: block; width: 152px; flex: none; text-decoration: none;
	border-radius: var(--radius-md); overflow: hidden;
}
.lore-card__cover-wrap { position: relative; aspect-ratio: 2 / 3; border-radius: var(--radius-md); overflow: hidden; background: var(--paper-alt); box-shadow: var(--shadow-sm); }
.lore-card__cover { width: 100%; height: 100%; object-fit: cover; }
.lore-card__ribbon {
	position: absolute; top: 8px; left: 8px; background: var(--teal); color: #fff;
	font-size: .65rem; font-weight: 700; padding: 3px 8px; border-radius: var(--radius-pill);
}
.lore-card__mature { position: absolute; top: 8px; right: 8px; background: rgba(29,29,31,.75); color: #fff; font-size: .6rem; font-weight: 700; padding: 3px 6px; border-radius: 4px; }
.lore-card__title { margin: var(--space-2) 0 2px; font-size: .875rem; font-weight: 700; line-height: 1.3; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lore-card__author { font-size: .75rem; color: var(--ink-faint); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lore-card__stats { display: flex; gap: var(--space-3); font-size: .7rem; color: var(--ink-faint); }
.lore-card__stats span { display: inline-flex; align-items: center; gap: 3px; }
.lore-card__stats .lore-icon { width: 13px; height: 13px; }
.lore-card--grid { width: 100%; }
.lore-card--wide { width: 100%; }

/* Rows / rails */
.lore-row { margin: var(--space-6) 0; }
.lore-row__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-3); padding: 0 var(--space-4); max-width: var(--max-w); margin-left: auto; margin-right: auto; }
.lore-row__head h2 { margin: 0; font-size: 1.15rem; }
.lore-row__head a { font-size: .8rem; color: var(--ember); font-weight: 600; }
.lore-row__track {
	display: flex; gap: var(--space-3); overflow-x: auto; padding: 0 var(--space-4) var(--space-2);
	scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.lore-row__track::-webkit-scrollbar { height: 6px; }
.lore-row__track::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.lore-row__track > * { scroll-snap-align: start; }

/* Grid (browse, genre, search, profile works) */
.lore-grid {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4);
	max-width: var(--max-w); margin: 0 auto; padding: 0 var(--space-4);
}
@media (min-width: 560px) { .lore-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 820px) { .lore-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .lore-grid { grid-template-columns: repeat(5, 1fr); } }
.lore-grid .lore-card { width: 100%; }

/* Skeletons */
.lore-skel { background: linear-gradient(90deg, var(--paper-alt) 25%, var(--line) 37%, var(--paper-alt) 63%); background-size: 400% 100%; animation: lore-shimmer 1.4s ease infinite; border-radius: var(--radius-sm); }
@keyframes lore-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.lore-skel--cover { aspect-ratio: 2/3; border-radius: var(--radius-md); margin-bottom: var(--space-2); }
.lore-skel--line { height: 12px; margin-bottom: 6px; }
.lore-skel--short { width: 60%; }
.lore-card--skeleton { pointer-events: none; }

/* Empty states */
.lore-empty { text-align: center; padding: var(--space-10) var(--space-4); max-width: 360px; margin: 0 auto; color: var(--ink-soft); }
.lore-empty__icon { width: 56px; height: 56px; margin: 0 auto var(--space-3); color: var(--ink-faint); }
.lore-empty__icon .lore-icon { width: 100%; height: 100%; }
.lore-empty__title { font-weight: 700; font-size: 1.05rem; color: var(--ink); margin-bottom: 4px; }
.lore-empty__body { font-size: .875rem; margin-bottom: var(--space-4); }

/* Load more */
.lore-loadmore { display: flex; justify-content: center; padding: var(--space-6) var(--space-4); }

/* Tabs */
.lore-tabs { display: flex; gap: var(--space-2); border-bottom: 1px solid var(--line); padding: 0 var(--space-4); max-width: var(--max-w); margin: 0 auto; overflow-x: auto; }
.lore-tabs__item {
	background: none; border: 0; padding: var(--space-3) var(--space-3); font-weight: 600; font-size: .9rem;
	color: var(--ink-faint); border-bottom: 2px solid transparent; white-space: nowrap; cursor: pointer;
}
.lore-tabs__item.is-active, .lore-tabs__item[aria-selected="true"] { color: var(--ember); border-color: var(--ember); }

/* Filter bar */
.lore-filterbar { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-4); max-width: var(--max-w); margin: 0 auto; align-items: center; }
.lore-filterbar select, .lore-filterbar .lore-select { width: auto; min-height: 38px; padding: 6px 12px; font-size: .85rem; }
.lore-filterbar__toggle { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; background: var(--paper-alt); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 6px 12px; cursor: pointer; }
.lore-filterbar__toggle[aria-pressed="true"] { background: var(--ember); color: #fff; border-color: var(--ember); }

/* Modal */
.lore-modal-overlay {
	position: fixed; inset: 0; background: rgba(29,29,31,.5); z-index: 300;
	display: flex; align-items: center; justify-content: center; padding: var(--space-4);
}
.lore-modal-overlay[hidden] { display: none; }
.lore-modal {
	background: var(--white); border-radius: var(--radius-lg); max-width: 440px; width: 100%;
	max-height: 86vh; overflow-y: auto; padding: var(--space-6); box-shadow: var(--shadow-lg);
}
.lore-modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.lore-modal__close { background: none; border: 0; cursor: pointer; padding: 4px; }

/* Bottom sheet (mobile) / side drawer (desktop) — shared for paragraph comments */
.lore-sheet-overlay {
	position: fixed; inset: 0; background: rgba(29,29,31,.4); z-index: 300;
}
.lore-sheet-overlay[hidden] { display: none; }
.lore-sheet[hidden] { display: none; }
.lore-sheet {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 301;
	background: var(--white); border-radius: 18px 18px 0 0; box-shadow: var(--shadow-lg);
	max-height: 80vh; display: flex; flex-direction: column;
	animation: lore-sheet-up .2s ease;
}
@keyframes lore-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.lore-sheet__grabber { width: 40px; height: 4px; background: var(--line); border-radius: 2px; margin: 10px auto; flex: none; }
.lore-sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-4) var(--space-3); border-bottom: 1px solid var(--line); flex: none; }
.lore-sheet__body { overflow-y: auto; padding: var(--space-4); flex: 1; }
.lore-sheet__footer { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); flex: none; }

@media (min-width: 900px) {
	.lore-sheet {
		left: auto; right: 0; top: 0; bottom: 0; width: 400px;
		border-radius: 0; animation: lore-drawer-in .2s ease;
	}
	@keyframes lore-drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
	.lore-sheet__grabber { display: none; }
}

/* Comment item */
.lore-comment { display: flex; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.lore-comment:last-child { border-bottom: 0; }
.lore-comment__avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; }
.lore-comment__body { flex: 1; min-width: 0; }
.lore-comment__meta { display: flex; align-items: center; gap: 6px; font-size: .8rem; margin-bottom: 2px; }
.lore-comment__author { font-weight: 700; }
.lore-comment__time { color: var(--ink-faint); }
.lore-comment__text { font-size: .9rem; word-wrap: break-word; margin-bottom: 4px; }
.lore-comment__actions { display: flex; gap: var(--space-4); font-size: .78rem; color: var(--ink-faint); }
.lore-comment__actions button { background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; color: inherit; padding: 4px 0; }
.lore-comment__actions button.is-liked { color: var(--ember); }
.lore-comment__actions .lore-icon { width: 14px; height: 14px; }
.lore-comment__replies { margin-left: var(--space-6); margin-top: var(--space-2); }
.lore-comment-form { display: flex; gap: var(--space-2); align-items: flex-start; margin-top: var(--space-3); }
.lore-comment-form textarea { flex: 1; min-height: 40px; }

/* Interstitial (mature gate) */
.lore-interstitial { display: flex; align-items: center; justify-content: center; min-height: 60vh; padding: var(--space-4); }
.lore-interstitial__box { text-align: center; max-width: 380px; }
.lore-interstitial__box .lore-icon { width: 48px; height: 48px; color: var(--ember); margin: 0 auto var(--space-3); }
.lore-interstitial__actions { display: flex; gap: var(--space-3); justify-content: center; margin-top: var(--space-4); }

/* Progress bar (reading %, in library rows) */
.lore-progress { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.lore-progress > span { display: block; height: 100%; background: var(--ember); border-radius: 3px; }

/* Follow / library icon buttons general */
.lore-btn--toggled { background: var(--ember-light); color: var(--ember-dark); border-color: transparent; }
.lore-btn--toggled.lore-btn--teal-toggled { background: rgba(27,153,139,.14); color: var(--teal-dark); }

/* Drag handle for reorderable parts list */
.lore-draghandle { cursor: grab; color: var(--ink-faint); touch-action: none; padding: 8px; }
.lore-draggable.is-dragging { opacity: .5; }

/* Generic action-sheet items (used by bottom-sheet.php for the story "more" menu) */
.lore-sheet-action { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-3) var(--space-2); background: none; border: 0; text-align: left; font-size: .95rem; cursor: pointer; border-radius: var(--radius-md); }
.lore-sheet-action:hover { background: var(--paper-alt); }

/* Avatar sizes */
.lore-avatar-64 { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.lore-avatar-96 { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.lore-avatar-128 { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; border: 4px solid var(--white); }