/* フィルタ窓(条件ビルダー・3a レイアウト)。.ak-shell の基本レイアウト(flex column, height:100%)は
   app.css を継承する(filter.html が両方を読み込む)。ここは flt-* 専用のスタイルのみ。 */

.flt-shell {
    font-size: 13px;
}

.flt-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
    background: var(--panel2);
}

.flt-title {
    font: 700 14.5px var(--font-display);
    color: var(--text3);
}

.flt-preset { position: relative; margin-left: auto; }

.flt-preset-btn {
    height: 30px;
    padding: 0 12px;
    color: var(--text2);
    font: 500 12px var(--font-sans);
    background: var(--btn-bg);
    border: 1px solid var(--btn-line);
    border-radius: var(--bevel-control);
    corner-shape: bevel;
    cursor: pointer;
}

.flt-preset-btn:hover {
    background: var(--btn-hover-bg);
    border-color: var(--btn-hover-line);
}

.flt-preset-backdrop { position: fixed; inset: 0; z-index: 40; }

.flt-preset-pop {
    position: absolute;
    top: 36px;
    right: 0;
    z-index: 50;
    width: 280px;
    max-height: 320px;
    overflow: auto;
    background: var(--panel);
    border: 1px solid var(--line2);
    border-radius: var(--bevel-frame);
    corner-shape: bevel;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .4);
    padding: 6px;
}

.flt-preset-section {
    padding: 8px 8px 4px;
    font: 600 10px var(--font-sans);
    letter-spacing: .07em;
    color: var(--dim);
}

.flt-preset-empty { padding: 10px 8px; font-size: 11.5px; color: var(--dim); }

.flt-preset-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--bevel-control);
    corner-shape: bevel;
}

.flt-preset-row:hover,
.flt-preset-row:has(:focus) { background: var(--accent-soft); }

.flt-preset-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text2);
    background: transparent;
    border: 0;
    padding: 0;
    font-family: var(--font-sans);
    font-size: 12.5px;
    text-align: left;
    cursor: pointer;
}

.flt-preset-name:focus,
.flt-trash-btn:focus {
    outline: 2px solid var(--focus-ring);
    outline-offset: -1px;
}

.flt-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--mute2);
    background: var(--btn-bg);
    border: 1px solid var(--btn-line);
    border-radius: var(--bevel-control);
    corner-shape: bevel;
    cursor: pointer;
    font-size: 11px;
    flex: none;
}

/* 枠は --danger-line ではなく --danger。--danger-line は danger-soft 面向けの淡色で、
   --btn-hover-bg の上では 1.03:1 になり境界が消える(要件 3:1)。 */
.flt-icon-btn:hover { color: var(--danger); background: var(--btn-hover-bg); border-color: var(--danger); }

.flt-close { margin-left: 4px; }

/* プリセット/履歴行の削除(ゴミ箱)。ウィンドウ close(✕)と紛れないよう枠なしのアイコンボタンにし、
   hover で danger 色に。 */
.flt-trash-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--mute2);
    background: transparent;
    border: none;
    border-radius: var(--bevel-control);
    corner-shape: bevel;
    cursor: pointer;
    flex: none;
}

.flt-trash-btn:hover { color: var(--danger); background: var(--danger-soft, rgba(0,0,0,.06)); }

.flt-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}

.flt-builder {
    width: 46%;
    min-width: 380px;
    flex: none;
    overflow: auto;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-right: 1px solid var(--line);
    background: var(--panel2);
}

.flt-step-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 600 12px var(--font-sans);
    color: var(--text2);
}

.flt-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-ink);
    font: 700 10px var(--font-mono);
    flex: none;
}

.flt-cat-tabs { display: flex; flex-wrap: wrap; gap: 7px; }

.flt-cat-tab {
    height: 30px;
    padding: 0 12px;
    color: var(--mute);
    font: 500 12px var(--font-sans);
    background: var(--chip);
    border: 1px solid var(--btn-line);
    border-radius: var(--bevel-control);
    corner-shape: bevel;
    cursor: pointer;
}

/* 選択済みは accent-soft を保つため除外する。 */
.flt-cat-tab:not(.is-active):hover {
    background: var(--btn-hover-bg);
    border-color: var(--btn-hover-line);
}

.flt-cat-tab.is-active {
    color: var(--text3);
    background: var(--accent-soft);
    border-color: var(--btn-accent-line);
}

.flt-chip-row { display: flex; flex-wrap: wrap; gap: 7px; }

.flt-chip {
    height: 30px;
    padding: 0 12px;
    color: var(--mute);
    font: 500 12px var(--font-sans);
    background: var(--chip);
    border: 1px solid var(--btn-line);
    border-radius: var(--bevel-control);
    corner-shape: bevel;
    cursor: pointer;
}

.flt-chip:not(.is-selected):hover {
    background: var(--btn-hover-bg);
    border-color: var(--btn-hover-line);
}

.flt-chip.is-selected {
    color: var(--text3);
    background: var(--accent-soft);
    border-color: var(--btn-accent-line);
}

.flt-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 12px;
    background: var(--card);
    border: 1px dashed var(--line2);
    border-radius: var(--bevel-container);
    corner-shape: bevel;
    color: var(--dim);
    font-size: 11.5px;
}

.flt-subclass {
    padding-top: 12px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.flt-subclass-title {
    font: 600 11px var(--font-sans);
    color: var(--mute2);
}

.flt-subclass-note { margin-left: 6px; color: var(--dim); font-weight: 400; }

.flt-subclass-group { display: flex; flex-direction: column; gap: 7px; }

.flt-subclass-group-label { font: 600 11px var(--font-sans); color: var(--mute); }

.flt-list {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--card-line);
    border-radius: var(--bevel-container);
    corner-shape: bevel;
    overflow: hidden;
}

.flt-list-search {
    height: 34px;
    padding: 0 11px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    color: var(--text);
    font-size: 12px;
}

.flt-list-search:focus { outline: none; }

.flt-list-items { max-height: 280px; overflow: auto; padding: 5px; }

/* 副陣営 CB による自動選択(固定扱い・クリックしても外れない)。選択色は保ったまま不透明度を落とし
   既定カーソルにして「押せない」ことを伝える(設計 §9-A 既定案・#364)。 */
.flt-list-row.is-auto {
    opacity: 0.6;
    cursor: default;
}

.flt-opt {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 2px;
    color: var(--mute);
    font-size: 12px;
}

/* 値ペインの単一スロットに「オプション行 + リスト」の2段を収めるための包み。
   スロット直下に2要素を並べると親の縦積みに混ざるため、1要素に畳む。 */
.flt-facet-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
}

.flt-opt-row { display: flex; flex-wrap: wrap; gap: 14px; }

.flt-date-row, .flt-num-row { display: flex; flex-wrap: wrap; gap: 14px; }

.flt-date-field, .flt-num-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.flt-date-label, .flt-num-label {
    font: 600 11px var(--font-sans);
    color: var(--mute2);
}

.flt-date-input {
    height: 34px;
    padding: 0 10px;
    background: var(--card);
    border: 1px solid var(--card-line);
    border-radius: var(--bevel-control);
    corner-shape: bevel;
    color: var(--text3);
    font: 500 12px var(--font-sans);
}

.flt-date-input:focus { outline: none; border-color: var(--accent); }

.flt-add-btn {
    margin-top: auto;
    height: 40px;
    border-radius: var(--bevel-control);
    corner-shape: bevel;
    font: 600 13px var(--font-sans);
    color: var(--dim);
    background: var(--btn-bg);
    border: 1px solid var(--btn-line);
    cursor: pointer;
}

.flt-add-btn:not(:disabled) {
    color: var(--accent-ink);
    background: var(--accent);
    border-color: var(--btn-accent-line);
}

.flt-add-btn:not(:disabled):hover {
    background: var(--btn-accent-hover-bg);
}

.flt-add-btn:disabled { cursor: not-allowed; }

.flt-conditions {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.flt-conditions-header {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 15px 20px;
    border-bottom: 1px solid var(--line);
    font: 600 12.5px var(--font-sans);
    color: var(--text2);
}

.flt-conditions-count {
    font: 600 10px var(--font-mono);
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid var(--accent-soft-line);
    border-radius: 20px;
    padding: 2px 8px;
}

.flt-link-btn {
    margin-left: auto;
    font: 500 11px var(--font-sans);
    color: var(--dim);
    background: transparent;
    border: 0;
    cursor: pointer;
}

.flt-link-btn:hover { color: var(--accent); }

.flt-conditions-body {
    flex: 1 1 auto;
    overflow: auto;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.flt-conditions-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px;
    color: var(--dim);
    font-size: 12.5px;
    line-height: 1.6;
}

.flt-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 14px;
    background: var(--card);
    border: 1px solid var(--card-line);
    border-radius: var(--bevel-container);
    corner-shape: bevel;
}

/* 一時条件(未確定)を含むカード。左の accent バーは選択行(.flt-list-row.is-selected)と同じ識別子。 */
.flt-card.is-pending {
    border-color: var(--btn-accent-line);
    box-shadow: inset 3px 0 0 var(--accent);
}

.flt-card-title {
    flex: none;
    width: 72px;
    font: 600 11.5px var(--font-sans);
    color: var(--mute2);
    padding-top: 3px;
}

.flt-card-chips { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; }

.flt-card-chip {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 10px;
    border-radius: var(--bevel-control);
    corner-shape: bevel;
    background: var(--chip);
    border: 1px solid var(--line2);
    font: 500 11.5px var(--font-sans);
    color: var(--text2);
}

.flt-footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border-top: 1px solid var(--line);
    background: var(--panel2);
}

.flt-btn {
    height: 34px;
    padding: 0 14px;
    color: var(--mute);
    font: 500 12.5px var(--font-sans);
    background: var(--btn-bg);
    border: 1px solid var(--btn-line);
    border-radius: var(--bevel-control);
    corner-shape: bevel;
    cursor: pointer;
}

.flt-btn:hover {
    background: var(--btn-hover-bg);
    border-color: var(--btn-hover-line);
}

.flt-btn-accent {
    color: var(--accent-ink);
    font-weight: 600;
    background: var(--accent);
    border-color: var(--btn-accent-line);
}

/* border-color は base の `.flt-btn:hover` が同特異度・後勝ちで塗るため、ここで
   打ち消さないと中立枠が accent 塗りの上に乗り 1.43:1 に落ちる。 */
.flt-btn-accent:hover { background: var(--btn-accent-hover-bg); border-color: var(--btn-accent-hover-bg); }

.flt-btn-accent:disabled { opacity: .5; cursor: not-allowed; }

.flt-save {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 4px 0 12px;
    background: var(--card);
    border: 1px solid var(--card-line);
    border-radius: var(--bevel-control);
    corner-shape: bevel;
}

.flt-save-input {
    width: 184px;
    background: transparent;
    border: 0;
    color: var(--text3);
    font: 500 12px var(--font-sans);
}

.flt-save-input:focus { outline: none; }

.flt-count {
    margin-left: auto;
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: var(--dim);
    font-size: 11px;
}

.flt-count-num { font: 600 22px var(--font-display); font-variant-numeric: tabular-nums; color: var(--accent); }

.flt-count-total { font: 500 12px var(--font-mono); color: var(--dim); }