/* indice — shared stylesheet for the server-rendered pages. Every value comes
 * from /assets/tokens.css, which every page links first.
 *
 * One design system, two modes. Reading content is always in the reading
 * accent; the workroom (body.mode-manage, for a caller who may write) changes
 * only the header band and the things that edit. See tokens.css. No webfonts:
 * indice ships self-contained and runs offline. */

* { box-sizing: border-box; }
body {
  font-family: var(--sans);
  margin: 0; color: var(--ink); background: var(--page); line-height: 1.5;
}
.wrap { max-width: var(--col); margin: 0 auto; padding: 2.2rem 1.25rem 4rem; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
/* One focus indicator for everything a keyboard can reach, in the current
   mode's accent: a solid ring that stays at least 3:1 against the page, where
   the tinted glows it replaces were barely 1.2:1. */
:focus-visible { outline: 2px solid var(--accent-dk); outline-offset: 2px; }

h1 { font-size: var(--t-3xl); margin: 0.3rem 0 0.25rem; letter-spacing: -0.01em; }
.page-title { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); border-bottom: 1px solid var(--rule); padding-bottom: 0.4rem; }
/* Homepage hero title (the tool's one-line purpose; the brand is in the header) */
.home-hero { font-size: var(--t-2xl); font-weight: var(--w-bold); margin: 0.6rem 0 var(--s-1); }
/* What the archive holds, in its own words: the serif, as for curators' text. */
.home-tagline { font-family: var(--serif); font-size: var(--t-lg); color: var(--text-2); max-width: var(--measure); margin: 0 0 var(--s-5); }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); font-size: var(--t-sm); word-break: break-all; }
.ok { color: var(--ok); }
.missing { color: var(--danger); }

/* The one label style: what a group of values is, above the values. */
.eyebrow, .browse-group h3, .facet-group h3, .manage-form label > span:first-child, .bx-mode legend { font-size: var(--t-sm); color: var(--muted); font-weight: var(--w-bold); }

/* ── Unified app header (full-bleed). One bar on every page; in the workroom
   it becomes a manila band with a top rule and gains the Manage chip and the
   signed-in name: the same header, not a separate stacked strip. ── */
.appbar {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.6rem 1.25rem; border-bottom: 1px solid var(--rule); background: var(--page);
}
.appbar .wordmark { font-size: var(--t-xl); font-weight: var(--w-bold); letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.appbar .wordmark:hover { text-decoration: none; }
.appbar .chip {
  font-size: var(--t-xs); font-weight: var(--w-bold);
  color: var(--page); background: var(--work); padding: 0.15rem 0.5rem; border-radius: var(--radius);
}
.appbar .search-form { flex: 1; max-width: 420px; }
.appbar .search-form input { padding: 0.4rem 0.65rem; font-size: var(--t-sm); }
.appbar .search-form .btn { padding: 0.4rem 0.85rem; font-size: var(--t-sm); }
.appbar .who { margin-left: auto; font-size: var(--t-sm); color: var(--muted); white-space: nowrap; }
.appbar .who b { color: var(--ink); font-weight: var(--w-bold); }
.appbar .login { margin-left: auto; font-size: var(--t-sm); color: var(--muted); white-space: nowrap; text-decoration: none; }
.appbar .login:hover { color: var(--ink); text-decoration: underline; }
/* Log out is a POST, so it is a button in a form; these rules make it read as
   the plain link it replaced. */
/* `display: contents` and not `inline`: .appbar is a flex container, which
   blockifies its items, so `inline` would be silently ignored. This removes the
   wrapper from layout entirely and makes the button itself the flex item, so it
   aligns with the adjacent text the way the old link did. */
.appbar .logout-form { display: contents; }
.appbar .logout { margin-left: 0.75rem; font: inherit; font-size: var(--t-sm); color: var(--muted); white-space: nowrap; background: none; border: 0; padding: 0; cursor: pointer; }
.appbar .logout:hover { color: var(--ink); text-decoration: underline; }
/* Workroom: the same bar as a manila band with a top rule. */
.mode-manage .appbar { background: var(--work-wash); border-top: 3px solid var(--work); }
/* The operator's notice under the header (`site.banner`), e.g. "This is a
   demo". A quiet panel, not an alert: it is standing information. */
.site-banner { background: var(--panel); border-bottom: 1px solid var(--rule); padding: var(--s-1) 1.25rem; font-size: var(--t-sm); color: var(--text-2); }
.site-banner > * { margin: 0; }
.site-banner > * + * { margin-top: var(--s-1); }
/* The signed-in reader's note: one line, the explanation then how to ask,
   wrapping only when the window is too narrow for it. */
.access-note > * { display: inline; }
.access-note > * + * { margin: 0 0 0 0.35em; }
/* The things that edit, in the workroom accent: a collection's Edit and Add
   crawls, New collection, and every button on a workroom form. Reading actions
   (Replay, Search) stay in the reading accent beside them. */
.btn.edit, .manage-form .btn { color: var(--work-dk); border-color: var(--work); }
.btn.edit:hover, .manage-form .btn:hover { background: var(--work-wash); }
.manage-form :focus-visible { outline-color: var(--work-dk); }


/* Search form */
.search-form { display: flex; gap: 0.5rem; }
.search-form.home { margin-bottom: 3rem; }
.top .search-form { flex: 1; }
/* min-width: a flex item keeps its content's width by default, which for an
   input is wide enough to push a phone-width page sideways. */
.search-form input {
  flex: 1; min-width: 0; padding: 0.6rem 0.8rem; font-size: var(--t-md);
  border: 1px solid var(--input-line); border-radius: var(--radius);
}
.search-form input:focus { border-color: var(--accent); }
.search-form .btn { padding: 0.6rem 1.2rem; font-size: var(--t-md); font-weight: var(--w-regular); }

/* Shared buttons: an outline in the reading accent. Buttons that edit
   (.btn.edit, and every button on a workroom form) take the workroom accent;
   see the workroom rules near the top. */
.btn {
  font: inherit; font-weight: var(--w-bold); font-size: var(--t-sm); cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap;
  padding: 0.5rem 1rem; border-radius: var(--radius);
  background: var(--page); color: var(--accent-dk); border: 1px solid var(--accent);
}
.btn:hover { background: var(--accent-wash); text-decoration: none; }
.btn.small { font-size: var(--t-sm); font-weight: var(--w-regular); padding: 0.3rem 0.7rem; }
/* Destructive action: red outline button + a collapsed "danger zone" so a
   delete always takes a deliberate expand-then-confirm, never one stray click. */
.btn.danger { color: var(--danger); border-color: var(--danger); }
.btn.danger:hover { background: var(--danger-wash); }
.danger-zone { margin: 2.5rem 0 0; border-top: 1px solid var(--rule); padding-top: 1rem; }
.danger-zone > summary { cursor: pointer; color: var(--danger); font-size: var(--t-sm); font-weight: var(--w-bold); width: fit-content; }
.confirm-delete { margin-top: 0.8rem; padding: var(--s-4) var(--s-5); border: 1px solid var(--danger); border-radius: var(--radius); background: var(--danger-wash); max-width: 640px; }
.confirm-delete p { margin: 0 0 0.7rem; }
.confirm-with-crawls { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.8rem; font-size: var(--t-sm); }
.confirm-with-crawls input { width: auto; }

/* Section heading with an optional action on the right (e.g. + New collection) */
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.section-head h2 { border: none; padding: 0; margin: 0; }

/* Search tips disclosure */
.tips { margin: 0 0 2rem; font-size: var(--t-sm); }
.tips summary { cursor: pointer; color: var(--accent); width: fit-content; }
.tips-body {
  margin-top: 0.6rem; padding: var(--s-4) var(--s-5); background: var(--panel);
  border: 1px solid var(--rule); border-radius: var(--radius); color: var(--text-2);
}
.tips-body p { margin: 0.4rem 0; }
.tips-body ul { margin: 0.5rem 0; padding-left: 1.2rem; }
.tips-body li { margin: 0.25rem 0; }
.tips-body code {
  background: var(--panel-2); padding: 0.05rem 0.3rem; border-radius: 3px;
  font-family: var(--mono); font-size: 0.85em;
}
.tips-note { color: var(--muted); margin-bottom: 0 !important; }

/* Homepage browse entry points */
.browse { display: flex; flex-wrap: wrap; gap: 2rem; margin: 0 0 2.5rem; }
.browse-group { flex: 1 1 260px; }
.browse-group h3 { margin: 0 0 0.5rem; }
.browse-links { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.browse-link { display: inline-flex; align-items: baseline; gap: 0.3rem; background: var(--page); color: var(--ink); border: 1px solid var(--rule); padding: var(--s-1) var(--s-3); border-radius: var(--radius); text-decoration: none; font-size: var(--t-sm); }
.browse-link:hover { background: var(--panel); text-decoration: none; }
.browse-count { color: var(--muted); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }

/* Collection cards (homepage) */
.cards { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.card { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--page); overflow: hidden; position: relative; }
.card:hover { border-color: var(--input-line); }
.card-header { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; margin-bottom: 0.4rem; }
.card-title { font-size: var(--t-md); font-weight: var(--w-bold); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
/* Where a card's WACZs live, in words, under its title. */
.card-source { font-size: var(--t-xs); color: var(--muted); margin: 0 0 var(--s-2); }
.card-title:hover { text-decoration: none; color: var(--accent-dk); }

/* Representative image (a crawl's og:image thumbnail, else a CSS placeholder). */
.thumb { aspect-ratio: 16 / 9; overflow: hidden; background: var(--panel-2); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-thumb { display: block; }
.detail-thumb { max-width: 480px; margin: 0.4rem 0 1.1rem; }
.detail-thumb .thumb { border-radius: var(--radius); }
/* card text lives in a padded body under the (bled) thumbnail */
.card-body { padding: var(--s-4) var(--s-4) var(--s-5); }
.desc { font-family: var(--serif); color: var(--text-2); font-size: var(--t-md); margin: 0.4rem 0; max-width: var(--measure); }

.source-badge { flex: none; font-size: var(--t-xs); color: var(--muted); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.1rem var(--s-1); line-height: 1.2; white-space: nowrap; }
.thumb.blank { background: var(--panel); }
.crawl-title { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0.3rem 0 0.4rem; }
.crawl-title .page-title { margin: 0; }
.card-title-wrap { display: flex; align-items: baseline; gap: 0.4rem; min-width: 0; }
.status { font-size: var(--t-xs); white-space: nowrap; }

/* Provenance chip */
.prov {
  font-size: var(--t-sm); color: var(--text-2); background: var(--panel); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: var(--s-2) var(--s-3); margin: 0.25rem 0 0; line-height: 1.4;
  display: inline-block;
}

/* Finding-aid "About this collection" front-matter */
.about { margin: 0 0 1.75rem; }
/* The finding aid's prose: serif, at a reading measure, with a little more
   leading than the sans around it. */
.about .narrative { font-family: var(--serif); color: var(--text-2); font-size: var(--t-lg); line-height: 1.6; max-width: var(--measure); margin: 0.4rem 0 1rem; }
.about .narrative > :first-child { margin-top: 0; }
.about .narrative h2 { font-size: var(--t-md); border: none; padding: 0; margin: 1rem 0 0.3rem; }
.about .narrative h3 { font-size: var(--t-md); margin: 0.8rem 0 0.3rem; }
.about .narrative p { margin: 0.5rem 0; }
.about .narrative ul, .about .narrative ol { margin: 0.5rem 0; padding-left: 1.3rem; }
.about .narrative blockquote { margin: 0.6rem 0; padding-left: 0.8rem; border-left: 3px solid var(--rule); color: var(--muted); }
.about .narrative code { background: var(--panel-2); padding: 0.05rem 0.3rem; border-radius: 3px; font-family: var(--mono); font-size: 0.85em; }
.nudge { font-size: var(--t-sm); line-height: 1.5; margin: 0.4rem 0 1rem; }
.nudge code { background: var(--panel-2); padding: 0.05rem 0.3rem; border-radius: 3px; font-family: var(--mono); font-size: 0.85em; color: var(--text-2); }

/* Metadata tables (collection/wacz pages) */
table.meta { border-collapse: collapse; font-size: var(--t-sm); margin-bottom: 2rem; }
table.meta th { text-align: left; padding: 0.3rem 1rem 0.3rem 0; color: var(--muted); font-weight: var(--w-bold); vertical-align: top; white-space: nowrap; }
table.meta td { padding: 0.3rem 0; font-variant-numeric: tabular-nums; }

.card-footer { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.6rem; }
.card-footer .prov { margin: 0; }
.card-footer .btn { margin: 0 0 0 auto; }

/* Lists of pages / members */
ul.pages { list-style: none; padding: 0; }
ul.pages li { padding: 0.5rem 0; border-bottom: 1px solid var(--rule-soft); }
ul.pages a { color: var(--accent); font-size: var(--t-md); text-decoration: none; }
ul.pages a:hover { text-decoration: underline; }

/* Search results */
.count { color: var(--muted); font-size: var(--t-sm); margin-bottom: 1rem; font-variant-numeric: tabular-nums; }
table.results { width: 100%; border-collapse: collapse; }
table.results tr { border-bottom: 1px solid var(--rule); }
table.results td { padding: 0.8rem 0.4rem; vertical-align: top; }
.result-title { font-family: var(--serif); font-size: var(--t-lg); font-weight: var(--w-regular); max-width: var(--measure); }
.result-title a { color: var(--accent); }
/* An identifier, so monospace, and quiet beside the title it belongs to. */
.result-url { font-family: var(--mono); font-size: var(--t-xs); color: var(--muted); margin: 0.15rem 0; }
.result-ts { font-size: var(--t-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.capture-count { color: var(--accent); }
.result-status { display: inline-block; font-size: var(--t-xs); font-weight: var(--w-bold); background: var(--danger-wash); color: var(--danger); border: 1px solid var(--danger-line); padding: 0.05rem 0.35rem; border-radius: 3px; margin-top: 0.15rem; }
.result-coll { font-size: var(--t-xs); color: var(--muted); margin-top: 0.3rem; }
.result-coll-badge { display: inline-block; font-size: var(--t-xs); background: var(--panel-2); color: var(--accent-dk); padding: 0.1rem 0.4rem; border-radius: 3px; margin-bottom: 0.15rem; }
.result-note-badge { display: inline-block; font-size: var(--t-xs); background: var(--accent); color: #fff; padding: 0.1rem 0.4rem; border-radius: 3px; margin-bottom: 0.15rem; }
.result-note-author { font-size: var(--t-xs); color: var(--muted); }
.snippet { font-family: var(--serif); font-size: var(--t-md); color: var(--text-2); margin: 0.4rem 0; line-height: 1.5; max-width: var(--measure); }
.snippet b { background: var(--highlight); font-weight: var(--w-bold); }
.replay-col { width: 100px; text-align: right; white-space: nowrap; }

/* What to try when nothing matched. */
.next-steps { margin: 0 0 var(--s-5); padding-left: var(--s-5); color: var(--text-2); }
.next-steps li { margin: var(--s-1) 0; }

/* Active filter chips */
.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 1rem; font-size: var(--t-sm); }
.active-filters .active-label { color: var(--muted); }
.filter-chip { display: inline-flex; align-items: center; gap: 0.15rem; background: var(--panel-2); color: var(--accent-dk); padding: var(--s-1) var(--s-3); border-radius: 12px; text-decoration: none; }
.filter-chip:hover { background: var(--accent-wash); text-decoration: none; }
.filter-chip .chip-label { color: var(--muted); }

/* The time axis: a bar per month across the span, empty months included,
   years marked by a rule and a label. The one bold element on a page. */
.timeline { display: flex; align-items: flex-end; gap: 1px; height: 96px; margin: 0 0 var(--s-6); padding-bottom: var(--s-5); border-bottom: 1px solid var(--rule); }
/* No minimum width: a decade is 120 bars, which must fit a phone too. */
.tl-bar { flex: 1 1 0; min-width: 0; height: 100%; position: relative; display: flex; align-items: flex-end; text-decoration: none; }
.tl-bar.tl-year { border-left: 1px solid var(--rule); }
.tl-fill { width: 100%; background: var(--accent); }
.tl-fill.h0 { height: 0; } .tl-fill.h1 { height: 10%; } .tl-fill.h2 { height: 20%; } .tl-fill.h3 { height: 30%; }
.tl-fill.h4 { height: 40%; } .tl-fill.h5 { height: 50%; } .tl-fill.h6 { height: 60%; } .tl-fill.h7 { height: 70%; }
.tl-fill.h8 { height: 80%; } .tl-fill.h9 { height: 90%; } .tl-fill.h10 { height: 100%; }
a.tl-bar:hover .tl-fill, a.tl-bar:focus-visible .tl-fill, .tl-bar.active .tl-fill { background: var(--accent-dk); }
.tl-yr { position: absolute; left: 3px; bottom: calc(-1 * var(--s-5)); font-size: var(--t-xs); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* A month's count, on hover and on keyboard focus. */
.tl-tip { display: none; position: absolute; bottom: calc(100% + var(--s-1)); left: 50%; transform: translateX(-50%); z-index: 1; background: var(--ink); color: var(--page); font-size: var(--t-xs); padding: var(--s-1) var(--s-2); border-radius: var(--radius); white-space: nowrap; }
a.tl-bar:hover .tl-tip, a.tl-bar:focus-visible .tl-tip { display: block; }

/* A collection's crawls as a dated list, newest first. */
.crawl-list { list-style: none; margin: 0; padding: 0; }
.crawl-item { display: flex; gap: var(--s-4); align-items: flex-start; padding: var(--s-4) 0; border-bottom: 1px solid var(--rule-soft); }
.crawl-thumb { flex: 0 0 160px; }
.crawl-thumb .thumb { border: 1px solid var(--rule); border-radius: var(--radius); }
.crawl-text { flex: 1; min-width: 0; }
.crawl-when { font-size: var(--t-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.crawl-prov { font-size: var(--t-sm); color: var(--text-2); margin: 0; max-width: var(--measure); }

/* Faceted results layout: sidebar + results */
.results-layout { display: flex; gap: 1.75rem; align-items: flex-start; }
.results-main { flex: 1; min-width: 0; }
aside.facets { flex: 0 0 200px; font-size: var(--t-sm); }
.facets-title { font-size: var(--t-md); border: none; padding: 0; margin: 0 0 0.8rem; }
.facet-more > summary { cursor: pointer; color: var(--accent); padding: 0.2rem 0.4rem; width: fit-content; }
.facet-more[open] > summary { margin-bottom: 0.1rem; }
.facet-group { margin-bottom: 1.4rem; }
.facet-group h3 { margin: 0 0 0.4rem; border-bottom: 1px solid var(--rule); padding-bottom: 0.25rem; }
.facet-group ul { list-style: none; margin: 0; padding: 0; }
.facet-group li { margin: 0.1rem 0; }
.facet-group li a { display: flex; justify-content: space-between; gap: 0.5rem; padding: var(--s-1) var(--s-2); border-radius: var(--radius); color: var(--accent); text-decoration: none; }
.facet-group li a:hover { background: var(--panel); text-decoration: none; }
.facet-group .facet-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.facet-group .facet-count { color: var(--muted); flex: none; font-variant-numeric: tabular-nums; }
.facet-item.active a { background: var(--panel-2); color: var(--accent-dk); font-weight: var(--w-bold); }
.facet-item.active .facet-value::before { content: "✓ "; }

/* Pagination */
nav.pagination { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 2rem 0 1rem; font-size: var(--t-sm); }
nav.pagination a { color: var(--accent); text-decoration: none; padding: 0.4rem 0.8rem; border: 1px solid var(--rule); border-radius: var(--radius); }
nav.pagination a:hover { background: var(--panel); text-decoration: none; }
nav.pagination .disabled { color: var(--muted); padding: 0.4rem 0.8rem; border: 1px solid var(--rule-soft); border-radius: var(--radius); }
nav.pagination .page-info { color: var(--muted); }

/* Breadcrumb path (workroom sub-pages) */
.crumbs { font-size: var(--t-sm); color: var(--muted); margin-bottom: 1rem; }
.crumbs a { color: var(--muted); }
.crumbs b { color: var(--ink); font-weight: var(--w-bold); }
.crumbs .sep { color: var(--rule); }

/* ── Edit-in-place affordances (rendered only in .mode-manage) ── */
/* Collection action row: Replay + (workroom) Edit / Add crawls, one line. */
.actions { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin: 0 0 1.5rem; }
.actions .btn { margin: 0; }
.card .card-edit {
  position: absolute; top: 0.55rem; right: 0.55rem; font-size: var(--t-xs); font-weight: var(--w-bold);
  background: var(--page); color: var(--work-dk); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 0.12rem 0.55rem; text-decoration: none;
}
.card-edit:hover { background: var(--page); text-decoration: none; }

/* Empty state */
.empty-cta { border: 1px dashed var(--input-line); border-radius: var(--radius); padding: 2rem 1.5rem; text-align: center; background: var(--panel); margin: 1rem 0; }
.empty-cta p { margin: 0 0 1rem; color: var(--muted); }

/* ── Workroom forms + accession desk ── */
.manage-form { display: flex; flex-direction: column; gap: 1rem; max-width: 640px; }
.manage-form label { display: flex; flex-direction: column; gap: 0.3rem; font-size: var(--t-sm); }
/* A field's hint, on its own line under the label rather than run on after it. */
.manage-form .hint { display: block; color: var(--muted); font-weight: var(--w-regular); margin-top: 0.1rem; }
.manage-form input, .manage-form textarea {
  padding: 0.5rem 0.7rem; font-size: var(--t-md); font-family: inherit; color: var(--ink);
  border: 1px solid var(--input-line); border-radius: var(--radius); width: 100%;
}
.manage-form input:focus, .manage-form textarea:focus { border-color: var(--work); }
.manage-form input[readonly] { background: var(--panel); color: var(--muted); }
.manage-form input[type="file"] { border: none; padding-left: 0; }
.manage-form textarea { resize: vertical; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4) 1.1rem; }
.form-actions { display: flex; align-items: center; gap: 1rem; }
.form-actions .muted { color: var(--muted); font-size: var(--t-sm); }
.form-actions .cancel { color: var(--muted); text-decoration: none; font-size: var(--t-sm); }

/* Accession desk: source tabs */
.sources { display: flex; gap: 0.4rem; border-bottom: 1px solid var(--rule); margin-bottom: 1.3rem; flex-wrap: wrap; }
.src-tab {
  font: inherit; font-weight: var(--w-bold); font-size: var(--t-sm); cursor: pointer; text-decoration: none;
  padding: 0.6rem 0.9rem; border: none; background: none; color: var(--muted);
  border-bottom: 2.5px solid transparent; margin-bottom: -1px;
}
.src-tab:hover { color: var(--ink); text-decoration: none; }
.src-tab[aria-selected="true"] { color: var(--work-dk); border-bottom-color: var(--work); }
.src-panel { display: none; }
.src-panel.active { display: block; }

/* Browsertrix import wizard */
.manage-form select { padding: 0.45rem 0.6rem; border: 1px solid var(--input-line); border-radius: var(--radius); font: inherit; background: var(--page); width: 100%; }
.bx-connect { display: flex; gap: 0.5rem; align-items: center; margin: 0.7rem 0; }
.bx-connect input { flex: 1; padding: 0.45rem 0.6rem; border: 1px solid var(--input-line); border-radius: var(--radius); font: inherit; }
.bx-browse { margin: 0.7rem 0; }
.bx-browse .grid-2 { margin-bottom: 0.6rem; }
/* Filter/refresh toolbar above the crawl list. */
.bx-toolbar { display: flex; align-items: center; gap: 0.9rem; margin: 0.2rem 0 0.4rem; flex-wrap: wrap; }
.bx-toolbar .bx-filter { flex-direction: row; align-items: center; gap: 0.45rem; }
.bx-toolbar .bx-filter select { width: auto; }
.bx-toolbar .bx-check { flex-direction: row; align-items: center; gap: 0.35rem; font-size: var(--t-xs); color: var(--muted); }
.bx-toolbar .bx-check input { width: auto; }
.bx-toolbar #bx-refresh, .bx-toolbar #ait-refresh { margin-left: auto; }
/* Download-vs-stream chooser under the crawl list. */
.bx-mode { border: 1px solid var(--rule-soft); border-radius: var(--radius); padding: var(--s-3) var(--s-4); margin: 0.7rem 0 0; display: flex; flex-direction: column; gap: 0.4rem; }
.bx-mode legend { padding: 0 0.3rem; }
.bx-mode label { display: flex; flex-direction: row; align-items: baseline; gap: 0.45rem; font-size: var(--t-sm); cursor: pointer; }
.bx-mode input { width: auto; flex: none; }
.bx-mode .hint { color: var(--muted); }
.add-done-link { margin: 0.5rem 0 0; font-size: var(--t-sm); }
.add-done-link p { margin: 0.3rem 0; }
.add-done-crawls { margin: 0.2rem 0 0.4rem 1.1rem; padding: 0; }
.add-done-crawls li { margin: 0.15rem 0; }
.bx-items { display: flex; flex-direction: column; margin: 0.7rem 0; max-height: 320px; overflow-y: auto; }
.bx-items:empty { display: none; }
/* Crawl row: one full-width line on desktop: checkbox, name (grows), date,
   QA, size (right). Wraps to stacked metadata only on narrow screens. */
/* Scoped under .bx-items so these beat `.manage-form label { flex-direction: column }`. */
.bx-items .bx-item { display: flex; flex-direction: row; align-items: center; gap: 0.75rem; padding: 0.45rem 0.4rem; border-bottom: 1px solid var(--rule-soft); font-size: var(--t-sm); cursor: pointer; }
.bx-item:last-child { border-bottom: none; }
.bx-item:hover { background: var(--panel); }
/* width:auto stops the checkbox inheriting `.manage-form input { width:100% }`. */
.bx-items .bx-item input { flex: none; width: auto; margin: 0; }
.bx-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Fixed-width, right-aligned trailing columns so they line up across rows. */
.bx-date { flex: none; width: 5.5rem; text-align: right; color: var(--muted); font-size: var(--t-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bx-qa { flex: none; width: 5rem; text-align: right; font-size: var(--t-xs); font-weight: var(--w-bold); color: var(--muted); white-space: nowrap; }
.bx-qa.yes { color: var(--ok); }
/* Already-imported crawls: dimmed, non-selectable, with an "in library" tag. */
.bx-item.imported { opacity: 0.62; cursor: default; }
.bx-badge { flex: none; font-size: var(--t-xs); font-weight: var(--w-bold); color: var(--muted); background: var(--panel); border: 1px solid var(--rule-soft); border-radius: var(--radius); padding: 0.05rem 0.45rem; white-space: nowrap; }
.bx-size { flex: none; width: 5rem; text-align: right; color: var(--muted); font-size: var(--t-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Give the accession desk (with its crawl list) more room than a plain form. */
#add-archive-form { max-width: 820px; }
/* Narrow screens: metadata wraps under the name, indented past the checkbox. */
@media (max-width: 560px) {
  .bx-items .bx-item { flex-wrap: wrap; align-items: baseline; }
  .bx-name { flex: 1 1 60%; }
  .bx-date, .bx-qa, .bx-size { margin-left: 1.7rem; width: auto; text-align: left; }
}

.progress {
  margin: 0.8rem 0 0; min-height: 1.2rem; white-space: pre-wrap;
  font-family: var(--mono); font-size: var(--t-sm); color: var(--text-2);
}
.progress:empty { display: none; }

.note { font-size: var(--t-sm); color: var(--muted); background: var(--panel); border-left: 3px solid var(--work); padding: var(--s-3) var(--s-4); border-radius: 0 var(--radius) var(--radius) 0; }

/* Collection manage panel (finding-aid editor + its crawls) */
.panel { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--page); margin-bottom: 1.4rem; overflow: hidden; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: var(--s-3) var(--s-5); background: var(--panel); border-bottom: 1px solid var(--rule); }
.panel-head h2 { font-size: var(--t-md); border: none; padding: 0; }
.panel-body { padding: var(--s-5); }
.crawl-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.25rem; border-bottom: 1px solid var(--rule-soft); font-size: var(--t-sm); }
.crawl-row:last-child { border-bottom: none; }
.crawl-row .id { font-family: var(--mono); font-size: var(--t-xs); color: var(--muted); }
.crawl-row .grow { flex: 1; min-width: 0; }

@media (max-width: 640px) {
  .grid-2 { grid-template-columns: 1fr; }
  /* The results come first in the markup, so stacking puts them above the
     facets, which follow as a "Refine" section. */
  .results-layout { flex-direction: column; }
  aside.facets { flex-basis: auto; width: 100%; }
  .crawl-thumb { flex-basis: 96px; }
  .timeline { gap: 0; }
  /* The header search takes a line of its own rather than pushing the page
     wider than the screen. */
  .appbar { flex-wrap: wrap; }
  .appbar .search-form { order: 3; flex-basis: 100%; max-width: none; }
  /* Each result stacks, its Replay button under the text, so the table
     needs no fixed column. */
  table.results, table.results tbody, table.results tr, table.results td { display: block; }
  table.results td { padding: 0.8rem 0 0; }
  table.results td.replay-col { width: auto; text-align: left; padding: 0.5rem 0 0.8rem; }
  .result-url { overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Breadcrumb above a crawl or the notes index ("in <collection>"). */
.crumb { font-size: var(--t-sm); color: var(--muted); margin-bottom: 0.4rem; }
/* Annotations: the per-collection index/browse and the collection-page summary. */
.annotations-summary { margin: 1.4rem 0; }
.anno-index { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-4); }
.anno-index-item { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--panel); padding: var(--s-4) var(--s-5); }
.anno-index-meta { font-size: var(--t-xs); color: var(--muted); margin-bottom: 0.35rem; }
.anno-index-meta .anno-author { font-weight: var(--w-bold); color: var(--muted); }
.anno-quote { font-family: var(--serif); font-size: var(--t-md); color: var(--muted); font-style: italic; border-left: 2px solid var(--rule); padding-left: 0.6rem; margin: 0 0 0.45rem; }
.anno-index-body { font-family: var(--serif); font-size: var(--t-md); line-height: 1.6; max-width: var(--measure); }
.anno-index-body > :first-child { margin-top: 0; }
.anno-index-body > :last-child { margin-bottom: 0; }
.anno-index-body p { margin: 0.5rem 0; }
.anno-index-body h1, .anno-index-body h2, .anno-index-body h3, .anno-index-body h4, .anno-index-body h5, .anno-index-body h6 { font-size: var(--t-md); font-weight: var(--w-bold); border: none; padding: 0; margin: 0.8rem 0 0.3rem; line-height: 1.3; }
.anno-index-body ul, .anno-index-body ol { margin: 0.5rem 0; padding-left: 1.3rem; }
.anno-index-body a { color: var(--accent-dk); }
.anno-index-body hr { border: none; border-top: 1px solid var(--rule); margin: 0.8rem 0; }
.anno-index-body blockquote { margin: 0.6rem 0; padding-left: 0.8rem; border-left: 3px solid var(--rule); color: var(--muted); }
.anno-index-body code { background: var(--panel-2); padding: 0.05rem 0.3rem; border-radius: 3px; font-family: var(--mono); font-size: 0.85em; }
.anno-index-body pre { background: var(--panel-2); padding: 0.5rem 0.7rem; border-radius: var(--radius); overflow-x: auto; }
.anno-index-body pre code { background: none; padding: 0; }
.anno-index-loc { font-size: var(--t-sm); margin: 0.5rem 0 0; }
.anno-index-loc .muted { color: var(--muted); word-break: break-all; }