/* HNHOT subjects route styles. */

.subject-directory-group {
margin-top: 32px;
}

.subject-directory-group > header {
display: flex; align-items: baseline; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line);
}

.subject-directory-group > header h2 {
margin: 0 0 11px; font: 700 24px/1.25 Georgia, "Noto Serif CJK SC", serif;
}

.subject-directory-group > header span {
color: var(--muted); font-size: 11px;
}

.subject-directory-group .knowledge-grid {
margin-top: 14px;
}

.subject-timeline {
margin-top: 30px;
}

.subject-timeline > header {
display: flex; padding: 0 2px 13px; align-items: flex-end; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line);
}

.subject-timeline > header h2 {
margin: 3px 0 0; font: 700 24px/1.25 Georgia, "Noto Serif CJK SC", serif;
}

.subject-timeline > header > span {
color: var(--muted); font-size: 10px;
}

.subject-timeline-list {
position: relative; display: grid;
}

.subject-timeline-list::before {
content: ""; position: absolute; top: 0; bottom: 0; left: 115px; width: 1px; background: var(--line);
}

.subject-timeline-entry {
position: relative; display: grid; padding: 22px 0; grid-template-columns: 96px minmax(0, 1fr); gap: 39px; border-bottom: 1px solid var(--line);
}

.subject-timeline-entry::before {
content: ""; position: absolute; top: 28px; left: 111px; width: 8px; height: 8px; border: 2px solid var(--paper); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px var(--accent);
}

.subject-timeline-date {
display: grid; align-content: start; justify-items: end; gap: 4px; text-align: right;
}

.subject-timeline-date time {
font: 700 13px/1.35 Georgia, "Noto Serif CJK SC", serif;
}

.subject-timeline-date small {
color: var(--muted); font-size: 8px;
}

.subject-timeline-content {
min-width: 0;
}

.subject-timeline-content > header {
display: flex; align-items: baseline; justify-content: space-between; gap: 15px;
}

.subject-timeline-content h2 {
margin: 0; font: 700 19px/1.5 Georgia, "Noto Serif CJK SC", serif;
}

.subject-timeline-place {
color: var(--ink); font-size: 11px; font-weight: 700; letter-spacing: .04em;
}

.subject-timeline-detail {
display: grid; margin: 11px 0 0; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 8px;
}

.subject-timeline-detail strong {
color: var(--accent); font-size: 10px;
}

.subject-timeline-detail span {
font-size: 12px; line-height: 1.7;
}

.subject-timeline-source {
margin-top: 13px; border-top: 1px solid var(--line-soft);
}

.subject-timeline-source summary {
padding-top: 10px; color: var(--muted); cursor: pointer; font-size: 10px; font-weight: 700; list-style: none;
}

.subject-timeline-source summary::-webkit-details-marker {
display: none;
}

.subject-timeline-source summary::before {
content: "+"; margin-right: 6px; color: var(--accent);
}

.subject-timeline-source[open] summary::before {
content: "−";
}

.subject-timeline-source > div {
margin-top: 9px; padding: 11px 12px; border-left: 2px solid var(--accent); background: color-mix(in srgb, var(--accent-soft) 48%, transparent);
}

.subject-source-published {
display: block; margin-bottom: 6px; color: var(--muted); font-size: 9px;
}

.subject-timeline-source a {
display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
}

.subject-timeline-source a strong {
font: 700 12px/1.55 Georgia, "Noto Serif CJK SC", serif;
}

.subject-timeline-source a span {
flex: 0 0 auto; color: var(--accent); font-size: 9px;
}

.subject-timeline-source blockquote {
margin: 8px 0 0; color: var(--muted); font-size: 10px; line-height: 1.7;
}

.observation-list {
position: relative; display: grid; padding-top: 4px;
}

.observation-list::before {
content: ""; position: absolute; top: 0; bottom: 0; left: 124px; width: 1px; background: var(--line);
}

.observation-card {
position: relative; display: grid; padding: 22px 0; grid-template-columns: 104px minmax(0, 1fr); gap: 40px; border-bottom: 1px solid var(--line);
}

.observation-card::before {
content: ""; position: absolute; top: 29px; left: 120px; width: 9px; height: 9px; border: 2px solid var(--paper); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px var(--accent);
}

.observation-date {
display: grid; align-content: start; gap: 3px; text-align: right;
}

.observation-date time, .observation-date > span {
font: 700 15px/1.35 Georgia, "Noto Serif CJK SC", serif;
}

.observation-date small {
color: var(--muted); font-size: 9px;
}

.observation-content {
min-width: 0; padding-right: 2px;
}

.observation-content h2 {
display: flex; margin: 0; align-items: baseline; flex-wrap: wrap; gap: 8px; font: 700 19px/1.5 Georgia, "Noto Serif CJK SC", serif;
}

.observation-content h2 > span {
display: inline-block; padding: 2px 7px; border-radius: 999px; color: var(--accent); background: var(--accent-soft); font: 750 10px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: .04em;
}

.observation-summary {
margin: 9px 0 0; color: var(--muted); line-height: 1.75;
}

.observation-date-evidence {
margin: 9px 0 0; color: var(--muted); font-size: 10px;
}

.observation-facts {
display: grid; margin: 14px 0 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--line-soft);
}

.observation-fact {
min-width: 0; padding: 10px 11px; background: var(--paper);
}

.observation-fact dt {
margin-bottom: 4px; color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: .08em;
}

.observation-fact dd {
display: flex; margin: 0; flex-wrap: wrap; gap: 5px 9px; font-size: 11px;
}

.observation-fact dd a {
color: var(--accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); text-underline-offset: 3px;
}

.observation-role dd {
display: grid;
}

.observation-sources {
margin-top: 13px; border-top: 1px solid var(--line-soft);
}

.observation-sources summary {
display: flex; padding: 10px 0 0; align-items: center; gap: 6px; color: var(--muted); cursor: pointer; font-size: 10px; font-weight: 700; list-style: none;
}

.observation-sources summary::-webkit-details-marker {
display: none;
}

.observation-sources summary::before {
content: "+"; color: var(--accent);
}

.observation-sources[open] summary::before {
content: "−";
}

.observation-sources summary span {
display: grid; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--line-soft); place-items: center; font-size: 9px;
}

.observation-sources ul {
display: grid; margin: 10px 0 0; padding: 0; gap: 8px; list-style: none;
}

.observation-sources li {
padding: 11px 12px; border-left: 2px solid var(--line); background: color-mix(in srgb, var(--paper) 70%, transparent);
}

.observation-sources blockquote {
margin: 0 0 6px; font-family: Georgia, "Noto Serif CJK SC", serif; font-size: 12px; line-height: 1.7;
}

.observation-sources li > a, .observation-sources li > span {
color: var(--accent); font-size: 10px;
}

.context-subject-list {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}

.context-subject-list li {
min-width: 0;
}

.context-subject-entry {
display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; border-left: 2px solid var(--accent); background: color-mix(in srgb, var(--bg) 58%, transparent);
}

.context-subject-link, .context-subject-static {
position: relative; display: grid; min-height: 100%; padding: 9px 11px; gap: 2px;
}

.context-subject-link {
transition: background-color .18s ease, box-shadow .18s ease;
}

.context-subject-link:hover {
color: var(--accent); background: var(--accent-soft);
}

.context-subject-link:focus-visible {
outline-offset: -2px;
}

.context-subject-link.is-active {
color: var(--ink); background: var(--paper); box-shadow: inset 0 0 0 2px var(--accent);
}

.context-subject-jump {
min-width: 88px; padding: 7px 10px; border: 0; border-left: 1px solid var(--line-soft); color: var(--accent); background: transparent; cursor: pointer; font-size: 10px; font-weight: 750; white-space: nowrap;
}

.context-subject-jump:hover {
background: var(--accent-soft);
}

.context-subject-jump.is-active {
color: var(--ink); background: var(--accent-soft);
}

.context-subject-jump:disabled {
color: var(--muted); cursor: default; opacity: .55;
}

.context-subject-list strong {
overflow-wrap: anywhere; font-family: Georgia, "Noto Serif CJK SC", serif; font-size: 13px; line-height: 1.45;
}

.context-subject-list li span {
grid-column: 1; color: var(--muted); font-size: 10px; line-height: 1.5;
}

.source-body .subject-mention {
color: inherit; background: transparent; scroll-margin-top: 90px;
}

.source-body .subject-person {
color: var(--ink); font-weight: 800;
}

.source-body .subject-entity {
color: var(--ink); font-weight: 650; text-decoration: underline dotted color-mix(in srgb, var(--muted) 72%, transparent); text-underline-offset: .16em;
}

.source-body .subject-mention.is-subject-active {
padding: 0 .12em; color: var(--ink); background: var(--accent-soft); border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; text-decoration: none; outline: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
}

@media (max-width: 760px) {
.subjects-page .explore-page-header {
padding-bottom: 0; border-bottom: 0;
}

.subjects-page .explore-page-header .eyebrow,
  .subjects-page .explore-page-header .explore-stats {
display: none;
}

.subjects-page .explore-page-header h1 {
margin: 0; font-size: 30px;
}

.subjects-page .directory-browser {
margin-top: 18px;
}

.subject-timeline > header {
align-items: flex-start;
}

.subject-timeline > header h2 {
font-size: 21px;
}

.subject-timeline {
margin-top: 22px;
}

.subject-timeline > header {
padding-bottom: 9px;
}

.subject-timeline-list::before {
left: 74px;
}

.subject-timeline-entry {
min-height: 82px; padding: 18px 0; grid-template-columns: 64px minmax(0, 1fr); gap: 30px;
}

.subject-timeline-entry::before {
top: 24px; left: 70px;
}

.subject-timeline-date {
align-content: start; justify-items: end; gap: 4px; padding-top: 1px; text-align: right;
}

.subject-timeline-date time {
font-size: 10px; line-height: 1.35; white-space: nowrap;
}

.subject-timeline-place {
font-size: 11px; line-height: 1.35;
}

.subject-timeline-detail {
margin-top: 8px;
}

.subject-timeline-source {
margin-top: 9px; border-top: 0;
}

.subject-timeline-source summary {
display: inline-flex; min-height: 24px; padding-top: 2px; align-items: center;
}

.subject-timeline-content > header {
align-items: flex-start; flex-direction: column; gap: 5px;
}

.subject-timeline-content h2 {
font-size: 16px; line-height: 1.5;
}

.observation-list::before {
left: 5px;
}

.observation-card {
padding: 19px 0 19px 20px; grid-template-columns: 1fr; gap: 8px;
}

.observation-card::before {
top: 25px; left: 1px;
}

.observation-date {
display: flex; align-items: baseline; gap: 8px; text-align: left;
}

.observation-date time, .observation-date > span {
font-size: 13px;
}

.observation-content h2 {
font-size: 17px;
}

.observation-facts {
grid-template-columns: 1fr;
}

.context-subject-list {
grid-template-columns: 1fr;
}

.context-subject-jump {
min-width: 92px;
}

.source-body .subject-mention {
scroll-margin-top: calc(54px + env(safe-area-inset-top) + 5.7em);
}
}