/* What the TRIH-ism index says of an item, wherever it is shown. Every selector starts with .trih (or .find-card), so nothing
   here touches the page around it. Colours and typefaces fall back to the main page's tokens when they exist.
   No boxes: in an answer it is an opening line set like the prose, and one quiet link with the rest behind it. */
.trih { --trih-soft: var(--text-4, #666); --trih-ink: var(--text, #1c1c1c); --trih-line: var(--line-weak, #ddd); --trih-yes: #1a6b3c; --trih-maybe: #8a5a00;
  --trih-serif: var(--font-serif, Georgia, 'Times New Roman', serif); font-family: var(--font-sans, system-ui, sans-serif); font-size: 13.5px; line-height: 1.5; }
@media (prefers-color-scheme: dark) { .trih { --trih-yes: #7fd6a4; --trih-maybe: #e6b95c; } }

/* the opening line: the prose's own typeface, a size up and a little heavier; under it one muted sentence */
.trih-opening { animation: trih-in .3s ease-out both; }
.trih-lead { margin: 0; font: 500 21px/1.32 var(--trih-serif); color: var(--trih-ink); text-wrap: pretty; }
.trih-note { margin: 5px 0 0; font-size: 12.5px; color: var(--trih-soft); }
@keyframes trih-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .trih-opening { animation: none; } }

/* the link, and what it opens */
.trih-fold > summary { cursor: pointer; list-style: none; width: fit-content; max-width: 100%; color: var(--trih-soft); font-size: 13px; }
.trih-fold > summary::-webkit-details-marker { display: none; }
.trih-more { color: var(--text-2, inherit); text-decoration: underline; text-decoration-color: var(--underline, currentColor); text-underline-offset: 2px; }
.trih-more::after { content: " ›"; display: inline-block; text-decoration: none; white-space: pre; }
.trih-fold[open] > summary .trih-more::after { content: " ⌄"; }
.trih-fold > summary:hover .trih-more { color: var(--mineral, inherit); text-decoration-color: currentColor; }
.trih-folded { padding-top: 14px; }

.trih-soft { color: var(--trih-soft); margin: .3rem 0; }
.trih-verdict { font: 500 17px/1.4 var(--trih-serif); color: var(--trih-ink); margin: 0 0 .3rem; }
.trih-cards { display: grid; gap: 8px 36px; grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr)); align-items: start; margin: 10px 0; }
.trih-card { min-width: 0; border-top: 1px solid var(--trih-line); padding-top: 12px; }
.trih-card h3 { margin: 0; font: 500 18px/1.3 var(--trih-serif); color: var(--trih-ink); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; }
.trih-figure { font: 400 13.5px/1.4 var(--font-sans, system-ui, sans-serif); color: var(--text-2, inherit); font-variant-numeric: tabular-nums; }
.trih-card p { margin: .25rem 0; }
.trih-card dl { display: grid; grid-template-columns: fit-content(40%) minmax(0, 1fr); gap: .3rem 1rem; margin: .75rem 0; }
.trih-card dt { color: var(--trih-soft); }
.trih-card dd { margin: 0; }
.trih-card summary { cursor: pointer; color: var(--text-2, inherit); padding: 2px 0; list-style: none; }
.trih-card summary::-webkit-details-marker { display: none; }
.trih-card summary::after { content: " ›"; white-space: pre; }
.trih-card details[open] > summary::after { content: " ⌄"; }
.trih-card summary:hover { color: var(--mineral, inherit); }

/* the timeline: a hairline, a tick for each episode, the years under it */
.trih-years { margin: 14px 0 12px; }
.trih > .trih-years { margin: 2px 0 16px; }
.trih-line { position: relative; height: 14px; border-bottom: 1px solid var(--line, #ccc); }
.trih-line i { position: absolute; bottom: 0; width: 1.5px; height: 11px; margin-left: -.75px; border-radius: 1px 1px 0 0; background: var(--trih-ink); opacity: .62; }
.trih-line i.trih-possible, .trih-line i.trih-probable { height: 6px; opacity: .3; }
.trih-yearnames { position: relative; height: 15px; font-size: 10.5px; color: var(--trih-soft); font-variant-numeric: tabular-nums; }
.trih-yearnames span { position: absolute; top: 3px; padding-left: 3px; border-left: 1px solid var(--line, #ccc); line-height: 1; }

/* every episode: its title, date, how sure and a link on one line; its moments run on under it, a time and the words heard */
.trih-card label { display: block; margin: .4rem 0 .5rem; color: var(--trih-soft); }
ol.trih-episodes { list-style: none; padding: 0; margin: .25rem 0 0; }
ol.trih-episodes > li { border-top: 1px solid var(--trih-line); padding: .55rem 0; }
ol.trih-episodes > li:focus { outline: 1px solid var(--trih-soft); outline-offset: 3px; border-radius: 2px; } /* (the first row that "Show all" has laid takes keyboard focus, and a thin ring shows where the new rows begin, whatever did the pressing: engines differ on when focus that a script has set counts as the keyboard's) */
.trih-all { margin: .5rem 0 0; padding: 2px 0; border: 0; background: none; font: inherit; cursor: pointer; color: var(--text-2, inherit); text-decoration: underline; text-decoration-color: var(--underline, currentColor); text-underline-offset: 2px; }
.trih-all:hover { color: var(--mineral, inherit); text-decoration-color: currentColor; }
.trih-ep { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .6rem; }
.trih-ep strong { font: 500 15.5px/1.35 var(--trih-serif); color: var(--trih-ink); }
.trih-ep .trih-soft { margin: 0; font-size: .75rem; font-variant-numeric: tabular-nums; }
.trih-ep a { margin-left: auto; font-size: .78rem; }
.trih a { color: var(--text-2, inherit); text-decoration-color: var(--underline, currentColor); text-underline-offset: 2px; }
.trih a:hover { color: var(--mineral, inherit); }
ol.trih-episodes ul { list-style: none; margin: .2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .05rem 1.1rem; font-size: .8rem; color: var(--text-3, inherit); }
.trih-when { font-variant-numeric: tabular-nums; color: var(--trih-soft); }
.trih-when .time-second { margin-left: 4px; font-size: .9em; opacity: .8; }   /* the second of a moment's two times (clock.js). Here, since trihisms.html loads this sheet and not styles.css */
/* how sure a row is: a word in colour, no outline */
.trih-tag { font-size: .72rem; white-space: normal; }
.trih-tag::before { content: "● "; font-size: .5rem; vertical-align: .12rem; }
.trih-confirmed, .trih-checked { color: var(--trih-yes); }
.trih-checked_twice, .trih-probable, .trih-possible, .trih-set_aside, .trih-machine, .trih-changed_since_check { color: var(--trih-maybe); }
.trih-line i.trih-confirmed, .trih-line i.trih-checked_twice, .trih-line i.trih-probable, .trih-line i.trih-possible { color: inherit; }
.trih-warn { color: var(--trih-maybe); border-left: 2px solid currentColor; padding-left: .6rem; }
/* above Find's list: a line of text on the page, not a panel */
.find-card { margin: 0 0 -6px; }
#find-switch .tail-note { text-align: left; margin: 0; }
.find-card .trih-folded { margin-top: 10px; padding: 16px 20px; border: 1px solid var(--line, #ddd); border-radius: 14px; background: var(--surface, transparent); }
.find-card .trih-card:first-child { border-top: 0; padding-top: 0; }