/*
 * Warp Repeater。表そのものは Filament の .fi-fo-table-repeater のスタイルのまま使い、
 * 行の部分（Canvas と本物の DOM にした行）だけをここで整える。
 */

.fi-warp-repeater {
    position: relative;
}

/* 計測用の見えない表。レイアウトには影響させず、同じ幅（同じコンテナクエリ）で並べる */
.fi-warp-repeater > .fi-warp-measure {
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
}

/* 計測した列幅を当てる（見出しは本物の <th>） */
.fi-warp-repeater > table.fi-warp-fixed {
    table-layout: fixed;
}

.fi-warp-repeater > table.fi-warp-fixed > thead > tr > th {
    width: var(--fi-warp-width) !important;
}

/* 行の部分は 1 つのセルに Canvas を置く */
.fi-warp-repeater > table > tbody > tr.fi-warp-body-row {
    display: block;
    padding: 0;
}

.fi-warp-repeater > table > tbody > tr.fi-warp-body-row > td.fi-warp-body-cell {
    display: block;
    padding: 0;
}

@supports (container-type: inline-size) {
    @container (min-width: 36rem) {
        .fi-warp-repeater > table > tbody > tr.fi-warp-body-row {
            display: table-row;
        }

        .fi-warp-repeater > table > tbody > tr.fi-warp-body-row > td.fi-warp-body-cell {
            display: table-cell;
            padding: 0;
        }
    }
}

.fi-warp-stage {
    position: relative;
    width: 100%;
}

.fi-warp-canvas {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
}

.fi-warp-live-row {
    position: absolute;
    left: 0;
    right: 0;
}

.fi-warp-live-cell {
    position: absolute;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.fi-warp-live-cell > * {
    min-width: 0;
}

.fi-warp-live-cell.fi-hidden {
    display: none;
}

.fi-warp-repeater.fi-warp-dragging,
.fi-warp-repeater.fi-warp-dragging * {
    cursor: grabbing !important;
    user-select: none;
}

/* JS の部品（検索付きの Select・DatePicker）の見本を作る場所。見えない位置で Alpine に初期化させる */
.fi-warp-hydrate {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    visibility: hidden;
    pointer-events: none;
}

/*
 * 多段表示（1 件を複数段で出す台帳形式）。Filament 標準に同じ表は無いので線はここで引く。
 * 段の区切りはセルの上辺、列の区切りはセルの右辺に引く（行をまたぐセルは段の線で切られない）。
 */
.fi-warp-ml {
    --fi-warp-divider: var(--gray-200);
}

.dark .fi-warp-ml {
    --fi-warp-divider: color-mix(in oklab, var(--color-white, #fff) 5%, transparent);
}

/* 2 段目から下の見出しは表の角ではないので、Filament が段の先頭と末尾のセルに付ける角の丸みを外す */
.fi-warp-repeater > table.fi-warp-ml > thead > tr:not(.fi-warp-sizer) + tr > th {
    border-top: 1px solid var(--fi-warp-divider);
    border-start-start-radius: 0;
    border-start-end-radius: 0;
}

.fi-warp-repeater > table.fi-warp-ml > thead > tr > th {
    border-inline-end-width: 1px;
}

.fi-warp-repeater > table.fi-warp-ml > thead > tr > th.fi-warp-ml-last {
    border-inline-end-width: 0;
}

.fi-warp-ml > tbody > tr {
    border-width: 0 !important;
}

/* 線は表の形のときだけ。狭い画面（Filament の縦並び）では引かない */
@container (min-width: 36rem) {
    .fi-warp-ml > tbody > tr > td {
        border-top: 1px solid var(--fi-warp-divider);
    }

    .fi-warp-ml.fi-warp-ml-bordered > tbody > tr > td:not(.fi-warp-ml-last) {
        border-inline-end: 1px solid var(--fi-warp-divider);
    }
}

.fi-warp-repeater > table.fi-warp-ml.fi-warp-fixed > thead > tr > th {
    width: auto !important;
}

/*
 * warpStickyHeader(): 見出しは本物の <thead> なので、position: sticky で残す。止まる位置（パネルのトップバーの高さ）は
 * JS が --fi-warp-sticky-top に入れる。行の Canvas と本物の DOM にした行より手前に出す。
 */
.fi-warp-repeater.fi-warp-sticky > table > thead {
    position: sticky;
    top: var(--fi-warp-sticky-top, 0px);
    z-index: 3;
}

/* 見出しを固定するときは、表の上の道具（検索・エラーの移動）も見出しの上に残す。背景は JS が表の後ろの色を入れる */
.fi-warp-repeater.fi-warp-sticky > .fi-warp-toolbar {
    position: sticky;
    top: var(--fi-warp-pinned-top, 0px);
    z-index: 4;
    margin-block: -0.5rem;
    padding-block: 0.5rem;
    background: var(--fi-warp-toolbar-bg, transparent);
}

/* warpErrorNavigation(): 表の上の「n 行にエラー」と移動ボタン */
/* 中身が無い・すべて隠れているとき（エラーが無い、変更が無い）は場所を取らない */
.fi-warp-toolbar:empty,
.fi-warp-toolbar:not(:has(> :not([hidden]))) {
    display: none;
}

.fi-warp-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.fi-warp-errors {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.fi-warp-errors[hidden] {
    display: none;
}

.fi-warp-errors-summary {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--danger-600);
}

.dark .fi-warp-errors-summary {
    color: var(--danger-400);
}

.fi-warp-errors-icon > svg {
    width: 1.25rem;
    height: 1.25rem;
}

.fi-warp-errors-position {
    margin-inline-start: 0.25rem;
    font-size: 0.875rem;
    color: var(--gray-500);
    font-variant-numeric: tabular-nums;
}

.fi-warp-errors .fi-icon-btn > svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* 表の右端のエラーの位置の印。表が画面に入っている間はスクロールしても残る */
.fi-warp-error-rail {
    position: sticky;
    top: var(--fi-warp-pinned-top, 0px);
    float: right;
    width: 6px;
    height: min(100%, calc(100vh - var(--fi-warp-pinned-top, 0px)));
    margin-inline-end: 2px;
    z-index: 2;
    pointer-events: none;
}

.fi-warp-error-mark {
    position: absolute;
    left: 0;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-radius: 9999px;
    background: var(--danger-500);
    pointer-events: auto;
    cursor: pointer;
}

.fi-warp-error-mark.fi-active {
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger-500) 35%, transparent);
}

/* 移動した先の行を一瞬強調する */
.fi-warp-live-row.fi-warp-flash {
    animation: fi-warp-flash 1.6s ease-out;
}

@keyframes fi-warp-flash {
    0%,
    30% {
        box-shadow: inset 0 0 0 2px var(--danger-500);
    }

    100% {
        box-shadow: inset 0 0 0 2px transparent;
    }
}

/*
 * warpSummary(): 列の合計行。見出しと同じ地の色で、表の下に置く。狭い画面（Filament の縦並びの表示）では
 * 合計のある列だけを「列名 … 値」で並べる。
 */
.fi-warp-repeater > table > tfoot.fi-warp-summaries {
    display: block;
    padding: 1rem 1.5rem;
    background: var(--gray-50);
    border-end-start-radius: 0.75rem;
    border-end-end-radius: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--gray-950);
}

.dark .fi-warp-repeater > table > tfoot.fi-warp-summaries {
    background: color-mix(in oklab, var(--color-white, #fff) 5%, transparent);
    color: var(--color-white, #fff);
}

.fi-warp-summaries > tr {
    display: block;
}

.fi-warp-summaries > tr > td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding-block: 0.25rem;
}

.fi-warp-summaries > tr > td.fi-warp-summary-empty,
.fi-warp-summaries > tr > td:empty {
    display: none;
}

.fi-warp-summary-column {
    font-weight: 500;
    color: var(--gray-500);
}

.dark .fi-warp-summary-column {
    color: var(--gray-400);
}

.fi-warp-summary-items {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.125rem;
}

.fi-warp-summary {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.375rem;
}

.fi-warp-summary-label {
    font-size: 0.75rem;
    color: var(--gray-500);
}

.dark .fi-warp-summary-label {
    color: var(--gray-400);
}

.fi-warp-summary-value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

@supports (container-type: inline-size) {
    @container (min-width: 36rem) {
        .fi-warp-repeater > table > tfoot.fi-warp-summaries {
            display: table-footer-group;
            padding: 0;
            background: none;
        }

        .fi-warp-summaries > tr {
            display: table-row;
        }

        .fi-warp-summaries > tr > td,
        .fi-warp-summaries > tr > td.fi-warp-summary-empty,
        .fi-warp-summaries > tr > td:empty {
            display: table-cell;
            padding: 0.5rem 0.75rem;
            vertical-align: top;
            background: var(--gray-50);
            border-color: var(--gray-200);
        }

        .dark .fi-warp-summaries > tr > td {
            background: color-mix(in oklab, var(--color-white, #fff) 5%, transparent);
            border-color: color-mix(in oklab, var(--color-white, #fff) 5%, transparent);
        }

        .fi-warp-summaries > tr > td:not(:last-child) {
            border-inline-end-width: 1px;
        }

        .fi-warp-summaries > tr > td.fi-warp-ml-last {
            border-inline-end-width: 0;
        }

        .fi-warp-summaries > tr:not(.fi-warp-sizer) + tr > td {
            border-top: 1px solid var(--gray-200);
        }

        .dark .fi-warp-summaries > tr:not(.fi-warp-sizer) + tr > td {
            border-top-color: color-mix(in oklab, var(--color-white, #fff) 5%, transparent);
        }

        .fi-warp-summaries > tr > td.fi-warp-summary-start {
            border-end-start-radius: 0.75rem;
        }

        .fi-warp-summaries > tr > td.fi-warp-summary-end {
            border-end-end-radius: 0.75rem;
        }

        .fi-warp-summary-column {
            display: none;
        }

        .fi-warp-summary-items {
            align-items: stretch;
        }

        .fi-warp-summary {
            display: flex;
            justify-content: space-between;
        }

        .fi-align-end .fi-warp-summary,
        .fi-align-right .fi-warp-summary {
            justify-content: flex-end;
        }

        .fi-align-center .fi-warp-summary {
            justify-content: center;
        }
    }
}

/* warpSpreadsheet(): 選んだ範囲（Shift+クリック・Shift+↓↑）。行の上に重ね、操作は下へ通す */
.fi-warp-range {
    position: absolute;
    z-index: 2;
    box-sizing: border-box;
    border: 2px solid var(--primary-500);
    border-radius: 0.25rem;
    background: color-mix(in oklab, var(--primary-500) 10%, transparent);
    pointer-events: none;
}

/*
 * warpChangeMarks(): 保存してから変えたところ。Canvas の行には JS が同じ印を描く
 * （変えた欄の左上の三角、変えた行・足した行の左端の線）。
 */
.fi-warp-live-row.fi-warp-row-changed::before,
.fi-warp-live-row.fi-warp-row-added::before {
    content: '';
    position: absolute;
    inset-block: 0;
    left: 0;
    width: 3px;
    z-index: 1;
    background: var(--warning-500);
    pointer-events: none;
}

.fi-warp-live-row.fi-warp-row-added::before {
    background: var(--success-500);
}

.fi-warp-live-cell.fi-warp-cell-changed::after {
    content: '';
    position: absolute;
    left: 1px;
    top: 1px;
    border-style: solid;
    border-width: 8px 8px 0 0;
    border-color: var(--warning-500) transparent transparent transparent;
    pointer-events: none;
}

.fi-warp-errors {
    order: 1;
}

.fi-warp-changes {
    order: 2;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1rem;
    font-size: 0.875rem;
    color: var(--gray-600);
}

.dark .fi-warp-changes {
    color: var(--gray-300);
}

.fi-warp-changes[hidden] {
    display: none;
}

.fi-warp-changes-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

button.fi-warp-changes-item:hover {
    text-decoration: underline;
}

.fi-warp-changes-item::before {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: var(--warning-500);
}

.fi-warp-changes-added::before {
    background: var(--success-500);
}

.fi-warp-changes-removed::before {
    background: var(--gray-400);
}

/* warpSearch(): 表の上の検索欄と、一致した欄の色（Canvas の行には JS が同じ色を塗る） */
.fi-warp-search {
    order: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.fi-warp-search-field {
    width: 16rem;
    max-width: 100%;
}

.fi-warp-search-icon {
    display: flex;
    color: var(--gray-400);
}

.fi-warp-search-icon > svg {
    width: 1.25rem;
    height: 1.25rem;
}

.fi-warp-search-position {
    min-width: 4rem;
    margin-inline-start: 0.25rem;
    font-size: 0.875rem;
    color: var(--gray-500);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.fi-warp-search-empty .fi-warp-search-position {
    color: var(--danger-600);
}

.fi-warp-search .fi-icon-btn > svg {
    width: 1.25rem;
    height: 1.25rem;
}

.fi-warp-live-cell.fi-warp-cell-match::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: color-mix(in oklab, var(--warning-400) 18%, transparent);
    pointer-events: none;
}

.fi-warp-live-cell.fi-warp-cell-match-current::before {
    background: color-mix(in oklab, var(--warning-400) 35%, transparent);
    box-shadow: inset 0 0 0 2px var(--warning-500);
}

/* warpRowNumbers(): 行番号の列。Canvas の行には JS が番号を右にそろえて描く */
.fi-warp-repeater table > thead > tr > th.fi-warp-row-number-header {
    width: 1px;
    text-align: end;
    color: var(--gray-500);
    font-weight: 500;
}

.dark .fi-warp-repeater table > thead > tr > th.fi-warp-row-number-header {
    color: var(--gray-400);
}

.fi-warp-row-number {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--gray-400);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dark .fi-warp-row-number {
    color: var(--gray-500);
}

.fi-warp-row-number > span {
    display: block;
    text-align: start;
    font-weight: 600;
    color: var(--gray-950);
}

.dark .fi-warp-row-number > span {
    color: var(--color-white, #fff);
}

/* 狭い画面（縦並び）では「#12」と太字で各件の先頭に。Canvas には JS が同じ形で描く */
.fi-warp-live-cell .fi-warp-row-number > span::before {
    content: '#';
}

@container (min-width: 36rem) {
    .fi-warp-row-number > span {
        text-align: end;
        font-weight: inherit;
        color: inherit;
    }

    .fi-warp-live-cell .fi-warp-row-number > span::before {
        content: none;
    }
}

/*
 * warpHeight(): 行の部分だけが決まった高さでスクロールする。見出し・合計行・追加ボタンは動かない。
 * 高さを持つ要素（.fi-warp-spacer）でスクロールの長さを作る。
 */
.fi-warp-stage.fi-warp-scroll {
    max-height: var(--fi-warp-height);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.fi-warp-spacer {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    pointer-events: none;
    visibility: hidden;
}

.fi-warp-stage.fi-warp-scroll > .fi-warp-error-rail {
    top: 0;
    height: min(100%, var(--fi-warp-height));
}

/*
 * warpTableWidth(): 表の形のときは、見出し・行・合計行をそれぞれ同じ幅の表にして、表ごと横にスクロールする
 * （列幅は計測した値を見出しと合計行のセルに当てる）。狭い画面の縦並びでは何もしない。
 * warpFrozenColumns(): 先頭の列は見出しと合計行を sticky で、行は JS がスクロールの分だけずらして描く。
 */
@container (min-width: 36rem) {
    .fi-warp-repeater > table.fi-warp-wide {
        display: block;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
    }

    .fi-warp-repeater > table.fi-warp-wide > thead,
    .fi-warp-repeater > table.fi-warp-wide > tbody,
    .fi-warp-repeater > table.fi-warp-wide > tfoot {
        display: table;
        width: max(100%, var(--fi-warp-table-width));
        table-layout: fixed;
    }

    .fi-warp-repeater > .fi-warp-measure > table.fi-warp-wide {
        width: max(100%, var(--fi-warp-table-width));
    }

    .fi-warp-repeater > table.fi-warp-wide > thead > tr.fi-warp-sizer,
    .fi-warp-repeater > table.fi-warp-wide > tfoot > tr.fi-warp-sizer {
        display: table-row;
    }

    /*
     * 多段の見出しの段の線は、境目を共有する線（border-collapse: collapse）だと固定した見出しの上に描かれ、
     * 横にスクロールした列の線が透けて見える。線をセルごとに持たせ、固定したセルが下の列を隠すようにする（freezeEdges()）
     */
    .fi-warp-repeater > table.fi-warp-ml.fi-warp-wide > thead,
    .fi-warp-repeater > table.fi-warp-ml.fi-warp-wide > tfoot {
        border-collapse: separate;
        border-spacing: 0;
    }

    /* 線の下にセルの地を敷かない（collapse のときと同じく、半透明の線を表の地に重ねて同じ色にする） */
    .fi-warp-repeater > table.fi-warp-ml.fi-warp-wide > thead > tr > th,
    .fi-warp-repeater > table.fi-warp-ml.fi-warp-wide > tfoot > tr > td {
        background-clip: padding-box;
    }
}

/* 多段表示の横スクロールで列幅を決める高さ 0 の行（addSizers()）。表の形のときだけ表に並べる */
.fi-warp-repeater > table > thead > tr.fi-warp-sizer,
.fi-warp-repeater > table > tfoot > tr.fi-warp-sizer {
    display: none;
}

.fi-warp-repeater > table > thead > tr.fi-warp-sizer > td,
.fi-warp-repeater > table > tfoot > tr.fi-warp-sizer > td {
    height: 0;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    font-size: 0;
    line-height: 0;
}

.fi-warp-frozen {
    position: sticky;
    z-index: 2;
}

.fi-warp-live-cell.fi-warp-frozen {
    position: absolute;
    z-index: 1;
}

/*
 * ずらした固定のセルは重なりの単位になるので、中で開いたドロップダウンや日付のパネルは、後ろに並ぶ固定のセル（同じ件の下の段、
 * 次の件）の下に隠れてしまう。フォーカスのあるセル（開いているパネルを含む）は、ほかの固定のセルより手前に出す
 */
.fi-warp-live-cell.fi-warp-frozen:focus-within {
    z-index: 2;
}

/* 横にスクロールする表では、見出しの固定は JS が translateY でずらす（sticky は表に対して効いてしまう） */
@container (min-width: 36rem) {
    .fi-warp-repeater.fi-warp-sticky > table.fi-warp-wide > thead {
        position: relative;
        top: auto;
        z-index: 3;
    }
}

/*
 * warpSorting() / warpFilters(): 見出しのボタン（Filament の表の並べ替えと同じ形: 見出しの文字とアイコン 1 つ）。
 * アイコンは状態で入れ替える: 何もなし ↓（薄い色）、昇順 ↑、降順 ↓、絞り込み中は漏斗（並べ替えより優先）
 */
.fi-warp-header-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 100%;
    vertical-align: middle;
    font: inherit;
    color: inherit;
    text-align: inherit;
    cursor: pointer;
}

.fi-warp-header-icons {
    display: inline-flex;
    flex-shrink: 0;
}

.fi-warp-header-icon {
    color: var(--gray-400);
}

.dark .fi-warp-header-icon {
    color: var(--gray-500);
}

.fi-warp-header-btn:hover .fi-warp-header-icon {
    color: var(--gray-500);
}

.dark .fi-warp-header-btn:hover .fi-warp-header-icon {
    color: var(--gray-400);
}

.fi-warp-header-icon-up,
.fi-warp-header-icon-filter,
.fi-warp-header-btn.fi-warp-sorted-asc .fi-warp-header-icon-down,
.fi-warp-header-btn.fi-warp-filtered .fi-warp-header-icon-down,
.fi-warp-header-btn.fi-warp-filtered .fi-warp-header-icon-up {
    display: none;
}

.fi-warp-header-btn.fi-warp-sorted-asc:not(.fi-warp-filtered) .fi-warp-header-icon-up,
.fi-warp-header-btn.fi-warp-filtered .fi-warp-header-icon-filter {
    display: inline-block;
}

.fi-warp-header-btn.fi-warp-sorted .fi-warp-header-icon {
    color: var(--gray-950);
}

.dark .fi-warp-header-btn.fi-warp-sorted .fi-warp-header-icon {
    color: var(--color-white);
}

.fi-warp-header-btn.fi-warp-filtered .fi-warp-header-icon,
.fi-warp-header-btn[aria-expanded='true'] .fi-warp-header-icon {
    color: var(--primary-600);
}

.dark .fi-warp-header-btn.fi-warp-filtered .fi-warp-header-icon,
.dark .fi-warp-header-btn[aria-expanded='true'] .fi-warp-header-icon {
    color: var(--primary-400);
}

.fi-warp-header-btn:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

/* 並べ替え・絞り込みの最中は、本物の DOM にした行の並べ替えのつまみと上下ボタンを使えなくする（canvas の行は fi-warp-reorder-off で撮った見た目で描く） */
.fi-warp-view-active .fi-warp-live-row [data-warp-drag],
.fi-warp-view-active .fi-warp-live-row [data-warp-move],
.fi-warp-reorder-off [data-warp-drag],
.fi-warp-reorder-off [data-warp-move] {
    opacity: 0.4;
    pointer-events: none;
}

/* 表の上の「100 行中 10 行を表示」と元に戻すボタン */
.fi-warp-view-status {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--gray-600);
}

.dark .fi-warp-view-status {
    color: var(--gray-400);
}

.fi-warp-link {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-semibold);
    color: var(--primary-600);
    cursor: pointer;
}

.fi-warp-link:hover,
.fi-warp-link:focus-visible {
    text-decoration: underline;
}

.dark .fi-warp-link {
    color: var(--primary-400);
}

/* 絞り込みのパネル。置き場は Repeater の左上で、JS がボタンの下に置く */
.fi-warp-popover-host {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    z-index: 30;
}

.fi-warp-filter-panel {
    position: absolute;
    display: grid;
    gap: 0.25rem;
    width: 16rem;
    max-width: calc(100vw - 2rem);
    padding: 0.5rem;
    border-radius: var(--radius-lg);
    background: var(--color-white);
    box-shadow:
        0 10px 15px -3px rgb(0 0 0 / 0.1),
        0 4px 6px -4px rgb(0 0 0 / 0.1),
        0 0 0 1px color-mix(in oklab, var(--gray-950) 5%, transparent);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--gray-950);
}

.dark .fi-warp-filter-panel {
    background: var(--gray-900);
    color: var(--color-white);
    box-shadow:
        0 10px 15px -3px rgb(0 0 0 / 0.3),
        0 0 0 1px color-mix(in oklab, var(--color-white) 10%, transparent);
}

.fi-warp-filter-search {
    margin-bottom: 0.25rem;
}

.fi-warp-filter-sort {
    display: grid;
    padding-bottom: 0.25rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--gray-200);
}

.dark .fi-warp-filter-sort {
    border-bottom-color: color-mix(in oklab, var(--color-white) 10%, transparent);
}

.fi-warp-filter-sort > button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    border-radius: var(--radius-md);
    text-align: start;
    cursor: pointer;
}

.fi-warp-filter-sort > button:hover {
    background: var(--gray-50);
}

.dark .fi-warp-filter-sort > button:hover {
    background: color-mix(in oklab, var(--color-white) 5%, transparent);
}

.fi-warp-filter-sort > button[aria-pressed='true'] {
    font-weight: var(--font-weight-semibold);
    color: var(--primary-600);
}

.dark .fi-warp-filter-sort > button[aria-pressed='true'] {
    color: var(--primary-400);
}

.fi-warp-filter-sort .fi-icon {
    color: var(--gray-400);
}

.fi-warp-filter-options {
    display: grid;
    max-height: 15rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.fi-warp-filter-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-md);
    cursor: pointer;
}

.fi-warp-filter-option > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.fi-warp-filter-option:hover {
    background: var(--gray-50);
}

.dark .fi-warp-filter-option:hover {
    background: color-mix(in oklab, var(--color-white) 5%, transparent);
}

.fi-warp-filter-all {
    font-weight: var(--font-weight-medium);
}

.fi-warp-filter-contains {
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-md);
    text-align: start;
    color: var(--primary-600);
    cursor: pointer;
}

.fi-warp-filter-contains:hover,
.fi-warp-filter-contains-active {
    background: color-mix(in oklab, var(--primary-500) 10%, transparent);
}

.dark .fi-warp-filter-contains {
    color: var(--primary-400);
}

.fi-warp-filter-more {
    padding: 0.25rem 0.5rem;
    font-size: var(--text-xs);
    color: var(--gray-500);
}

.fi-warp-filter-footer {
    display: flex;
    justify-content: flex-end;
    padding: 0.25rem 0.25rem 0;
    border-top: 1px solid var(--gray-200);
}

.dark .fi-warp-filter-footer {
    border-top-color: color-mix(in oklab, var(--color-white) 10%, transparent);
}