.session-map {
--sm-law: var(--color-reaction-cross);
--sm-history: var(--color-tag-place);
--sm-wisdom: var(--color-reaction-heart);
--sm-prophets: var(--color-tag-topic);
--sm-gospels: var(--color-primary);
--sm-acts: var(--color-tag-person);
--sm-letters: var(--color-reaction-sparkles);
--sm-revelation: var(--color-accent);
--sm-apocrypha: var(--color-text-muted);
}
.session-map [data-sec="law"] { --s: var(--sm-law); }
.session-map [data-sec="history"] { --s: var(--sm-history); }
.session-map [data-sec="wisdom"] { --s: var(--sm-wisdom); }
.session-map [data-sec="prophets"] { --s: var(--sm-prophets); }
.session-map [data-sec="gospels"] { --s: var(--sm-gospels); }
.session-map [data-sec="acts"] { --s: var(--sm-acts); }
.session-map [data-sec="letters"] { --s: var(--sm-letters); }
.session-map [data-sec="revelation"] { --s: var(--sm-revelation); }
.session-map [data-sec="apocrypha"] { --s: var(--sm-apocrypha); }
.session-map [data-mood] { --m: var(--color-text-muted); }
.session-map [data-mood="peace"] { --m: var(--color-reaction-sparkles); }
.session-map [data-mood="praise"] { --m: var(--color-accent); }
.session-map [data-mood="love"] { --m: var(--color-reaction-heart); }
.session-map [data-mood="strength"] { --m: var(--color-reaction-crown); }
.session-map [data-mood="faith"] { --m: var(--color-primary); }
.session-map [data-mood="solemn"] { --m: var(--color-reaction-cross); }
.session-map [data-mood="fellowship"] { --m: var(--color-tag-place); }
.session-map a:not([class]) {
color: var(--color-primary);
text-decoration: none;
transition: color var(--transition-fast);
}
.session-map a:not([class]):hover,
.session-map a:not([class]):focus-visible { color: var(--color-primary-hover); }
.trv-modal-dialog.sm-dialog {
max-width: 1060px;
max-height: min(90vh, 100%);
padding: var(--space-lg) var(--space-lg) var(--space-xl);
background: var(--paper-surface);
border-radius: var(--paper-radius);
}
@media (width <= 640px) {
.trv-modal.session-map { align-items: flex-end; padding: 0; }
.trv-modal-dialog.sm-dialog {
max-height: calc(100dvh - var(--safe-top) - var(--space-lg));
padding: var(--space-md) var(--space-md) calc(var(--space-xl) + var(--safe-bottom));
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
}
.session-map .trv-modal-close { z-index: 2; }
.sm-head { position: relative; padding-inline-end: var(--space-xl); margin-block-end: var(--space-md); }
.sm-card-btn { margin-top: var(--space-sm); }
.sm-overline {
margin: 0 0 var(--space-xs);
font-family: var(--font-sans);
font-size: var(--font-size-3xs);
font-weight: var(--font-weight-bold);
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
color: var(--color-primary);
}
.sm-title {
margin: 0;
font-family: var(--font-title-serif);
font-size: var(--font-size-4xl);
font-weight: 600;
line-height: var(--leading-tight);
color: var(--color-text);
}
.sm-sub {
margin: var(--space-xs) 0 0;
font-family: var(--font-sans);
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
@media (width <= 640px) {
.sm-title { font-size: var(--font-size-3xl); }
}
.sm-stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
border-block: 1px solid var(--color-rule);
}
.sm-stat {
display: flex;
flex-direction: column;
gap: var(--space-2xs);
padding: var(--space-md) var(--space-md) var(--space-md) 0;
min-width: 0;
}
.sm-stat + .sm-stat { padding-inline-start: var(--space-md); border-inline-start: 1px solid var(--color-rule); }
.sm-stat-k {
font-family: var(--font-sans);
font-size: var(--font-size-3xs);
font-weight: var(--font-weight-bold);
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
color: var(--color-text-muted);
}
.sm-stat-v {
font-family: var(--font-title-serif);
font-size: var(--font-size-3xl);
font-weight: 600;
line-height: var(--leading-tight);
color: var(--color-text);
font-variant-numeric: tabular-nums;
}
.sm-stat-v small { font-size: var(--font-size-base); font-weight: var(--font-weight-regular); color: var(--color-text-muted); }
.sm-stat-s {
font-family: var(--font-sans);
font-size: var(--font-size-xs);
line-height: var(--leading-snug);
color: var(--color-text-muted);
}
@media (width <= 640px) {
.sm-dialog { display: flex; flex-direction: column; }
.sm-head { order: 0; }
.sm-figure { order: 1; margin-top: 0; }
.sm-stats { order: 2; margin-top: var(--space-md); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sm-detail { order: 3; }
.sm-cols { order: 4; }
.sm-stat { padding-block: var(--space-sm); }
.sm-stat:nth-child(3) { padding-inline-start: 0; border-inline-start: 0; }
.sm-stat:nth-child(n + 3) { border-block-start: 1px solid var(--color-rule); }
.sm-stat-v { font-size: var(--font-size-2xl); }
}
.sm-figure { margin: var(--space-lg) 0 0; }
.sm-figbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
margin-bottom: var(--space-md);
}
.sm-seg {
display: inline-flex;
gap: 2px;
padding: 3px;
border-radius: var(--radius-md);
background: var(--color-well-strong);
}
.sm-seg button {
min-height: 34px;
padding: 0 var(--space-md);
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-text-muted);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
white-space: nowrap;
cursor: pointer;
}
.sm-seg button:hover { color: var(--color-text); }
.sm-seg button[aria-pressed="true"] { background: var(--color-panel); color: var(--color-text); box-shadow: var(--shadow-xs); }
.sm-seg button:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.sm-play-i {
width: 0;
height: 0;
border-block: 5px solid transparent;
border-inline-start: 8px solid currentcolor;
}
.sm-play.is-playing .sm-play-i { width: 9px; height: 9px; border: 0; border-radius: 1px; background: currentcolor; }
[dir="rtl"] .sm-play-i { transform: scaleX(-1); }
@media (width <= 640px) {
.sm-play { width: var(--control-h); padding: 0; justify-content: center; }
.sm-play-l {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
}
.sm-svg .is-ahead { visibility: hidden; }
.sm-svg.is-playing .sm-arc { transition: none; }
.sm-rider { fill: var(--color-accent); stroke: var(--paper-surface); stroke-width: 2; pointer-events: none; }
.sm-canvas { width: 100%; }
.sm-svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.sm-book {
fill: color-mix(in srgb, var(--s) 22%, var(--paper-surface));
cursor: pointer;
transition: fill var(--transition-fast);
}
.sm-book.is-visited { fill: color-mix(in srgb, var(--s) 80%, var(--paper-surface)); }
.sm-book:hover { fill: color-mix(in srgb, var(--s) 55%, var(--paper-surface)); }
.sm-book.is-visited:hover { fill: var(--s); }
.sm-sec {
font-family: var(--font-sans);
font-size: 10px;
font-weight: var(--font-weight-bold);
letter-spacing: 0.12em;
text-transform: uppercase;
fill: color-mix(in srgb, var(--s) 75%, var(--color-text));
}
.sm-blabel {
font-family: var(--font-sans);
font-size: 11px;
font-weight: var(--font-weight-medium);
fill: var(--color-text);
cursor: default;
}
.sm-leader { fill: none; stroke: var(--color-border); stroke-width: 1; }
.sm-arc {
fill: none;
stroke: var(--color-primary);
stroke-width: 1.6;
stroke-linecap: round;
opacity: var(--o, 0.6);
transition: opacity var(--transition-fast), stroke-width var(--transition-fast);
}
.sm-arc.is-latest { stroke-width: 2.4; }
.sm-svg.is-lit .sm-arc { opacity: 0.12; }
.sm-svg.is-lit .sm-arc.is-lit { opacity: 1; stroke-width: 2.6; }
.sm-node { cursor: pointer; outline: none; }
.sm-hit { fill: transparent; }
.sm-dot {
fill: var(--m);
stroke: var(--paper-surface);
stroke-width: 2;
transition: r var(--transition-fast);
}
.sm-node:hover .sm-dot { r: 7px; }
.sm-node.is-selected .sm-dot { r: 7px; }
.sm-halo { fill: none; stroke: var(--m); stroke-width: 1.5; opacity: 0.55; }
.sm-node.is-now .sm-dot { stroke: var(--color-text); stroke-width: 1.5; }
.sm-node:focus-visible .sm-hit { stroke: var(--color-primary); stroke-width: 2; }
.sm-ring {
fill: none;
stroke: color-mix(in srgb, var(--s) 22%, var(--paper-surface));
cursor: pointer;
transition: stroke var(--transition-fast);
}
.sm-ring.is-visited { stroke: color-mix(in srgb, var(--s) 80%, var(--paper-surface)); }
.sm-ring:hover { stroke: color-mix(in srgb, var(--s) 55%, var(--paper-surface)); }
.sm-ring.is-visited:hover { stroke: var(--s); }
.sm-svg.is-wheel { margin-inline: auto; }
.sm-svg.is-wheel .sm-sec { font-size: 9px; }
.sm-tband { fill: color-mix(in srgb, var(--s) 7%, transparent); }
.sm-svg.is-time .sm-arc.is-return { stroke-dasharray: 3 3; }
.sm-svg.is-playing .sm-arc.is-return { stroke-dasharray: none; }
.sm-return { fill: var(--paper-surface); stroke: var(--color-primary); stroke-width: 1.5; }
.sm-break { font-family: var(--font-sans); font-size: 12px; font-weight: var(--font-weight-bold); fill: var(--color-text-muted); }
.sm-taxis { stroke: var(--color-rule); stroke-width: 1; }
.sm-tclock { font-family: var(--font-sans); font-size: 11px; fill: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.sm-hint {
font-family: var(--font-title-serif);
font-size: 13px;
font-style: italic;
fill: var(--color-text-muted);
}
.sm-caption {
min-height: 2.6em;
margin-top: var(--space-sm);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
line-height: var(--leading-normal);
color: var(--color-text-muted);
}
.sm-caption strong { color: var(--color-text); font-weight: var(--font-weight-medium); }
.sm-detail {
margin-top: var(--space-md);
padding: var(--space-lg);
background: var(--color-well);
border-radius: var(--radius-lg);
}
.sm-detail-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-xs) var(--space-sm);
font-family: var(--font-sans);
font-size: var(--font-size-xs);
color: var(--color-text-muted);
}
.sm-mood {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
font-weight: var(--font-weight-bold);
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
font-size: var(--font-size-3xs);
color: var(--color-text);
}
.sm-mood::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--m); }
.sm-now { color: var(--color-primary); font-weight: var(--font-weight-medium); }
.sm-detail-ref {
margin: var(--space-sm) 0 var(--space-xs);
font-family: var(--font-title-serif);
font-size: var(--font-size-2xl);
font-weight: 600;
color: var(--color-text);
}
.sm-detail-text {
display: -webkit-box;
margin: 0;
max-width: var(--measure);
overflow: hidden;
font-family: var(--font-serif);
font-size: var(--font-size-md);
line-height: var(--leading-loose);
color: var(--color-text);
-webkit-line-clamp: 4;
line-clamp: 4;
-webkit-box-orient: vertical;
}
.sm-facts {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm) var(--space-lg);
margin: var(--space-md) 0 0;
font-family: var(--font-sans);
}
.sm-facts dt { font-size: var(--font-size-3xs); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--color-text-muted); }
.sm-facts dd { margin: 2px 0 0; font-size: var(--font-size-sm); color: var(--color-text); font-variant-numeric: tabular-nums; }
.sm-did { margin: var(--space-md) 0 0; font-family: var(--font-sans); font-size: var(--font-size-sm); color: var(--color-text); }
.sm-did span { margin-inline-end: var(--space-xs); font-size: var(--font-size-3xs); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--color-text-muted); }
.sm-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }
.sm-btn {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
min-height: var(--control-h);
padding: 0 var(--space-md);
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
background: var(--paper-surface);
color: var(--color-text);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
text-decoration: none;
cursor: pointer;
}
.sm-btn:hover { background: var(--color-surface-hover); }
.sm-btn--primary { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-primary-contrast); }
.sm-btn--primary:hover { background: var(--color-primary-hover); }
.sm-btn:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.sm-cols {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: var(--space-lg) var(--space-xl);
margin-top: var(--space-lg);
}
@media (width <= 760px) {
.sm-cols { grid-template-columns: minmax(0, 1fr); }
}
.sm-block + .sm-block { margin-top: var(--space-lg); }
.sm-h {
margin: 0 0 var(--space-sm);
padding-bottom: var(--space-xs);
border-bottom: 1px solid var(--color-rule);
font-family: var(--font-sans);
font-size: var(--font-size-3xs);
font-weight: var(--font-weight-bold);
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
color: var(--color-text-muted);
}
.sm-ribbon { display: flex; gap: var(--space-2xs); height: 28px; }
.sm-ribbon-seg {
flex: 1 1 0;
min-width: 4px;
padding: 0;
border: none;
border-radius: var(--radius-sm);
background: var(--m);
opacity: 0.75;
cursor: pointer;
}
.sm-ribbon-seg:hover,
.sm-ribbon-seg.is-selected { opacity: 1; box-shadow: 0 0 0 2px var(--paper-surface), 0 0 0 3.5px var(--m); }
.sm-ribbon-seg:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.sm-swatch { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--m); }
.sm-met-row { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-sm); align-items: start; }
.sm-met-row + .sm-met-row { margin-top: var(--space-sm); }
.sm-met-k { padding-top: 5px; font-family: var(--font-sans); font-size: var(--font-size-xs); color: var(--color-text-muted); }
.sm-chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.sm-detail .sm-chips { margin-top: var(--space-md); }
.sm-chips li {
padding: 3px 10px;
border-radius: var(--radius-full);
background: var(--color-well-strong);
font-family: var(--font-sans);
font-size: var(--font-size-xs);
color: var(--color-text);
}
.sm-chips[data-kind="person"] li { background: color-mix(in srgb, var(--color-tag-person) 14%, var(--paper-surface)); }
.sm-chips[data-kind="place"] li { background: color-mix(in srgb, var(--color-tag-place) 14%, var(--paper-surface)); }
.sm-chips[data-kind="topic"] li { background: color-mix(in srgb, var(--color-tag-topic) 14%, var(--paper-surface)); }
.sm-chips b { font-weight: var(--font-weight-medium); color: var(--color-text-muted); }
.sm-responded { display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.sm-responded > li {
display: grid;
grid-template-columns: minmax(8rem, auto) minmax(0, 1fr);
gap: var(--space-sm);
align-items: baseline;
font-family: var(--font-sans);
font-size: var(--font-size-sm);
}
.sm-responded-k { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-text); font-weight: var(--font-weight-medium); }
.sm-responded-k img { flex: none; width: 1.25rem; height: 1.25rem; align-self: center; }
.sm-responded-k b { font-weight: var(--font-weight-medium); color: var(--color-text-muted); }
.sm-responded-dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--color-text-muted); }
.sm-responded-refs { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-sm); }
.sm-responded-ref {
padding: 0;
border: none;
background: none;
color: var(--color-text);
font: inherit;
text-decoration: underline dotted color-mix(in srgb, var(--color-text) 40%, transparent);
text-underline-offset: 3px;
cursor: pointer;
}
.sm-responded-ref.is-selected { color: var(--color-primary); }
.sm-responded-ref:focus-visible { outline: 0; border-radius: var(--radius-sm); box-shadow: var(--focus-ring); }
.sm-responded-notes {
margin: var(--space-sm) 0 0;
padding-inline-start: var(--space-md);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
line-height: var(--leading-normal);
color: var(--color-text-muted);
}
@media (width <= 640px) {
.sm-responded > li { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
}
.sm-empty { margin: 0; font-family: var(--font-sans); font-size: var(--font-size-sm); line-height: var(--leading-normal); color: var(--color-text-muted); }
.sm-cols > [data-sm="log"] { display: flex; flex-direction: column; }
.sm-timeline {
flex: 1 1 auto;
height: 0;
min-height: 22rem;
margin: 0;
padding: 0;
overflow-y: auto;
list-style: none;
scrollbar-width: thin;
}
.sm-ev {
display: grid;
grid-template-columns: 4.25rem 1.25rem minmax(0, 1fr);
gap: var(--space-xs);
align-items: baseline;
padding: 5px 0;
font-family: var(--font-sans);
font-size: var(--font-size-sm);
line-height: var(--leading-snug);
color: var(--color-text-muted);
}
.sm-ev time { font-size: var(--font-size-xs); font-variant-numeric: tabular-nums; }
.sm-ev-i { text-align: center; color: var(--color-text-muted); }
.sm-ev[data-kind="draw"] .sm-ev-i { color: var(--m); }
.sm-ev[data-kind="draw"] .sm-ev-t { color: var(--color-text); }
.sm-log-draw {
padding: 0;
border: none;
background: none;
color: inherit;
font: inherit;
font-weight: var(--font-weight-medium);
text-decoration: underline dotted color-mix(in srgb, var(--color-text) 40%, transparent);
text-underline-offset: 3px;
cursor: pointer;
}
.sm-log-draw.is-selected { color: var(--color-primary); }
.sm-log-draw:focus-visible { outline: 0; border-radius: var(--radius-sm); box-shadow: var(--focus-ring); }
.sm-meaning { margin-bottom: var(--space-md); }
.sm-findings { display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.sm-finding {
display: block;
width: 100%;
padding: var(--space-sm) var(--space-md);
border: 1px solid var(--color-rule);
border-inline-start: 3px solid var(--color-accent);
border-radius: var(--radius-sm);
background: var(--paper-surface);
color: var(--color-text);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
line-height: var(--leading-normal);
text-align: start;
cursor: pointer;
}
.sm-finding:hover { background: var(--color-surface-hover); }
.sm-finding[aria-pressed="true"] { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 10%, var(--paper-surface)); }
.sm-finding:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.sm-meaning-lede {
margin: 0;
font-family: var(--font-title-serif);
font-size: var(--font-size-lg);
line-height: var(--leading-snug);
color: var(--color-text);
}
.sm-threads { margin: var(--space-sm) 0 0; padding-inline-start: var(--space-md); font-family: var(--font-sans); font-size: var(--font-size-sm); line-height: var(--leading-normal); color: var(--color-text); }
.sm-meaning-fact {
margin: var(--space-sm) 0 0;
font-family: var(--font-sans);
font-size: var(--font-size-sm);
line-height: var(--leading-normal);
color: var(--color-text-muted);
}
.sm-node.is-lit .sm-dot { r: 7px; }
.sm-past { fill: var(--paper-surface); stroke: var(--color-text-muted); stroke-width: 1.2; }
.sm-moodtable {
width: 100%;
margin-top: var(--space-sm);
border-collapse: collapse;
font-family: var(--font-sans);
font-size: var(--font-size-sm);
color: var(--color-text);
font-variant-numeric: tabular-nums;
}
.sm-moodtable thead th {
padding-bottom: var(--space-xs);
font-size: var(--font-size-3xs);
font-weight: var(--font-weight-bold);
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
text-align: start;
color: var(--color-text-muted);
}
.sm-moodtable thead th { padding-inline-end: var(--space-md); white-space: nowrap; }
.sm-moodtable td,
.sm-moodtable tbody th { padding: 5px var(--space-md) 5px 0; border-top: 1px solid var(--color-rule); vertical-align: top; text-align: start; }
.sm-moodtable tbody th { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-xs); font-weight: var(--font-weight-medium); }
.sm-moodtable tbody th small { flex-basis: 100%; padding-inline-start: 12px; font-size: var(--font-size-xs); font-weight: var(--font-weight-regular); color: var(--color-text-muted); }
.sm-moodtable td:nth-child(3),
.sm-moodtable td:last-child { color: var(--color-text-muted); }
.sm-share {
display: block;
width: 100%;
max-width: 5rem;
height: 4px;
margin: 6px 0 var(--space-2xs);
border-radius: var(--radius-full);
background: linear-gradient(to right, var(--m) var(--w), var(--color-well-strong) var(--w));
}
.sm-mood-flag { color: var(--color-accent-ink); font-weight: var(--font-weight-bold); }
.sm-archive-open {
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--space-2xs);
width: 100%;
border: none;
background: none;
font: inherit;
text-align: start;
cursor: pointer;
}
.sm-archive-open[aria-busy="true"] { cursor: progress; opacity: 0.7; }
.sm-archive-note {
font-family: var(--font-sans);
font-size: var(--font-size-xs);
color: var(--color-accent-ink);
}
.sm-thumb { display: block; width: 100%; max-width: 36rem; height: auto; margin-top: var(--space-2xs); overflow: visible; }
.sm-thumb-band { stroke: var(--color-rule); stroke-width: 4; stroke-linecap: round; }
.sm-thumb-nt { stroke: var(--color-text-muted); stroke-width: 1; }
.sm-thumb-path { fill: none; stroke: var(--color-primary); stroke-width: 1.6; opacity: 0.7; }
.sm-thumb-dot { fill: var(--m); stroke: var(--paper-surface); stroke-width: 1.5; }