/* The Litigation section's own styles (public-worker/src/pages/litigation.js), on the site's tokens. Every class starts
 * with lit-. No page carries an inline style: each look is a class here. */

/* The site's visually hidden text (.sr, in every external link) is absolutely positioned. Inside a table that scrolls
 * sideways it must scroll with the table, or it widens the whole page on a phone: the wrapper becomes its containing block. */
.table-wrap { position: relative; }

/* filter forms: a select with a long option must not widen the page, and on a phone each control takes the full width */
.filters .field { min-width: 0; max-width: 100%; }
.filters .field select, .filters .field input { max-width: 100%; }
@media (max-width: 560px) {
  .filters .field { flex: 1 1 100%; }
  .filters .field select, .filters .field input { width: 100%; }
}

/* a second line under a table cell or a name, and the same inline after a heading */
.lit-sub { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; line-height: 1.35; }
.lit-sub-inline { color: var(--muted); font-weight: 400; font-size: .85em; }
.lit-sub-line { color: var(--muted); margin: -4px 0 14px; font-size: 13.5px; }
.lit-data { color: var(--muted); font-size: 13px; margin-top: 28px; }

/* issue chips and name lists */
.lit-chips, .lit-names { list-style: none; margin: 8px 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lit-chips a, .lit-names a { display: inline-block; padding: 1px 11px; border: 1px solid var(--control-border);
  border-radius: var(--radius-pill); font-size: 14px; text-decoration: none; }
.lit-chips a { color: var(--muted); font-size: 13px; }
.lit-chips a:hover, .lit-names a:hover { color: var(--text); border-color: var(--gold); }

/* lists of dockets, opinions and arguments (on the site's .records) */
.lit-list .meta + .meta { margin-top: 1px; }
.lit-cite { font-size: 14px; }
.lit-experts .title { font-size: 15px; }

/* ---- the tables: the case list, a case's documents, a docket's entries, an expert's roles ---- */
.lit-c-case { min-width: 230px; overflow-wrap: anywhere; }
.lit-c-entry, .lit-c-no, .lit-c-pages, .lit-c-date { white-space: nowrap; }
.lit-docs .lit-c-desc, .lit-entries .lit-c-desc { overflow-wrap: anywhere; min-width: 260px; }
.lit-roles td { min-width: 110px; }
.lit-roles details { margin-top: 4px; font-size: 14px; }
.lit-roles summary { cursor: pointer; color: var(--muted); }
.lit-docs tr.lit-hl, .lit-docs tr:target { background: var(--panel2); }
.lit-docs tr.lit-hl td:first-child, .lit-docs tr:target td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
.lit-docs tr { scroll-margin-top: 64px; }

/* On a phone a row becomes a card: the title first, then each value under its column's name. The header row stays for
 * screen readers. */
@media (max-width: 640px) {
  .lit-stack, .lit-stack tbody { display: block; width: 100%; }
  .lit-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lit-stack tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; padding: 12px 14px;
    border-bottom: 1px solid var(--border); }
  .lit-stack tbody tr:last-child { border-bottom: 0; }
  .lit-stack td { display: block; min-width: 0; padding: 0; border: 0; text-align: left; font-size: 14px; }
  .lit-stack td:empty { display: none; }
  .lit-stack td::before { content: attr(data-label); display: block; color: var(--muted); font-size: 11px; letter-spacing: .5px;
    text-transform: uppercase; }
  .lit-stack .lit-c-case, .lit-stack .lit-c-desc { flex: 1 1 100%; min-width: 0; font-size: 14px; }
  .lit-stack .lit-c-case::before, .lit-stack .lit-c-desc::before, .lit-stack .lit-c-open::before { content: none; }
  .lit-stack .lit-c-desc { order: -1; }
  .lit-stack .lit-c-open { margin-left: auto; }
  .lit-cases .lit-c-docs { order: 3; }
  .lit-cases .lit-c-issue { order: 4; flex: 1 1 100%; }
  .lit-cases .lit-c-outcome { order: 5; }
  .lit-roles .lit-c-docs { flex: 1 1 100%; }
  .lit-docs tr.lit-hl, .lit-docs tr:target { box-shadow: inset 3px 0 0 var(--gold); }
  .lit-docs tr.lit-hl td:first-child, .lit-docs tr:target td:first-child { box-shadow: none; }
}

/* an opinion or an oral-argument transcript */
.lit-text { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-sans); font-size: 14px; line-height: 1.7;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 20px;
  max-width: 82ch; margin: 12px 0 18px; }

/* an expert's page */
.lit-summary { font-size: 14px; max-width: 80ch; margin: 8px 0; }
.lit-toc ul { list-style: none; margin: 14px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; }
.lit-case { margin: 16px 0 22px; }
.lit-case h3 { margin: 0 0 4px; }
.lit-docs-list { list-style: none; margin: 4px 0 8px; padding: 0; }
.lit-docs-list > li { display: grid; grid-template-columns: minmax(120px, 200px) 1fr auto; gap: 2px 16px; padding: 8px 0;
  border-bottom: 1px solid var(--border); align-items: baseline; }
.lit-docs-list > li:last-child { border-bottom: 0; }
.lit-kind { font-size: 13px; font-weight: 600; }
.lit-kind-other { font-weight: 400; color: var(--muted); }
.lit-desc { overflow-wrap: anywhere; }
.lit-links { font-size: 14px; white-space: nowrap; }

.lit-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px 16px;
  margin: 12px 0; }
.lit-card h3 { margin: 0 0 6px; font-size: 15px; }
.lit-card p { margin: 6px 0; }
.lit-meta { color: var(--muted); font-size: 14px; }
.lit-src { font-size: 14px; margin-top: 8px; }
.lit-note { border-left: 3px solid var(--border-strong); padding: 6px 12px; color: var(--muted); font-size: 14px; max-width: 80ch; }
.lit-quote { margin: 10px 0; padding: 2px 14px; border-left: 3px solid var(--gold); }
.lit-quote p { margin: 0 0 4px; }
.lit-quote footer { color: var(--muted); font-size: 13px; }
.lit-plain { padding-left: 20px; max-width: 80ch; }
.lit-plain li { margin: 8px 0; }
.lit-inline { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 14px; }

@media (max-width: 640px) {
  .lit-docs-list > li { grid-template-columns: 1fr; }
  .lit-links { white-space: normal; }
  .lit-text { padding: 12px 14px; font-size: 15px; }
}