/* History's top, in versions (Lane U2, history-tops.js). Classic is untouched: every rule here sits under .htop. */

.htop .htop-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.htop .htop-bar #s-q { flex: 1 1 260px; min-width: 0; }
.htop #s-q.htop-big { font-size: 18px; padding: 14px 16px; border-radius: 14px; }
.htop .htop-photo { flex: 0 0 auto; }
.htop .htop-span { margin: 4px 0; }
.htop .htop-grow { flex: 1 1 240px; min-width: 0; }
.htop .htop-grow #s-q { width: 100%; }
.htop .htop-contents { display: contents; }
.htop .htop-contents[hidden] { display: none; }
.htop .htop-more { margin: 8px 0 0; }
.htop .htop-more > summary { cursor: pointer; color: var(--ink-faint); font-size: 13px; padding: 4px 0; }
.htop .htop-examples { margin: 6px 0; }
.htop .htop-look { margin-top: 8px; }

/* Source chips */
.htop .htop-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.htop .htop-chip { padding: 5px 12px; min-height: 30px; border-radius: 999px; border: 1px solid var(--hairline); background: var(--raised);
  color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.htop .htop-chip.on { background: var(--accent); color: var(--accent-ink, #06210e); border-color: var(--accent); }
.htop .htop-big-chips .htop-chip { font-size: 15px; padding: 10px 18px; min-height: 42px; }
.htop .htop-center { justify-content: center; }

/* Segmented switches: one track, the picked one raised */
.htop .htop-segmented { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 999px; background: var(--hairline-strong, #2b2b2b); margin: 6px 8px 6px 0; }
.htop .htop-segmented .htop-chip, .htop .htop-segmented button { border: 0; background: transparent; color: var(--ink-faint); border-radius: 999px;
  padding: 5px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.htop .htop-segmented .on { background: #fff; color: #111; }

/* Tabs by source */
.htop .htop-tabs { gap: 0; border-bottom: 1px solid var(--hairline); }
.htop .htop-tabs .htop-chip { border: 0; border-radius: 0; background: transparent; border-bottom: 2px solid transparent; padding: 8px 14px; }
.htop .htop-tabs .htop-chip.on { background: transparent; color: var(--ink); border-bottom-color: var(--accent); }

/* Filters in a drawer */
.htop .htop-drawer { margin-top: 6px; }
.htop .htop-drawer > summary { list-style: none; display: inline-block; }
.htop .htop-drawer > summary::-webkit-details-marker { display: none; }
.htop .htop-drawer[open] .htop-drawer-body { border: 1px solid var(--hairline); border-radius: var(--r-md, 12px); padding: 12px; margin-top: 8px;
  background: var(--raised); }

/* Filters on the left */
.htop .htop-2col { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); gap: 16px; }
.htop .htop-stack { flex-direction: column; align-items: stretch; }
.htop .htop-stack > * { flex: 0 0 auto; }
@media (max-width: 720px) { .htop .htop-2col { grid-template-columns: 1fr; } }

/* Big date tiles */
.htop .htop-tiles .quick-ranges { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.htop .htop-tiles .quick-ranges .btn { min-height: 52px; font-size: 14px; }

/* Read like a sentence */
.htop .htop-sentence { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 16px; }
.htop .htop-sentence label { display: none; }
.htop .htop-sentence > div, .htop .htop-inline > div { flex: 0 0 auto; }
.htop .htop-inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.htop .htop-inline > span { color: var(--ink-faint); }

/* Sticky bar */
.htop .htop-sticky { position: sticky; top: 0; z-index: 3; background: var(--surface, #111); padding: 6px 0; }

/* Big centred search */
.htop .htop-hero { text-align: center; padding: 10px 0; display: grid; justify-items: center; gap: 8px; }
.htop .htop-hero #s-q { width: min(640px, 100%); }

/* Coverage timeline */
.htop .htop-timeline { display: grid; gap: 4px; margin: 4px 0 8px; }
.htop .htop-band { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-faint); }
.htop .htop-band > div { position: relative; height: 8px; border-radius: 4px; background: var(--hairline); }
.htop .htop-band i { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: var(--accent); }
.htop .htop-years { display: flex; justify-content: space-between; margin-left: 118px; font-size: 11px; color: var(--ink-faint); }

/* Toolbar and one dense line: labels go, placeholders and the field shapes stay */
.htop .htop-toolbar, .htop .htop-dense { align-items: flex-end; gap: 8px; }
.htop .htop-dense label { font-size: 11px; }
.htop .htop-dense .htop-contents > div, .htop .htop-toolbar .htop-contents > div { flex: 0 1 140px; }

/* Big centred search: the quick dates sit right under the box (Jay 11-02); the examples are small. */
.htop-hero ~ .quick-ranges { justify-content: center; }
.htop-hero ~ .range-words { text-align: center; }
.htop-hero ~ .htop-examples { text-align: center; font-size: 11px; opacity: .75; }