/* Film directory table, search form and extracts dialog (variables from dap-redesign.css). */
.film-directory { padding: 3rem 0; }
.film-directory-count { color: var(--muted); margin: .25rem 0 0; }
.film-search { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 1.5rem 0; }
.film-search input[type="search"] { flex: 1 1 16rem; min-height: 44px; padding: 0 .75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.film-search select { min-height: 44px; padding: 0 .5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.film-search-check { display: inline-flex; gap: .4rem; align-items: center; min-height: 44px; }
.film-directory-results { color: var(--muted); }
.film-table { width: 100%; border-collapse: collapse; margin: 0 0 2.5rem; background: var(--paper); }
.film-table caption { caption-side: top; text-align: left; font-family: var(--serif); font-size: 1.35rem; padding: .5rem 0; color: var(--ink); }
.film-table th, .film-table td { padding: .6rem .75rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.film-table thead th { background: var(--bg-soft); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }
.film-number { white-space: nowrap; font-weight: 600; }
.film-subject { width: 60%; }
.film-extracts { white-space: nowrap; text-align: right; }
.film-directory-empty { padding: 2rem 0; }
.film-dialog { width: min(56rem, 92vw); border: 0; border-radius: var(--radius); padding: 1rem; background: var(--paper); color: var(--ink); }
.film-dialog::backdrop { background: rgba(20, 17, 12, .7); }
.film-dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.film-dialog-title { font-size: 1.1rem; margin: 0; }
.film-dialog-list { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: .75rem 0 0; list-style: none; }
.film-dialog-list button[aria-current="true"] { background: var(--accent-2); color: var(--on-dark); }
@media (max-width: 47.99rem) {
  .film-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .film-table tr { display: block; border-bottom: 1px solid var(--line); padding: .5rem 0; }
  .film-table th, .film-table td { display: block; border: 0; padding: .2rem .25rem; width: auto; text-align: left; }
  .film-table td[data-label]:not(:empty)::before { content: attr(data-label) " : "; color: var(--muted); }
}