/* Structured loot-filter editor. Shared across the editor components, so kept global
   rather than scoped (scoped CSS would not reach child components). All classes are
   prefixed lf- to avoid collisions. */

.lf-summary { color: #9aa0aa; margin: .5rem 0; }

.lf-toolbar { display: flex; gap: .6rem; align-items: center; margin: .6rem 0; flex-wrap: wrap; }
.lf-bump { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .2rem 0 .6rem;
    padding: .5rem .7rem; background: #1b1b22; border: 1px solid #34343e; border-radius: 6px; }
.lf-bump__text { font-size: .9em; color: #c9d1d9; }
.lf-bump__text strong { color: #e6e6e6; }
.lf-search { flex: 1; min-width: 200px; max-width: 360px; padding: .4rem .6rem; background: #14141a;
    border: 1px solid #2a2a32; border-radius: 4px; color: #e6e6e6; }

.lf-module { border: 1px solid #2a2a32; border-radius: 6px; margin: .2rem 0; }
/* Expanded modules (the body only renders when open) get a dull light-blue accent border. */
.lf-module:has(> .lf-module__body) { border-color: #6d8cab; box-shadow: 0 0 0 1px rgba(109, 140, 171, .25); }
.lf-module__header { display: flex; gap: .5rem; align-items: baseline; width: 100%;
    background: #1b1b22; border: 0; color: inherit; padding: .8rem .85rem; cursor: pointer; text-align: left;
    position: sticky; top: 0; z-index: 3; }
.lf-module__header:hover { background: #20202a; }
.lf-module__chevron { color: #8a8a96; }
.lf-module__name { font-weight: 600; }
.lf-module__subtitle { color: #8a8a96; font-size: .85em; }
.lf-module__body { padding: .4rem .8rem; }
.lf-module__desc { color: #b6bcc6; font-size: .9em; white-space: pre-line; margin: .2rem 0 .6rem; }
.lf-descedit { display: flex; flex-direction: column; gap: .5rem; margin: .2rem 0 .8rem; }
.lf-descedit__body { width: 100%; resize: vertical; background: #0f0f14; border: 1px solid #2a2a32;
    border-radius: 4px; color: #e6e6e6; padding: .4rem .5rem; font-size: .9em; font-family: inherit; }
.lf-descedit__version { display: flex; align-items: center; gap: .6rem; font-size: .82em; color: #b6bcc6; }
.lf-descedit__vlabel { font-size: .72em; text-transform: uppercase; letter-spacing: .04em; color: #8a8a96; }
.lf-descedit__version label { display: inline-flex; align-items: center; gap: .3rem; }
.lf-descedit__version input { width: 3.5rem; padding: .2rem .35rem; background: #0f0f14;
    border: 1px solid #2a2a32; border-radius: 4px; color: #e6e6e6; }

/* Each section is its own bubble/card so the editor doesn't read as one continuous wall. */
.lf-group { margin: .7rem 0; border: 1px solid #262630; border-radius: 8px;
    background: #141419; padding: 0 .7rem .55rem; }
/* Sticky section subheading = the card's header band (spans the card width via negative
   margins matching the card padding). */
.lf-group__name { position: sticky; top: 2.4rem; z-index: 2;
    margin: 0 -.7rem .45rem; padding: .5rem .7rem;
    background: #1b1b22; border-bottom: 1px solid #2a2a32; border-radius: 8px 8px 0 0;
    color: #e8ebf0; font-weight: 700; font-size: .88em;
    text-transform: uppercase; letter-spacing: .05em; }
/* no double divider on the first row under the band */
.lf-group__name + .lf-input, .lf-group__name + .lf-stylerow { border-top: 0; }

.lf-input { display: flex; justify-content: space-between; gap: 1rem; align-items: center;
    padding: .35rem 0; border-top: 1px solid #23232b; }
.lf-input__label { display: flex; align-items: center; gap: .4rem; flex: 0 0 40%; }
.lf-input__dot { width: 8px; height: 8px; border-radius: 50%; background: #3fb950; display: inline-block; }
.lf-input__control { display: flex; align-items: center; gap: .5rem; flex: 1; justify-content: flex-end;
    flex-wrap: wrap; }
.lf-input__value { color: #c9d1d9; font-size: .85em; max-width: 60ch; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }

.lf-reset { background: none; border: 0; color: #8a8a96; cursor: pointer; font-size: 1rem; padding: 0 .2rem; }
.lf-reset:hover { color: #e6e6e6; }

/* tri-state control */
.lf-tristate { display: inline-flex; border: 1px solid #2a2a32; border-radius: 5px; overflow: hidden; }
.lf-tristate__btn { background: #14141a; border: 0; border-left: 1px solid #2a2a32; color: #9aa0aa;
    font-size: .8em; font-weight: 600; padding: .25rem .6rem; cursor: pointer; }
.lf-tristate__btn:first-child { border-left: 0; }
.lf-tristate__btn:hover { background: #20202a; color: #e6e6e6; }
.lf-tristate__btn--active { color: #fff; }
.lf-tristate__btn--active { background: #3a3a44; }
.lf-tristate__btn--active.lf-tristate__btn--show { background: #2e7d32; }
.lf-tristate__btn--active.lf-tristate__btn--hide { background: #b3322c; }

/* controls */
.lf-number, .lf-text { padding: .3rem .5rem; background: #14141a; border: 1px solid #2a2a32;
    border-radius: 4px; color: #e6e6e6; min-width: 8rem; }
.lf-number.lf-invalid { border-color: #d9534f; }

.lf-switch { position: relative; display: inline-block; width: 40px; height: 22px; }
.lf-switch input { opacity: 0; width: 0; height: 0; }
.lf-switch__slider { position: absolute; inset: 0; background: #3a3a44; border-radius: 22px;
    transition: .15s; cursor: pointer; }
.lf-switch__slider::before { content: ""; position: absolute; height: 16px; width: 16px; left: 3px;
    bottom: 3px; background: #e6e6e6; border-radius: 50%; transition: .15s; }
.lf-switch input:checked + .lf-switch__slider { background: #b3322c; }
.lf-switch input:checked + .lf-switch__slider::before { transform: translateX(18px); }

.lf-taglist { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: flex-end; max-width: 100%; }
.lf-tag { background: #262630; border: 1px solid #34343e; border-radius: 4px; padding: .1rem .35rem;
    font-size: .85em; display: inline-flex; align-items: center; gap: .25rem; }
.lf-tag__x { background: none; border: 0; color: #8a8a96; cursor: pointer; font-size: .9em; }
.lf-tag__x:hover { color: #d9534f; }
.lf-tag__input { background: #14141a; border: 1px solid #2a2a32; border-radius: 4px; color: #e6e6e6;
    padding: .15rem .4rem; min-width: 6rem; }

.lf-enumlist { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }
.lf-enumlist__opt { display: inline-flex; align-items: center; gap: .25rem; font-size: .85em; }

/* style input row: a bar (title + preview + toggle); the pickers collapse behind the toggle */
.lf-stylerow { display: flex; flex-direction: column; gap: .5rem; padding: .5rem 0; border-top: 1px solid #23232b; }
.lf-stylerow__bar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.lf-stylerow__bar .lf-input__label { flex: 0 0 auto; min-width: 11rem; }
.lf-stylerow__toggle { margin-left: auto; background: #20202a; border: 1px solid #34343e; color: #cdd3db;
    border-radius: 5px; padding: .28rem .7rem; font-size: .82em; cursor: pointer; white-space: nowrap; }
.lf-stylerow__toggle:hover { background: #2a2a36; color: #fff; }
.lf-stylerow__editor { border-top: 1px dashed #2a2a32; padding-top: .5rem; }

.lf-style { display: flex; flex-direction: column; gap: .4rem; width: 100%; background: #16161c;
    border: 1px solid #26262e; border-radius: 6px; padding: .5rem .6rem; }
.lf-style__section { display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: center; }
.lf-style__heading { flex-basis: 100%; font-size: .72em; letter-spacing: .04em; text-transform: uppercase; color: #8a8a96; margin-top: .15rem; }
.lf-style__color, .lf-style__bool, .lf-style__num { display: inline-flex; align-items: center; gap: .3rem;
    font-size: .82em; }
.lf-style__color input[type=color] { width: 28px; height: 22px; padding: 0; border: 1px solid #34343e;
    border-radius: 4px; background: none; cursor: pointer; }
.lf-style__num input { width: 5rem; padding: .2rem .35rem; background: #0f0f14; border: 1px solid #2a2a32;
    border-radius: 4px; color: #e6e6e6; font-size: .95em; }
.lf-style .kb-select { font-size: .9em; }
.lf-style .kb-select__input { min-width: 7rem; padding: .2rem .4rem; }

/* tier board */
.lf-board { display: flex; gap: .5rem; overflow-x: auto; padding: .4rem 0; width: 100%; }
.lf-board__title { font-size: .8em; text-transform: uppercase; color: #8a8a96; }
.lf-board__bar { display: flex; align-items: center; gap: .6rem; margin: .4rem 0 .1rem; flex-wrap: wrap; }
.lf-board__sync { background: #20202a; border: 1px solid #34343e; color: #cdd3db; border-radius: 5px;
    padding: .2rem .6rem; font-size: .78em; cursor: pointer; }
.lf-board__sync:hover:not(:disabled) { background: #2a2a36; color: #fff; }
.lf-board__sync:disabled { opacity: .6; cursor: default; }
.lf-board__status { font-size: .8em; color: #9aa0aa; }
.lf-board__stale { font-size: .78em; color: #d0a24a; margin: 0 0 .3rem; }
.lf-col { flex: 0 0 150px; background: #14141a; border: 1px solid #26262e; border-radius: 6px; display: flex; flex-direction: column; min-height: 60px; }
.lf-col__head { display: flex; justify-content: space-between; align-items: center; padding: .3rem .5rem; border-bottom: 2px solid #3a3a44; }
.lf-col__title { font-weight: 600; font-size: .85em; }
.lf-col__count { color: #8a8a96; font-size: .75em; }
.lf-col__style { background: none; border: 0; color: #8a8a96; cursor: pointer; font-size: .7em;
    text-transform: uppercase; letter-spacing: .03em; padding: 0 .2rem; }
.lf-col__style:hover { color: #e6e6e6; }

.lf-tierstyle { background: #16161c; border: 1px solid #26262e; border-radius: 6px;
    padding: .5rem .6rem; margin: .2rem 0 .6rem; display: flex; flex-direction: column; gap: .5rem; }
.lf-tierstyle__head { display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: .9em; }
.lf-tierstyle__note { font-weight: 400; font-size: .8em; color: #8a8a96; flex: 1; }
.lf-col__mode { padding: .3rem .35rem 0; }
.lf-tristate--compact { display: flex; width: 100%; }
.lf-tristate--compact .lf-tristate__btn { flex: 1; padding: .2rem .15rem; font-size: .72em; }
.lf-col__body { padding: .35rem; display: flex; flex-direction: column; gap: .25rem; flex: 1; }
.lf-tile { display: flex; justify-content: space-between; align-items: center; gap: .25rem; background: #262630; border: 1px solid #34343e; border-radius: 4px; padding: .2rem .4rem; font-size: .8em; cursor: grab; }
.lf-tile:active { cursor: grabbing; }
.lf-tile__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lf-tile__x { background: none; border: 0; color: #8a8a96; cursor: pointer; font-size: .9em; line-height: 1; }
.lf-tile__x:hover { color: #d9534f; }
.lf-col__add { margin-top: .25rem; }
.lf-col__addinput { width: 100%; background: #0f0f14; border: 1px solid #2a2a32; border-radius: 4px; color: #e6e6e6; padding: .2rem .35rem; font-size: .8em; }

/* preview (high-fidelity: real OSRS fonts + item art, FilterScape recipe) */
.lf-preview { display: flex; gap: 1rem; margin: .4rem 0; flex-wrap: wrap; align-items: flex-start; }
.lf-preview__stage { background: #2c2721; border: 3px solid #2c2721; padding: 1rem 1.25rem;
    border-radius: 2px; min-width: 160px; display: flex; align-items: center; justify-content: center; }
.lf-preview__label { display: inline-flex; align-items: center; gap: .35rem; font-size: 24px; line-height: 1; padding: 0 .35rem; }
.lf-preview__icon { width: 32px; height: 32px; image-rendering: pixelated; vertical-align: middle; }
/* OSRS right-click menu palette (FilterScape): light-brown box, black header with muted
   brown "Choose Option", white "Take", item name in menuTextColor. */
.lf-preview__menu { min-width: 170px; align-self: flex-start; border: 1px solid #564e43; background: #564e43; }
.lf-preview__menuhdr { background: #000; color: #564e43; font-family: 'RuneScape', sans-serif; font-size: 20px;
    line-height: 1.3; padding: 2px 6px; }
.lf-preview__menurow { font-family: 'RuneScape', sans-serif; font-size: 20px; line-height: 1.3;
    padding: 2px 6px; color: #fff; }

/* OSRS in-game label fonts (RuneStar/fonts, CC0). fontType 1/2/3 -> Small/Normal/Bold. */
@font-face { font-family: 'RuneScapeSmall'; src: url('/fonts/RuneScape-Plain-11.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'RuneScape'; src: url('/fonts/RuneScape-Plain-12.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'RuneScapeBold'; src: url('/fonts/RuneScape-Bold-12.ttf') format('truetype'); font-display: swap; }

/* Evaluation-order panel */
.lf-eval { margin: .5rem 0 1rem; border: 1px solid #3a342c; border-radius: 6px; background: #211d18; }
.lf-eval__toggle { width: 100%; text-align: left; background: none; border: 0; color: #d8cfbf; padding: .5rem .75rem; cursor: pointer; font-weight: 600; }
.lf-eval__chevron { display: inline-block; width: 1rem; }
.lf-eval__legend { margin: 0; padding: 0 .75rem .5rem; color: #9b948a; font-size: .85rem; }
.lf-eval__list { margin: 0; padding: 0 .5rem .5rem 0; list-style: none; }
.lf-eval__row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .15rem .5rem; }
.lf-eval__row.is-inert { opacity: .55; }
.lf-eval__jump { background: none; border: 0; color: #d8cfbf; cursor: pointer; display: inline-flex; gap: .4rem; padding: 0; }
.lf-eval__jump:hover .lf-eval__name { text-decoration: underline; }
.lf-eval__ord { color: #e6ad29; font-variant-numeric: tabular-nums; min-width: 2.4rem; }
.lf-eval__counts { display: inline-flex; gap: .4rem; font-size: .8rem; }
.lf-eval__apply { color: #52c7de; }
.lf-eval__rule { color: #00a33c; }
.lf-eval__term { color: #c90808; text-transform: uppercase; font-size: .7rem; letter-spacing: .04em; }
.lf-eval__note { color: #9b948a; font-size: .8rem; font-style: italic; }
.lf-module__ord { color: #e6ad29; font-size: .8rem; font-variant-numeric: tabular-nums; margin-right: .35rem; }

/* Item override inspector */
.lf-eval__check { display: flex; gap: .4rem; padding: .5rem .75rem; }
.lf-eval__check input { flex: 1; background: #2c2721; border: 1px solid #564e43; color: #d8cfbf; padding: .3rem .5rem; border-radius: 4px; }
.lf-override { background: #211d18; border: 1px solid #3a342c; border-radius: 6px; padding: .5rem .75rem; margin: 0 .75rem .75rem; }
.lf-override__title { font-weight: 600; color: #e6ad29; margin-bottom: .35rem; }
.lf-override__none { color: #9b948a; font-style: italic; }
.lf-override__list { list-style: none; margin: 0; padding: 0; }
.lf-override__row { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding: .15rem 0; font-size: .85rem; }
.lf-override__row.is-unreached { opacity: .45; text-decoration: line-through; }
.lf-override__row.is-off { opacity: .55; }
.lf-override__ord { color: #e6ad29; min-width: 2.4rem; }
.lf-override__mod { color: #d8cfbf; }
.lf-override__eff { color: #9b948a; }
.lf-override__gate { color: #52c7de; font-style: italic; }
.lf-override__off { color: #c90808; text-transform: uppercase; font-size: .7rem; }
.lf-override__decide { color: #00a33c; font-weight: 600; }
.lf-override__cond { color: #e6ad29; }
.lf-override__unreached { color: #9b948a; }
.lf-override__idnote { color: #9b948a; font-size: .8rem; margin-top: .35rem; }
.lf-override__sub { color: #9b948a; font-size: .78rem; margin-bottom: .35rem; }
.lf-override__more { color: #9b948a; font-size: .8rem; font-style: italic; margin-top: .35rem; }

/* Item summary popover (tier-ladder view) */
.lf-sum { background: #211d18; border: 1px solid #3a342c; border-radius: 6px; padding: .55rem .75rem; margin: 0 .75rem .75rem; font-size: .85rem; }
.lf-sum__title { font-weight: 600; color: #e6ad29; }
.lf-sum__sub { color: #9b948a; font-size: .78rem; margin-bottom: .45rem; }
.lf-sum__row { display: flex; gap: .5rem; align-items: baseline; padding: .1rem 0; }
.lf-sum__key { color: #9b948a; min-width: 6.5rem; flex: none; }
.lf-sum__val { color: #d8cfbf; font-weight: 600; }
.lf-sum__val.is-hidden, .lf-sum__dest.is-hidden { color: #c90808; }
.lf-sum__promos { margin-top: .4rem; }
.lf-sum__promos > .lf-sum__key { display: block; margin-bottom: .15rem; }
.lf-sum__promo { display: flex; gap: .5rem; align-items: baseline; padding: .08rem 0 .08rem .5rem; }
.lf-sum__q { color: #52c7de; min-width: 7rem; flex: none; font-variant-numeric: tabular-nums; }
.lf-sum__arrow { color: #6b6359; }
.lf-sum__dest { color: #d8cfbf; }
.lf-sum__more { color: #9b948a; font-size: .8rem; font-style: italic; margin-top: .45rem; }
.lf-sum__ovr { margin: .35rem 0 .15rem; }
.lf-sum__ovr > .lf-sum__key { display: block; margin-bottom: .15rem; }
.lf-sum__ovr .lf-sum__q { min-width: 0; color: #d8cfbf; font-variant-numeric: normal; }
.lf-sum__otherwise { color: #9b948a; font-size: .78rem; margin: .3rem 0 .1rem; }
.lf-sum__step { display: flex; gap: .4rem; align-items: baseline; padding: .12rem 0; flex-wrap: wrap; }
.lf-sum__step.is-group-start { border-top: 1px solid #2a2a32; margin-top: .25rem; padding-top: .3rem; }
.lf-sum__cond { color: #52c7de; }
.lf-sum__step.is-default .lf-sum__cond { color: #9b948a; font-style: italic; }
.lf-sum__sect { color: #6b6359; font-size: .75rem; margin-left: auto; padding-left: .5rem; }
.lf-sum__promoline { color: #8a8a96; font-size: .78rem; padding: .05rem 0 .15rem .6rem; }

/* Hover override popover anchoring */
.lf-tile { position: relative; }
.lf-tag { position: relative; }
/* Fixed positioning (anchored to the cursor via inline left/top) so the popup escapes the
   board's overflow-x scroll clip and paints above every section. */
.lf-tile-pop { position: fixed; z-index: 9999; min-width: 18rem; max-width: 28rem; max-height: calc(100vh - 16px); overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,.5); pointer-events: none; }
.lf-tile-pop .lf-override, .lf-tile-pop .lf-sum { margin: 0; }
.lf-copy-hint { color: #9b948a; font-size: .8rem; font-style: italic; align-self: center; }

/* Category priority reorder panel */
.lf-reorder { margin: 8px 0; }
.lf-reorder > summary { cursor: pointer; font-weight: 600; }
.lf-reorder-list { list-style: decimal inside; margin: 6px 0; padding: 0; }
.lf-reorder-list li { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.lf-reorder-name { flex: 1; }
.lf-reorder-hint { font-size: 12px; opacity: .7; margin: 4px 0 0; }