/* Shared transcript reader and search. Used by every site.

   It carries its own colours rather than borrowing each site's tokens. The five
   sites name their tokens differently and not all of them define --paper or
   --ink, so inheriting produced a light panel with light text — unreadable on
   the dark themes. A site can still override by setting --tx-* if it wants to. */

:root {
  --tx-paper: #fdfbf7;
  --tx-ink: #24201b;
  --tx-soft: #6f675c;
  --tx-rule: #e6e0d6;
  --tx-accent: #b4712a;
  --tx-wash: #fff6dd;
}
@media (prefers-color-scheme: dark) {
  :root {
    --tx-paper: #1b1e20;
    --tx-ink: #e8ecec;
    --tx-soft: #9aa7ad;
    --tx-rule: #2f3538;
    --tx-accent: #e0a866;
    --tx-wash: #2c2a20;
  }
}
:root[data-theme="dark"] {
  --tx-paper: #1b1e20;
  --tx-ink: #e8ecec;
  --tx-soft: #9aa7ad;
  --tx-rule: #2f3538;
  --tx-accent: #e0a866;
  --tx-wash: #2c2a20;
}
:root[data-theme="light"] {
  --tx-paper: #fdfbf7;
  --tx-ink: #24201b;
  --tx-soft: #6f675c;
  --tx-rule: #e6e0d6;
  --tx-accent: #b4712a;
  --tx-wash: #fff6dd;
}

.tx-panel {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(20, 16, 12, .55);
  display: grid;
  place-items: end center;
  padding: 0;
}
/* an author `display` beats the UA rule for [hidden], so say it explicitly —
   without this the panel stays on screen after it is closed */
.tx-panel[hidden] { display: none; }
@media (min-width: 700px) {
  .tx-panel { place-items: center; padding: 2rem 1rem; }
}

.tx-sheet {
  background: var(--tx-paper);
  color: var(--tx-ink);
  width: min(52rem, 100%);
  max-height: min(88vh, 60rem);
  display: flex;
  flex-direction: column;
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, .3);
}
@media (min-width: 700px) {
  .tx-sheet { border-radius: 14px; box-shadow: 0 12px 50px rgba(0, 0, 0, .32); }
}

.tx-sheet header {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: 1rem 1.1rem .7rem;
  border-bottom: 1px solid var(--tx-rule);
}
.tx-sheet h2 {
  font-size: 1rem;
  line-height: 1.35;
  margin: 0;
  flex: 1;
  font-weight: 600;
}
.tx-ch {
  display: block;
  font-size: .8rem;
  font-weight: 400;
  color: var(--tx-soft);
  margin-top: .15rem;
}
.tx-close {
  border: 0;
  background: none;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: var(--tx-soft);
  padding: 0 .2rem;
}
.tx-close:hover { color: var(--tx-ink); }

.tx-find { padding: .6rem 1.1rem; border-bottom: 1px solid var(--tx-rule); }
.tx-find input {
  width: 100%;
  font: inherit;
  font-size: .9rem;
  padding: .45rem .6rem;
  border: 1px solid var(--tx-rule);
  border-radius: 7px;
  background: var(--tx-paper);
  color: inherit;
}

.tx-body {
  overflow-y: auto;
  padding: .9rem 1.1rem 1.4rem;
  -webkit-overflow-scrolling: touch;
}
.tx-line {
  display: flex;
  gap: .7rem;
  margin: 0 0 .55rem;
  font-size: .93rem;
  line-height: 1.6;
}
.tx-line.tx-hit {
  background: var(--tx-wash);
  border-radius: 6px;
  padding: .2rem .35rem;
  margin-left: -.35rem;
}
.tx-t {
  flex: none;
  font-variant-numeric: tabular-nums;
  font-size: .8rem;
  padding-top: .18rem;
  color: var(--tx-accent);
  text-decoration: none;
  min-width: 3.1rem;
}
.tx-t:hover { text-decoration: underline; }
.tx-wait { color: var(--tx-soft); font-size: .9rem; }
.tx-note {
  margin-top: 1.2rem;
  padding-top: .7rem;
  border-top: 1px solid var(--tx-rule);
  font-size: .8rem;
  color: var(--tx-soft);
}

/* ── search results ─────────────────────────────────────────────────────── */
.tx-hit {
  padding: .7rem 0;
  border-bottom: 1px solid var(--tx-rule);
  font-size: .92rem;
  line-height: 1.6;
}
.tx-hit p { margin: 0; }
.tx-hit-src {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
  margin-bottom: .25rem !important;
  font-size: .85rem;
}
.tx-hit-src > a:first-child {
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--tx-rule);
}
.tx-hit-src > a:first-child:hover { border-color: currentColor; }
/* The highlight sets its own foreground. Inheriting it means light text on a
   light wash — invisible on any of the dark themes, which is what happened. */
.tx-hit mark, .tx-body mark {
  background: #fbe08a;
  color: #241d09;
  padding: 0 .1em;
  border-radius: 2px;
}
.tx-spell { font-size: .8rem; color: var(--tx-soft); font-weight: 400; }

/* a link that opens a transcript, wherever a site chooses to put one */
.tx-open {
  font-size: .78rem;
  color: var(--tx-soft);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
  cursor: pointer;
}
.tx-open:hover { color: var(--tx-accent); }

@media print {
  .tx-panel, .tx-open { display: none !important; }
}

/* the search block a site drops into one of its own views */
.txsearch { margin: 1.8rem 0 0; }
.txsearch h2 { font-size: 1.05rem; margin: 0 0 .3rem; }
.txlede {
  font-size: .88rem;
  color: var(--tx-soft);
  margin: 0 0 .7rem;
  max-width: 40rem;
}
.txsearch input[type="search"] {
  width: 100%;
  max-width: 34rem;
  font: inherit;
  font-size: .95rem;
  padding: .5rem .7rem;
  border: 1px solid var(--tx-rule);
  border-radius: 8px;
  background: var(--tx-paper);
  color: inherit;
}
.txhits { font-size: .88rem; color: var(--tx-soft); margin: .7rem 0 0; }
.txout { margin-top: .6rem; }