/* Irivi · static/app/tag-picker.css（界面修正 2026-10-29 §12 子 Tag 选择器，对照 09_角色选择/final.html）
   --tp-c：分类色（调用方写入：搜索页 categoryColor(root)，上传页 --category-color）。令牌在 static/app/base.css。 */
html body .tp{--tp-c:var(--cat-character);display:flex;flex-direction:column;gap:10px;width:100%;min-width:0;margin-top:2px}
html body .tp .tp-note{margin:0;padding:6px 2px;font-size:13px;color:var(--ink-3)}
html body .tp-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
html body .tp-change{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:2px;height:28px;padding:0 10px 0 12px;border-radius:var(--r-pill);background:var(--soft);color:var(--ink-2);font-size:13px;font-weight:800;cursor:pointer}
html body .tp-change svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
html body .tp-change:hover{color:var(--ink)}
html body .tp-change:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* 已选：实心胶囊 + ✕ */
html body .tp-picked{display:flex;flex-wrap:wrap;gap:6px}
html body .tp-cap{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px 0 13px;border-radius:16px;background:var(--tp-c);color:#fff;font-size:14px;font-weight:800;cursor:pointer;white-space:nowrap}
html body .tp.has-avatars .tp-cap{padding-left:4px}
html body .tp-cap .tp-face{box-shadow:0 0 0 1.5px #fff}
html body .tp-cap svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;opacity:.85}
html body .tp-cap:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* 头像（圆形；没有作品时名字首字 + 浅灰底） */
html body .tp-face{--tp-size:32px;flex:none;display:grid;place-items:center;width:var(--tp-size);height:var(--tp-size);border-radius:50%;overflow:hidden;background:var(--soft);color:var(--ink-3);font-size:calc(var(--tp-size)*.36);font-weight:900;line-height:1}
html body .tp-face img{display:block;width:100%;height:100%;object-fit:cover}

/* 首字母格：7 列，格高 38，圆角 10，浅灰底；没有名字的变浅不可点；当前字母实心分类色白字 */
html body .tp-az{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
html body .tp-az button{all:unset;box-sizing:border-box;display:grid;place-items:center;height:38px;border-radius:10px;background:var(--soft);color:var(--ink);font:800 15px/1 var(--f-num);cursor:pointer;transition:background-color var(--t-fast) var(--ease-out),color var(--t-fast)}
html body .tp-az button svg{width:18px;height:18px;fill:none;stroke:var(--ink-2);stroke-width:2.2;stroke-linecap:round}
html body .tp-az button:disabled{background:#FAFAFB;color:#CFCBD6;cursor:default}
html body .tp-az button.is-on{background:var(--tp-c);color:#fff}
html body .tp-az button:not(:disabled):not(.is-on):hover{background:color-mix(in srgb,var(--tp-c) 10%,var(--soft))}
html body .tp-az button:focus-visible{outline:2px solid var(--ink);outline-offset:1px}

/* 头像格：4 列，圆形 60，名字在下；选中 = 分类色外圈 + 右下勾 */
html body .tp-wall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 6px}
html body .tp-av{all:unset;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;padding:3px 0;color:var(--ink-2);font-size:12px;font-weight:800;text-align:center;cursor:pointer}
html body .tp-av .tp-face{position:relative;overflow:visible;font-size:20px}
html body .tp-av .tp-face img{border-radius:50%}
html body .tp-av-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body .tp-av.is-on{color:var(--ink)}
html body .tp-av.is-on .tp-face{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--tp-c)}
html body .tp-av.is-on .tp-face::after{content:"✓";position:absolute;right:-3px;bottom:-3px;width:22px;height:22px;border-radius:11px;background:var(--tp-c);color:#fff;font-size:12px;font-weight:900;display:grid;place-items:center;box-shadow:0 0 0 2px #fff}
html body .tp-av:focus-visible .tp-face{outline:2px solid var(--ink);outline-offset:4px}

/* 搜索：搜索框（聚焦墨色边框）+ 下拉结果 */
html body .tp-find{display:flex;align-items:center;gap:8px}
html body .tp-find-box{flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:40px;padding:0 14px;border:2px solid var(--line);border-radius:20px;background:#fff;cursor:text;transition:border-color var(--t-fast)}
html body .tp-find-box:focus-within{border-color:var(--ink)}
html body .tp-find-box svg{flex:none;width:18px;height:18px;fill:none;stroke:var(--ink-3);stroke-width:2;stroke-linecap:round}
html body .tp-find-box input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;color:var(--ink);font:inherit;font-size:14px;padding:0}
html body .tp-find-az{all:unset;box-sizing:border-box;flex:none;height:32px;padding:0 12px;border-radius:16px;background:var(--soft);color:var(--ink-2);font-size:12px;font-weight:800;cursor:pointer}
html body .tp-find-az:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
html body .tp-res{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
html body .tp-res[hidden]{display:none}
html body .tp-res .tp-note{padding:14px}
html body .tp-row{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;min-height:50px;padding:8px 14px;border-bottom:1px solid var(--line);color:var(--ink);font-size:15px;font-weight:700;cursor:pointer}
html body .tp-row:last-child{border-bottom:0}
html body .tp-row:hover,html body .tp-row:focus-visible{background:var(--soft)}
html body .tp-row.is-on::after{content:"✓";margin-left:auto;color:var(--tp-c);font-weight:900}
html body .tp-row mark{background:none;color:var(--tp-c);font-weight:900}
html body .tp-row .tp-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body .tp-alias{color:var(--ink-3);font-size:12px;font-weight:700}
html body .tp-row.tp-add{color:var(--ink-2)}

/* 上传页：父层次的竖线缩进里，选择器占满整行 */
html body[data-page="upload"] #uploadTagBrowser .taglevel>.tp{flex-basis:100%}
html body[data-page="upload"] #uploadTagBrowser .taglevel:has(>.tp)::before{display:none}
/* 字母格后面接调用方给的节点（上传页原“＋ 新增 Tag”胶囊）：保持胶囊宽度，不被拉满 */
html body .tp>.chip,html body .tp>.add-tag-chip{align-self:flex-start}
html body[data-page="upload"] #uploadTagBrowser .tp .tp-chips .chip{height:26px!important}
/* 搜索页筛选抽屉：选择器在 .search-opts（flex 换行）里占满整行，排在“全部”之后 */
html body .search-opts>.tp{flex-basis:100%}
html body .tp-find-box input::-webkit-search-cancel-button{display:none}
/* 游戏层的游戏图标（上传页，tag-picker.js showGameIcon）：圆角方形，不裁成圆 */
html body .tp-face.is-game{border-radius:calc(var(--tp-size)*.22);background:transparent}
html body .tp-av .tp-face.is-game img{border-radius:calc(var(--tp-size)*.22)}
html body .tp-av.is-on .tp-face.is-game{border-radius:calc(var(--tp-size)*.22)}