/* A temporary task lives above the page; photographs retain the main canvas. */
.archive-filter-button {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px;
  padding: 0 2px; border: 0; border-radius: 0; background: transparent;
  color: var(--folio-ink); font: 12px/1.4 var(--sans); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.archive-filter-button[hidden], .archive-filter-count[hidden] { display: none; }
.archive-filter-button > svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.35; }
.archive-filter-count { min-width: 20px; height: 20px; padding-inline: 4px; display: inline-grid; place-items: center; border-radius: 5px; background: #ecefe7; color: #353831; font-size: 11px; }
.archive-filter-button:active { opacity: .55; }
.archive-filter-sheet {
  position: fixed; inset: auto 0 0; width: 100%; max-width: 560px;
  max-height: calc(100dvh - 24px); box-sizing: border-box; margin: auto auto 0;
  padding: 24px 24px max(24px, env(safe-area-inset-bottom)); overflow: auto;
  border: 1px solid #ccd2c5; border-bottom: 0; border-radius: 20px 20px 0 0;
  background: #f7f5f0; color: var(--folio-ink); color-scheme: light;
  box-shadow: 0 -12px 50px #59684b12; overscroll-behavior: contain;
}
.archive-filter-sheet::backdrop { background: #ecefe7a6; backdrop-filter: none; }
.archive-filter-sheet[open] { animation: filter-sheet-arrive .24s cubic-bezier(.2, .7, .2, 1) both; }
.archive-filter-sheet-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.archive-filter-sheet h2 { margin: 0; font: 500 21px/1.5 var(--sans); letter-spacing: -.02em; }
.archive-filter-close {
  display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px;
  margin-right: -10px; border: 0; border-radius: 8px; background: transparent;
  color: #686f63; cursor: pointer;
}
.archive-filter-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.archive-filter-close:active { background: #ecefe7; }
.archive-filter-summary { margin: 0 0 26px; min-height: 1.6em; color: #686f63; font: 12px/1.6 var(--sans); }
.archive-filter-sheet .archive-filters { display: grid; grid-template-columns: 1fr; gap: 0; width: 100%; }
.archive-filter-sheet .archive-filters label {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center;
  gap: 18px; min-width: 0; width: 100%; border-top: 1px solid #ccd2c5;
  color: #686f63; font: 13px/1.5 var(--sans);
}
.archive-filter-sheet .archive-filters label > .visually-hidden {
  position: static !important; width: auto; height: auto; margin: 0; padding: 0;
  overflow: visible; clip: auto; clip-path: none; white-space: normal;
}
.archive-filter-sheet :is(#filterYear, #filterPlace, #filterTag) {
  display: block; width: 100%; max-width: 100%; min-width: 0; min-height: 60px;
  padding: 12px 24px 12px 0; border: 0; border-radius: 0; background-color: transparent;
  color: var(--folio-ink); font: 16px/1.5 var(--sans); text-overflow: ellipsis;
}
.archive-filter-sheet-actions { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 24px; margin-top: 28px; }
.archive-filter-clear { min-height: 48px; padding: 0; border: 0; background: transparent; color: #657768; font: 13px/1.4 var(--sans); cursor: pointer; }
.archive-filter-clear:disabled { color: #8e9786; cursor: default; }
.archive-filter-done { min-height: 48px; padding: 12px 20px; border: 0; border-radius: 10px; background: #e1e8da; color: #353831; font: 500 14px/1.4 var(--sans); cursor: pointer; }
.archive-filter-done:active { background: #d5dfcc; transform: scale(.985); }
.archive-filter-sheet :is(button, select):focus-visible { outline: 2px solid var(--folio-rust); outline-offset: 3px; }
@keyframes filter-sheet-arrive { from { opacity: .6; transform: translateY(32px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 760px) {
  .archive-toolbar.archive-filter-enhanced > .archive-filters { display: none; }
  .archive-filter-enhanced #galleryViewToggle { margin-left: auto; }
  .archive-filter-enhanced .archive-search { flex-basis: 100%; }
}
@media (max-width: 350px) {
  .archive-filter-sheet { padding-inline: 20px; }
  .archive-filter-sheet-actions { gap: 20px; }
  .archive-filter-summary { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .archive-filter-sheet[open] { animation: none; } .archive-filter-done:active { transform: none; } }