:root{--filters-pane-default-width: 320px;--filters-pane-edge-inset: 20px}.od4-filters-pane{position:absolute;inset-block-start:var(--spacing-120);inset-block-end:var(--spacing-200);inset-inline-end:var(--filters-pane-edge-inset);width:0;min-width:0;overflow:hidden;background:var(--surface-background);-webkit-backdrop-filter:var(--effect-surface-background-blur);backdrop-filter:var(--effect-surface-background-blur);border:none;border-radius:var(--radius-3xlarge);box-shadow:inset 0 0 0 1px var(--surface-stroke-1),var(--shadow-8);transition:width var(--anim-medium) ease,min-width var(--anim-medium) ease;display:flex;flex-direction:column;z-index:70}.od4-filters-pane.open{width:var(--filters-pane-default-width);min-width:var(--filters-pane-default-width)}.od4-filters-pane[data-silent-focus] *:focus-visible{outline:none}@media (forced-colors: active){.filter-group-divider{border-top-color:CanvasText}}.od4-filters-inner{position:absolute;inset-block:0;inset-inline-start:0;width:var(--filters-pane-default-width);height:100%;overflow:hidden;display:flex;flex-direction:column}.od4-filters-header{display:flex;align-items:center;justify-content:space-between;padding-block:var(--spacing-80);padding-inline-start:var(--spacing-160);padding-inline-end:var(--spacing-40);flex-shrink:0}.od4-filters-header-actions{display:flex;align-items:center;gap:var(--spacing-80)}.od4-filters-title{font-size:var(--font-size-subtitle-2);line-height:var(--line-height-subtitle-2);font-weight:var(--font-weight-subtitle-2);color:var(--fg-neutral-1-rest)}.od4-filters-close{flex-shrink:0}.od4-filters-body{flex:1;overflow-y:auto;padding:0 var(--spacing-80) var(--spacing-240);display:flex;flex-direction:column;gap:var(--spacing-160)}.filter-group{display:flex;flex-direction:column;gap:var(--spacing-40)}.filter-group[hidden]{display:none}.filter-group-divider{margin-top:0;margin-inline:var(--spacing-80);padding-top:var(--spacing-80);border-top:1px solid var(--surface-stroke-1)}.filters-clear-all{background:none;border:none;border-radius:var(--radius-medium);color:var(--fg-neutral-3-rest);font-size:var(--font-size-caption-1);cursor:pointer;white-space:nowrap;padding:var(--spacing-40) var(--spacing-80)}.filters-clear-all:hover{color:var(--fg-neutral-1-hover);background:var(--button-background-2-hover)}.filters-clear-all:focus{outline:none}.filters-clear-all:focus-visible{outline:2px solid var(--stroke-focus-2);outline-offset:2px}.filter-section-label{font-size:var(--font-size-caption-1-strong);line-height:var(--line-height-caption-1-strong);font-weight:var(--font-weight-caption-1-strong);color:var(--fg-neutral-3-rest);margin:0;padding:var(--spacing-40) var(--size-60);letter-spacing:0;text-transform:none}.filter-pill-row{display:flex;flex-wrap:wrap;gap:var(--spacing-80);padding-inline:var(--size-60)}.filter-pill-row [hidden]{display:none!important}.od4-filters-pane .filter-pill{background:transparent;box-shadow:inset 0 0 0 1px var(--surface-stroke-2);color:var(--fg-neutral-2-rest);font-weight:var(--font-weight-body-1);padding-inline:var(--spacing-160)}.od4-filters-pane .filter-pill.filter-pill-icon-only{padding-inline:var(--spacing-80)}.od4-filters-pane .filter-pill:hover:not(.active){background:var(--bg-subtle-inverted-hover);box-shadow:inset 0 0 0 1px var(--surface-stroke-2);color:var(--fg-neutral-2-hover)}.od4-filters-pane .filter-pill:active:not(.active){background:var(--bg-subtle-inverted-pressed);box-shadow:inset 0 0 0 1px var(--surface-stroke-2)}.od4-filters-pane .filter-pill[disabled],.od4-filters-pane .filter-pill:disabled{background:transparent;box-shadow:inset 0 0 0 1px var(--surface-stroke-2)}.od4-filters-pane .filter-pill.active{background:var(--bg-neutral-7);box-shadow:inset 0 0 0 1px var(--stroke-brand-1-rest);color:var(--fg-neutral-1-rest);font-weight:var(--font-weight-body-1);text-shadow:0 0 .4px currentColor,0 0 .4px currentColor}.od4-filters-pane .filter-pill.active:hover{background:var(--bg-neutral-overlay);box-shadow:inset 0 0 0 1px var(--stroke-brand-1-rest);color:var(--fg-neutral-1-hover)}.od4-filters-pane .filter-pill.active:active{background:var(--bg-subtle-inverted-pressed);box-shadow:inset 0 0 0 1px var(--stroke-brand-1-rest);color:var(--fg-neutral-1-rest)}.od4-filters-pane .filter-pill.active .filter-pill-icon{color:var(--fg-brand-1-rest)}@media (forced-colors: active){.od4-filters-pane .filter-pill{border:1px solid ButtonText;background:ButtonFace;color:ButtonText;forced-color-adjust:none}.od4-filters-pane .filter-pill.active{border-color:Highlight;background:Highlight;color:HighlightText}.od4-filters-pane .filter-pill:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.date-range-section .filter-pill-row{margin-bottom:var(--spacing-80)}.date-range-row{display:flex;align-items:center;gap:var(--spacing-80);margin-bottom:var(--spacing-80)}.date-range-row label{font-size:var(--font-size-caption-1);color:var(--fg-neutral-3-rest);width:36px;flex-shrink:0}.date-range-row input[type=date]{flex:1;background:var(--bg-neutral-1-rest);border:1px solid var(--stroke-neutral-1-rest);border-radius:var(--radius-medium);color:var(--fg-neutral-1-rest);font-size:var(--font-size-caption-1);font-family:inherit;padding:var(--spacing-40) var(--spacing-80);outline:none}.date-range-row input[type=date]:focus{border-color:var(--fg-brand-1-rest)}.date-range-row input[type=date]::-webkit-calendar-picker-indicator{filter:invert(.7);cursor:pointer}.date-range-clear{background:none;border:none;color:var(--fg-neutral-3-rest);font-size:var(--font-size-caption-1);cursor:pointer;padding:var(--spacing-20) 0}.date-range-clear:hover{color:var(--fg-neutral-1-hover)}.filter-checkbox{display:inline-flex;align-items:center;gap:var(--spacing-80);cursor:pointer;user-select:none;padding-block:var(--spacing-40);color:var(--fg-neutral-1-rest);font-size:var(--font-size-caption-1);line-height:var(--line-height-caption-1)}.od4-filters-body .filter-checkbox{margin-inline:var(--spacing-80)}.filter-checkbox input[type=checkbox]{position:absolute;opacity:0;pointer-events:none;width:0;height:0}.filter-checkbox-label{display:inline}.filter-checkbox-box{display:inline-flex;align-items:center;justify-content:center;width:var(--size-200);height:var(--size-200);border:1px solid var(--stroke-neutral-2-rest);border-radius:var(--radius-small);background:var(--bg-neutral-1-rest);color:var(--fg-neutral-on-brand);transition:background var(--anim-hover),border-color var(--anim-hover);flex-shrink:0}.filter-checkbox-box svg{width:var(--icon-size-sm);height:var(--icon-size-sm);opacity:0}.filter-checkbox:hover .filter-checkbox-box{border-color:var(--stroke-neutral-2-rest);background:var(--button-background-2-hover)}.filter-checkbox input.active+.filter-checkbox-box,.filter-checkbox input:checked+.filter-checkbox-box{background:var(--bg-brand-rest);border-color:var(--bg-brand-rest)}.filter-checkbox input.active+.filter-checkbox-box svg,.filter-checkbox input:checked+.filter-checkbox-box svg{opacity:1}.filter-checkbox input:focus-visible+.filter-checkbox-box{outline:2px solid var(--stroke-focus-2);outline-offset:2px}.folder-filter-section{margin-top:var(--spacing-200)}.folder-tree{height:200px;overflow-y:auto;background:var(--bg-neutral-3-rest);border:1px solid var(--stroke-neutral-1-rest);border-radius:var(--radius-medium);padding:var(--spacing-40) 0}@media (min-width: 1200px){.od4-filters-pane{inset-inline-end:calc(var(--filters-pane-edge-inset) + 70px)}}#gallery-wrapper:has(.od4-filters-pane.open) #gallery-controls-bar{padding-inline-end:calc(var(--filters-pane-default-width) + 20px + 20px)}@media (min-width: 1200px){#gallery-wrapper:has(.od4-filters-pane.open) #gallery-controls-bar{padding-inline-end:calc(var(--filters-pane-default-width) + 90px + 20px)}}
