/* A topic page (topic.js): every row of the thread is one link, finger-sized on an iPad, with a visible mark on
   the item the arrow keys rest on. Built on pages.css's thread and cards; only the tokens in theme.css are used. */

.topic-page .crumb a { color: inherit; text-decoration: none; }
.topic-page .crumb a:hover { text-decoration: underline; text-underline-offset: .25em; }
.topic-page .topic-hint { display: none; margin: .7rem 0 0; font-size: .85rem; color: var(--ink-3); }
@media (hover: hover) and (pointer: fine) { .topic-page .topic-hint { display: block; } }   /* a keyboard is likely: say how it works */

/* the thread: the whole row is the link (pages.css sets the row's type on .t-date and .t-sum, the title on the link) */
.topic-page .thread li { display: block; }
.topic-page .thread a.t-row { display: grid; gap: .15rem; justify-self: stretch; min-height: var(--tap); padding: .6rem .8rem; margin: -.4rem -.8rem;
  border-radius: var(--r-s); transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.topic-page .thread a.t-row:hover { background: var(--accent-soft); color: var(--ink); }
.topic-page .thread a.t-row:hover .t-title { color: var(--accent-ink); }
.topic-page .thread .t-title { display: block; }
.topic-page .thread .t-sum { color: var(--ink-2); }
.topic-page .thread a.t-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.topic-page .thread li.is-current a.t-row, .topic-page .card-grid li.is-current a { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.topic-page .thread li.is-current::before { background: var(--accent); }
.topic-page .card-grid a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 760px) {
  .topic-page .item-actions .btn { flex: 1 1 auto; }
  .topic-page .thread a.t-row { padding: .6rem .6rem; margin: -.4rem -.6rem; }
}