/* Phone filter sheet (templates/_filter_sheet.html). Only used at phone widths:
   desktop keeps the tag sidebar. */
.fs-fab, .fs-sheet, .fs-backdrop, .fs-strip { display: none; }

@media (max-width: 700px) {
    /* the sidebar's job moves into the sheet */
    .comics-page > .tag-sidebar { display: none; }
    .comics-page { flex-direction: column; height: auto; }
    .comics-main { padding-bottom: 90px; }   /* room for the Filter button */

    /* ── floating button, within thumb reach */
    .fs-fab {
        display: flex; align-items: center; justify-content: center;
        position: fixed; right: calc(16px + env(safe-area-inset-right)); bottom: calc(18px + env(safe-area-inset-bottom));
        z-index: 1200; width: 56px; height: 56px; padding: 0;
        color: #111; background: aquamarine; border: none; border-radius: 0;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.4);
        cursor: pointer;
    }
    .fs-fab-icon { display: inline-flex; }
    .fs-fab-icon svg { width: 26px; height: 26px; }
    /* how many filters are on, in the button's corner */
    .fs-fab-count {
        position: absolute; top: -7px; right: -7px; min-width: 22px; height: 22px; padding: 0 5px; box-sizing: border-box;
        font-family: "jf_dot_ayu"; font-size: 13px; line-height: 22px; text-align: center;
        color: aquamarine; background: #111; border: 1px solid aquamarine;
    }

    /* ── current search, shown above the results */
    .fs-strip { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
    .fs-strip a {
        display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 10px;
        font-family: "jf_dot_ayu"; font-size: 15px; text-decoration: none;
        color: aquamarine; border: 1px solid rgba(127, 255, 212, 0.5); background: rgba(127, 255, 212, 0.1);
    }
    .fs-strip a.fs-neg { color: #ff9b8f; border-color: rgba(255, 155, 143, 0.45); background: rgba(255, 155, 143, 0.08); }
    .fs-strip a span { opacity: 0.75; }

    /* ── the sheet */
    .fs-backdrop {
        display: block; position: fixed; inset: 0; z-index: 1300;
        background: rgba(0, 0, 0, 0.6); opacity: 0; transition: opacity 0.2s;
    }
    .fs-backdrop.is-open { opacity: 1; }
    .fs-backdrop[hidden], .fs-sheet[hidden] { display: none; }
    .fs-sheet {
        display: flex; flex-direction: column;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1400;
        max-height: 86vh; max-height: 86svh;
        background: #1b1d1c; border-top: 1px solid rgba(127, 255, 212, 0.35);
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.6);
        font-family: "jf_dot_ayu"; color: #ddd;
        transform: translateY(100%); transition: transform 0.22s ease-out;
    }
    .fs-sheet.is-open { transform: none; }
    html.fs-locked, html.fs-locked body { overflow: hidden; }
    @media (prefers-reduced-motion: reduce) { .fs-sheet, .fs-backdrop { transition: none; } }

    .fs-grab { width: 44px; height: 4px; background: #555; margin: 8px auto 0; }
    .fs-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 4px 16px; }
    .fs-head h2 { margin: 0; font-size: 20px; color: #eee; font-weight: normal; letter-spacing: 1px; }
    .fs-close { width: 48px; height: 48px; font-size: 30px; line-height: 1; color: #aaa; background: none; border: none; cursor: pointer; }

    .fs-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 14px 12px; }
    .fs-section { padding: 10px 0 14px; }
    .fs-section + .fs-section { border-top: 1px solid rgba(255, 255, 255, 0.08); }
    .fs-show-label { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #8a8f8c; }
    .fs-hint { font-size: 12px; color: #777; margin: 6px 0 0; }

    /* Show / Rating: joined toggle bars, filled when on (unlike the outlined tags) */
    .fs-show { background: #141615; margin: 0 -14px; padding: 12px 14px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
    .fs-show-row { display: flex; flex-direction: column; gap: 6px; }
    .fs-show-row + .fs-show-row { margin-top: 12px; }
    .fs-seg { flex: 1; display: flex; border: 1px solid #3c403e; }
    .fs-seg-btn {
        flex: 1 1 0; min-width: 0; height: 44px; padding: 0 6px;
        font-family: "jf_dot_ayu"; font-size: 15px; color: #bbb; background: #222524;
        border: none; border-left: 1px solid #3c403e; cursor: pointer;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .fs-seg-btn:first-child { border-left: none; }
    /* picked: the text keeps its colour; the button gets a tint of it and an outline */
    .fs-seg-btn[aria-pressed="true"] { background: rgba(127, 255, 212, 0.18); box-shadow: inset 0 0 0 2px aquamarine; }
    .fs-seg-rating .fs-r-s { color: #8fd694; }
    .fs-seg-rating .fs-r-q { color: #f0c060; }
    .fs-seg-rating .fs-r-e { color: #ff8a80; }
    .fs-seg-rating .fs-r-s[aria-pressed="true"] { background: rgba(143, 214, 148, 0.2); box-shadow: inset 0 0 0 2px #8fd694; }
    .fs-seg-rating .fs-r-q[aria-pressed="true"] { background: rgba(240, 192, 96, 0.2); box-shadow: inset 0 0 0 2px #f0c060; }
    .fs-seg-rating .fs-r-e[aria-pressed="true"] { background: rgba(255, 138, 128, 0.2); box-shadow: inset 0 0 0 2px #ff8a80; }
    .fs-age { font-size: 13px; color: #bbb; margin: 10px 0 0; }
    .fs-age button { font-family: inherit; font-size: 13px; color: #ff8a80; background: none; border: 1px solid rgba(255, 138, 128, 0.5); padding: 6px 10px; margin-left: 6px; cursor: pointer; }

    /* Tags: rectangular, outlined, coloured by category */
    .fs-tags-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
    .fs-tags-head .fs-hint { margin: 0; }
    .fs-find {
        width: 100%; box-sizing: border-box; height: 44px; margin: 10px 0 12px; padding: 0 12px;
        font-family: "jf_dot_ayu"; font-size: 16px; color: aquamarine;
        background: #111312; border: 1px solid rgba(127, 255, 212, 0.3); border-radius: 0; outline: none;
    }
    .fs-find:focus { border-color: aquamarine; }
    .fs-tags { display: flex; flex-wrap: wrap; gap: 8px; }
    .fs-tag {
        display: inline-flex; align-items: center; gap: 6px; min-height: 40px; max-width: 100%; padding: 0 10px;
        font-family: "jf_dot_ayu"; font-size: 16px; text-align: left;
        background: rgba(255, 255, 255, 0.03); border: 1px solid; border-radius: 0; cursor: pointer;
    }
    .fs-tag[hidden] { display: none; }
    .fs-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .fs-count { font-size: 12px; color: #8a8f8c; }
    .fs-mark:empty { display: none; }
    .fs-cat-copyright { color: #f0d060; border-color: rgba(240, 208, 96, 0.4); }
    .fs-cat-character { color: #80c89a; border-color: rgba(128, 200, 154, 0.4); }
    .fs-cat-general   { color: #80aad0; border-color: rgba(128, 170, 208, 0.4); }
    .fs-tag.is-inc { background: rgba(127, 255, 212, 0.16); border-color: aquamarine; box-shadow: inset 0 0 0 1px aquamarine; }
    .fs-tag.is-inc .fs-mark { color: aquamarine; }
    .fs-tag.is-exc { color: #ff9b8f; background: rgba(255, 155, 143, 0.1); border-color: #ff9b8f; }
    .fs-tag.is-exc .fs-name { text-decoration: line-through; }
    .fs-empty { color: #777; font-size: 14px; }

    .fs-foot {
        display: flex; gap: 10px; padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
        border-top: 1px solid rgba(255, 255, 255, 0.1); background: #1b1d1c;
    }
    .fs-clear {
        flex: 0 0 auto; height: 50px; padding: 0 18px;
        font-family: "jf_dot_ayu"; font-size: 16px; color: #ccc; background: none; border: 1px solid #555; border-radius: 0; cursor: pointer;
    }
    .fs-go {
        flex: 1; display: flex; align-items: center; justify-content: center; height: 50px;
        font-family: "jf_dot_ayu"; font-size: 18px; color: #111; background: aquamarine; text-decoration: none;
    }
}