.il {
--il-col: 7rem;
--il-gap: var(--space-md);
margin-block: var(--space-md);
}
.il-bar {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--space-sm) var(--space-md);
padding-block-end: var(--space-sm);
border-block-end: 1px solid var(--lectern-seam);
margin-block-end: var(--space-md);
}
.il-bar__ref {
font-family: var(--font-display);
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--color-text);
}
.il-bar__meta {
font-size: var(--font-size-2xs);
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
color: var(--color-text-muted);
margin-inline-end: auto;
}
.il-bar__toggle {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
font-size: var(--font-size-2xs);
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
color: var(--color-text-muted);
cursor: pointer;
}
.il-words {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--il-col), 1fr));
gap: var(--il-gap);
margin: 0;
padding: 0;
list-style: none;
}
.il-word {
display: grid;
grid-template-rows: auto auto auto auto auto auto auto;
align-content: start;
gap: var(--space-2xs);
text-align: center;
min-width: 0;
direction: ltr;
}
@supports (grid-template-rows: subgrid) {
.il-word {
grid-row: span 7;
grid-template-rows: subgrid;
}
}
.il-word__text {
font-family: var(--font-serif);
font-size: var(--font-size-xl);
line-height: 1.5;
color: var(--color-text);
overflow-wrap: anywhere;
}
.il .type-hebrew {
direction: rtl;
unicode-bidi: isolate;
}
.il .type-greek {
direction: ltr;
unicode-bidi: isolate;
}
.il-word__translit {
font-family: var(--font-sans);
font-size: var(--font-size-2xs);
font-style: italic;
color: var(--color-text-muted);
overflow-wrap: anywhere;
}
.il-word__gloss {
font-family: var(--font-sans);
font-size: var(--font-size-sm);
line-height: 1.35;
color: var(--color-text);
overflow-wrap: anywhere;
}
.il-word__strongs {
font-family: var(--font-mono);
font-size: var(--font-size-3xs);
color: var(--color-text-muted);
text-decoration: none;
justify-self: center;
}
.il-word__strongs:hover,
.il-word__strongs:focus-visible {
color: var(--color-text);
text-decoration: underline;
}
.il-word__strongs--none {
color: color-mix(in srgb, var(--color-text-muted) 45%, transparent);
}
.il-word__code {
font-family: var(--font-mono);
font-size: var(--font-size-3xs);
line-height: 1.35;
color: var(--color-text-muted);
overflow-wrap: anywhere;
}
.il-word__parse,
.il-word__segs {
display: none;
}
.il:has(.il-parse-toggle:checked) .il-word__code,
.bible-text:has(.il-bar--chapter .il-parse-toggle:checked) .il-word__code {
display: none;
}
.bible-text:has(.il-bar--chapter .il-parse-toggle:checked) .il-word__parse,
.il:has(.il-parse-toggle:checked) .il-word__parse {
display: block;
font-family: var(--font-sans);
font-size: var(--font-size-3xs);
line-height: 1.3;
color: var(--color-text-muted);
padding-block-start: var(--space-2xs);
border-block-start: 1px dotted var(--lectern-seam);
}
.bible-text:has(.il-bar--chapter .il-parse-toggle:checked) .il-word__segs,
.il:has(.il-parse-toggle:checked) .il-word__segs {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: baseline;
gap: var(--space-2xs) var(--space-xs);
font-size: var(--font-size-3xs);
line-height: 1.3;
color: var(--color-text-muted);
}
.il-seg {
display: inline-flex;
align-items: baseline;
gap: 0.25em;
min-width: 0;
}
.il-seg + .il-seg::before {
content: "·";
margin-inline-end: 0.25em;
opacity: 0.5;
}
.il-seg.is-content {
color: var(--color-text);
}
.il-seg__text {
font-family: var(--font-serif);
font-size: var(--font-size-xs);
}
.il-seg__gloss {
overflow-wrap: anywhere;
}
.il-band {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: var(--space-sm);
font-size: var(--font-size-3xs);
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
color: var(--color-text-muted);
}
.il-band::after {
content: "";
flex: 1;
height: 1px;
background: var(--lectern-seam);
}
.il-band:first-child {
margin-block-start: 0;
}
@media (width <= 640px) {
.il {
--il-col: 5.5rem;
--il-gap: var(--space-sm);
}
.il-word__text {
font-size: var(--font-size-lg);
}
}
.app-il .bible-text {
max-width: none;
text-align: start;
text-align-last: auto;
hyphens: manual;
column-count: auto;
column-gap: normal;
}
.app-il .bible-text .verse-block,
.app-il .bible-text .verse-content {
display: block;
padding-inline-start: 0;
border-inline-end: 0;
}
.app-il .bible-text .verse-block {
margin-block-end: var(--space-lg);
}
.app-il .bible-text .verse-num {
display: inline-block;
width: auto;
font-family: var(--font-sans);
font-size: var(--font-size-2xs);
font-weight: 600;
font-variant-numeric: tabular-nums;
vertical-align: baseline;
line-height: 1;
color: var(--color-reader-accent);
text-decoration: none;
opacity: 0.85;
margin: 0;
padding: 0;
border-inline-end: 0;
}
.app-il .bible-text .verse-content .il {
margin-block-start: var(--space-2xs);
}
.il-bar--chapter {
margin-block-start: var(--space-sm);
}
.app-il .setting-group:has(#view-mode-control),
.app-il .setting-group:has(#font-family-control),
.app-il .setting-group:has(#font-size-slider),
.app-il .setting-group:has(#reading-width-slider),
.app-il #toggle-red-letter,
.app-il #toggle-justify {
display: none;
}