/* Journal ("יומן אישי") */
.jr-card { all: unset; box-sizing: border-box; display: flex; gap: .75rem; inline-size: 100%; padding: .75rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; text-align: start; }
.jr-card:hover { border-color: var(--accent); }
.jr-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.jr-date { flex: 0 0 3rem; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; line-height: 1.1; }
.jr-date b { font-size: 1.6rem; font-weight: 800; }
.jr-date small { font-size: .72rem; color: var(--muted); }
.jr-main { flex: 1 1 auto; min-inline-size: 0; display: flex; flex-direction: column; gap: .25rem; }
.jr-title { font-weight: 700; overflow-wrap: anywhere; }
.jr-star { color: var(--star); }
.jr-snip { color: var(--muted); font-size: .92rem; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; white-space: pre-line; }
.jr-meta { display: flex; flex-wrap: wrap; gap: .25rem .75rem; font-size: .8rem; color: var(--muted); }
.jr-thumbs { display: flex; gap: .35rem; margin-block-start: .25rem; align-items: center; }
.jr-thumbs img { inline-size: 4.5rem; block-size: 4.5rem; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-2); }
.jr-more { font-size: .85rem; font-weight: 700; color: var(--muted); padding-inline: .4rem; }

.jr-detail .jr-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.jr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: .4rem; }
.jr-ph { all: unset; box-sizing: border-box; cursor: pointer; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); }
.jr-ph:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.jr-ph img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }

.jr-edit-photos { display: flex; flex-wrap: wrap; gap: .5rem; }
.jr-edit-photos:empty { display: none; }
.jr-ep { position: relative; inline-size: 5rem; block-size: 5rem; }
.jr-ep img { inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-2); }
.jr-ep-x { all: unset; box-sizing: border-box; position: absolute; inset-block-start: -.35rem; inset-inline-end: -.35rem; inline-size: 1.75rem; block-size: 1.75rem; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: .8rem; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.jr-ep-x:focus-visible { outline: 3px solid var(--accent); }

.scrim.jr-lightbox { background: rgba(0, 0, 0, .94); display: flex; align-items: center; justify-content: center; padding: 0; z-index: 400; }
.jr-lightbox img { max-inline-size: 100%; max-block-size: 100%; object-fit: contain; }
.jr-lb-count { position: absolute; inset-block-end: calc(var(--safe-b, 0px) + .75rem); inset-inline: 0; text-align: center; color: #fff; font-size: .9rem; }
.jr-lb-nav, .jr-lb-close { all: unset; box-sizing: border-box; position: absolute; min-inline-size: 48px; min-block-size: 48px; border-radius: 50%; background: rgba(255, 255, 255, .18); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; cursor: pointer; }
.jr-lb-nav { inset-block-start: 50%; transform: translateY(-50%); }
.jr-lb-nav.prev { inset-inline-start: .5rem; }
.jr-lb-nav.next { inset-inline-end: .5rem; }
.jr-lb-close { inset-block-start: calc(var(--safe-t, 0px) + .5rem); inset-inline-end: .5rem; font-size: 1.2rem; }
.jr-lb-nav:focus-visible, .jr-lb-close:focus-visible { outline: 3px solid #fff; }