/* ==========================================================================
   统一标签组件（NetLibrary Tags）
   --------------------------------------------------------------------------
   覆盖：卡片 / 瀑布流 / 表格 / 搜索下拉 —— 四个视图里所有条目标签。

   为什么独立成文件：同一套标签原先在 style.css（index.html 引）与
   css/styles.css（tojav.html 引）里各存一份，人工复制维护，已经出现多处不同步
   （移动端 display 规则缺失、按下缩放 0.96 / 0.97 不一致、nowrap 遗留冲突等）。
   抽成单一文件后两个页面都引，从此只此一份。

   配套（三处必须同步修改）：
     · DOM 契约：templates/_tags.html 的 macro（服务端渲染）
     · DOM 契约：static/js/renderer.js 的 buildTags()（前端渲染，与上面同构）
     · 折叠逻辑：static/js/utils.js 的 MetaTags（窄屏两行 + 「更多」下拉）

   命名：.ntag 标签基类 / .ntag--<kind> 语义修饰类 / .ntags 标签行容器。
   一个 kind 一个色相，四种视图口径一致（不再有「卡片红色有码 vs 瀑布流琥珀
   有码」这种冲突）。
   ========================================================================== */

/* ---------- 尺寸：所有标签同一宽高 ----------
   统一尺寸靠两个变量控制，标签本体不写死 padding / font-size，改一处即可整体缩放：
     --ntag-h  高度（所有视图、所有 kind 共用）
     --ntag-w  宽度（同一视图内共用；视图间不同，见下方「各视图尺寸档」）
   宽度写死（而不是 min-width）才能做到真正的「同一宽度」：短内容（MP4）不会被
   压得比长内容（0.88G）窄，长内容超出的部分走省略号，完整值仍在 title / aria-label。

   高度用 height 而不是 line-height + padding：后者会随字号漂移，
   wf / search 变体原先字号小一档，高度就比卡片矮 2px，视觉上参差。 */

/* 变量定义在**容器**上而不是 .ntag 自身：这样同行里不是 .ntag 的成员（评分控件）
   也能继承到同一组尺寸。定义在 .ntag 上时元素自身的声明优先于继承，
   容器再怎么改都覆盖不掉。fallback 值供不在容器内的标签（如表格单元格里）使用。 */
.ntags       { --ntag-w: 54px; --ntag-h: 22px; }
.ntags--wf     { --ntag-w: 64px; }
.ntags--search { --ntag-w: 54px; --ntag-h: 20px; }
.data-table    { --ntag-w: 74px; }

.ntag {
    --ntag-ico: 10px;
    --ntag-fs: 0.66rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--ntag-w, 54px);
    height: var(--ntag-h, 22px);
    /* 图标 + 间距 + 内边距共占 26px，剩下 28px 给文字：
       「0.88G」「10-03」这类 5 字符内容刚好放得下，再宽就要截断了 */
    gap: 2px;
    padding: 0 5px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: var(--ntag-fs);
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
    overflow: hidden;
}

/* 文本层：定宽后长内容在这层做省略号。
   inline-flex 的匿名文本节点没法直接 text-overflow，所以 ntag() 输出的文字
   统一包一层 .ntag-txt（_tags.html 与 renderer.js 同构，改一边要改另一边）。 */
.ntag-txt {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- 各视图尺寸档 ----------
   卡片格子最窄，用最小档；瀑布流与表格空间充裕，放大一档。
   同一视图内所有标签严格等宽（变量定义在容器上，见上面「尺寸」段）。 */

/* 宽档：只有日期（10 字符）与种子名（自由长文本）装不进基准宽度。
   时间已经只显示到「日」（见 _tags.html / _table.html / renderer.js），
   再多一个宽档就能完整显示，不必被省略号截断。
   写在 .ntag 自身（特异性高于继承），才盖得住容器上传下来的值。 */
.ntags--wf .ntag--time  { --ntag-w: 84px; }
.data-table .ntag--time { --ntag-w: 94px; }
.data-table .ntag--seed { --ntag-w: 120px; }

/* ---------- 图标：mask + currentColor ----------
   遮罩只取形状，颜色自动跟随该标签的文字色，所以 data URI 里写什么描边色都
   无所谓。只有定义了 --ico 的 kind 才画 ::before，否则会露出一块实心方块。 */

.ntag--format   { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='M10 9l5 3-5 3z'/%3E%3C/svg%3E"); }
.ntag--size     { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='6' rx='8' ry='3'/%3E%3Cpath d='M4 6v12c0 1.66 3.58 3 8 3s8-1.34 8-3V6'/%3E%3Cpath d='M4 12c0 1.66 3.58 3 8 3s8-1.34 8-3'/%3E%3C/svg%3E"); }
.ntag--coded    { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M3 3h5v5H3zM9.5 3h5v5h-5zM16 3h5v5h-5zM3 9.5h5v5H3zM9.5 9.5h5v5h-5zM16 9.5h5v5h-5zM3 16h5v5H3zM9.5 16h5v5h-5zM16 16h5v5h-5z'/%3E%3C/svg%3E"); }
.ntag--uncoded  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 3h5v5H3zM9.5 3h5v5h-5zM16 3h5v5h-5zM3 9.5h5v5H3zM16 9.5h5v5h-5zM3 16h5v5H3zM9.5 16h5v5h-5zM16 16h5v5h-5z'/%3E%3Cpath d='M9.5 9.5l5 5M14.5 9.5l-5 5'/%3E%3C/svg%3E"); }
.ntag--time     { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.ntag--seed     { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='M8.6 13.5l6.8 4M15.4 6.5l-6.8 4'/%3E%3C/svg%3E"); }
.ntag--magnet   { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4v7a6 6 0 0 0 12 0V4h-4v7a2 2 0 0 1-4 0V4z'/%3E%3Cpath d='M6 8h4M14 8h4'/%3E%3C/svg%3E"); }
.ntag--download { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='M7 11l5 5 5-5'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E"); }

.ntag--format::before,
.ntag--size::before,
.ntag--coded::before,
.ntag--uncoded::before,
.ntag--time::before,
.ntag--seed::before,
.ntag--magnet::before,
.ntag--download::before {
    content: '';
    flex: none;
    width: var(--ntag-ico, 11px);
    height: var(--ntag-ico, 11px);
    background-color: currentColor;
    -webkit-mask-image: var(--ico);
    mask-image: var(--ico);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* ---------- 语义配色 ---------- */

.ntag--format {
    background: rgba(102, 126, 234, 0.2);
    color: #a5b4fc;
    border-color: rgba(102, 126, 234, 0.3);
}

.ntag--size {
    background: rgba(16, 185, 129, 0.15);
    color: #6ee7b7;
    border-color: rgba(16, 185, 129, 0.3);
}

.ntag--coded {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.3);
}

.ntag--uncoded {
    background: rgba(34, 211, 238, 0.14);
    color: #67e8f9;
    border-color: rgba(34, 211, 238, 0.3);
}

.ntag--time {
    background: rgba(107, 114, 128, 0.15);
    color: #9ca3af;
    border-color: rgba(107, 114, 128, 0.3);
}

.ntag--seed {
    background: rgba(139, 92, 246, 0.15);
    color: #c4b5fd;
    border-color: rgba(139, 92, 246, 0.3);
}

/* 来源徽章：品牌红渐变，白字。默认 inline（表格/搜索用），
   浮在封面左上角由所属卡片容器决定（见下方「位置」）。
   高度与其它标签一致；宽度不写死 —— 来源名长短差一倍（如「javdb」vs「东京热」），
   定宽会把长的截成半截，而徽章本身就是用来辨认来源的，宁可宽窄不一。 */
.ntag--source {
    --ntag-h: 22px;
    width: auto;
    min-width: var(--ntag-w);
    height: var(--ntag-h);
    padding: 0 10px;
    background-image: linear-gradient(135deg, #e94560, #c23152);
    background-color: #e94560;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: var(--ntag-fs);
    font-weight: 600;
}

/* ---------- 磁力 / 下载按钮 ---------- */

.ntag--magnet {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.3);
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s, color 0.2s, transform 0.1s;
}

.ntag--magnet:hover {
    background: rgba(251, 191, 36, 0.28);
    color: #fde68a;
}

.ntag--magnet:active { transform: scale(0.96); }

/* 下载直链（非磁力）：蓝色系，与磁力区分 */
.ntag--magnet.ntag--download {
    background: rgba(147, 197, 253, 0.15);
    color: #93c5fd;
    border-color: rgba(147, 197, 253, 0.3);
}

.ntag--magnet.ntag--download:hover {
    background: rgba(147, 197, 253, 0.28);
    color: #bfdbfe;
}

.ntag--magnet.copied {
    background: rgba(16, 185, 129, 0.25) !important;
    color: #6ee7b7 !important;
    border-color: rgba(16, 185, 129, 0.45) !important;
}

/* ---------- 标签行容器 ---------- */

.ntags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    padding: 8px 12px 4px;
    flex-shrink: 0;
}

/* 标签不参与 flex 压缩：flex-shrink 默认 1，标签总宽超过容器时浏览器会把它们
   压窄（文字被挤掉）而不是换行。更麻烦的是 MetaTags 布局计算拿到的 offsetWidth
   是压缩后的值 → 算出的行数与实际渲染对不上，浮在右下角的 ▾ 也会因此压住标签。 */
.ntags > * { flex-shrink: 0; }

/* 瀑布流标签行：不带卡片那样的内边距 */
.ntags--wf {
    padding: 6px 0 0;
    gap: 5px;
}

/* 瀑布流里的磁力按钮是主操作：只加重字重与圆角，尺寸仍与其它标签一致
   （原先 padding: 7px 12px + 字号 0.72rem，比同行的标签高 8px，一行标签高低不齐） */
.ntags--wf .ntag--magnet {
    font-weight: 600;
    border-radius: 6px;
}

/* 搜索下拉：更紧凑 */
.ntags--search {
    padding: 0;
    gap: 4px;
}

/* ---------- 位置：来源徽章 ----------
   表格与搜索下拉里它是普通 inline 标签；浮在封面左上角由卡片容器决定，
   徽章本身不定义定位，避免表格里也跟着飞出去。 */

.media-card > .ntag--source,
.waterfall-card .ntag--source {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    pointer-events: none;
}

/* 评分控件（rating.js 挂在标签行里）：尺寸与标签完全一致。
   不定宽的话它比标签宽一截，MetaTags 算「一行放几个」时会被它挤掉一个标签。 */
.ntags .rating-widget {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ntag-w, 54px);
    height: var(--ntag-h, 22px);
    flex-shrink: 0;
}

/* ---------- 卡片变体：磁力按钮只留图标 ----------
   卡片格子窄（移动端 163px），按钮只显示图标，语义靠 title + aria-label；
   瀑布流 / 表格里则显示「磁力」「下载」文字，DOM 完全一致，靠这条规则切换。 */

.ntags:not(.ntags--wf) .ntag--magnet .ntag-txt { display: none; }

/* ---------- 「更多」下拉（MetaTags 折叠后插入的 ▾）----------
   向上弹出：标签行是卡片最后一区，向下会被卡片的 overflow:hidden 裁掉。 */

.ntag.is-overflow,
.rating-widget.is-overflow { display: none !important; }

.ntags-more {
    position: relative;
    flex-shrink: 0;
    margin-left: auto;
}

.ntags-more-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--ntag-h, 22px);
    padding: 0 7px;
    border-radius: 4px;
    font-size: var(--ntag-fs, 0.68rem);
    font-weight: 500;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}

.ntags-more-btn:hover {
    background: rgba(102, 126, 234, 0.25);
    color: #fff;
}

.ntags-more-menu {
    display: none;
    position: absolute;
    right: 0;
    bottom: calc(100% + 6px);
    z-index: 40;
    min-width: 130px;
    padding: 8px;
    background: #23233a;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.ntags-more.open .ntags-more-menu { display: flex; }

/* ---------- 移动端（≤768px）---------- */

@media (max-width: 768px) {
    /* 触控放大：整档一起放大，仍然保持「同一宽高」。
       原先只把磁力按钮单独撑到 44px（触控标准），同行的其它标签还是 22px，
       一行里最高的和最矮的差一倍；现在统一到 30px，磁力按钮的点击区域靠
       卡片内边距与行高一起放大，不再靠单独加高破坏对齐。 */
    .ntags { --ntag-h: 30px; }

    /* 卡片在移动端反而更宽（两列布局，卡片 230px），跟着放大一档，
       与 30px 的高度搭配才不至于显得又高又瘦 */
    .media-card .ntags { --ntag-w: 60px; }
    .media-card .ntag--source { --ntag-h: 30px; }

    .ntags--wf { --ntag-w: 68px; }
    .data-table { --ntag-w: 80px; }

    /* 宽档要跟着一起放大 */
    .ntags--wf .ntag--time  { --ntag-w: 90px; }
    .data-table .ntag--time { --ntag-w: 100px; }
    .data-table .ntag--seed { --ntag-w: 124px; }

    .waterfall-card .ntag--source { padding: 0 8px; }

    .ntags:not(.ntags--wf) .ntag--magnet:active { transform: scale(0.96); }
}