/**
 * FlintHub — 盖章（stamp）插件前台样式（P2：只读渲染）
 *
 * 两处呈现：
 *   ① 列表/搜索/个人页等所有帖子链接、详情页标题 —— 内联小徽章 .stamp-tag
 *   ② 帖子详情正文区右上角 —— 大印章 .stamp-mark（容器 .stamp-layer）
 *
 * 变量全部由 script.js 内联注入（--stamp-c / --stamp-bg / --stamp-bw / --stamp-rot），
 * 本文件不引用任何 --mn-* 变量（前台变量集随主题而变，引用不存在的名字 = 静默失效）。
 * 颜色值来自后台白名单校验（仅 #RGB / #RRGGBB / transparent），不会被拼进非颜色位置。
 *
 * @file plugins/stamp/assets/style.css
 * @package Plugin\Stamp
 * @version 1.0.0
 */

/* ==================== ① 内联小徽章（标题后缀） ==================== */
.stamp-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 0 5px;
    font-size: 11px;
    font-weight: 700;
    line-height: 15px;
    letter-spacing: .5px;
    white-space: nowrap;
    vertical-align: 1px;
    color: var(--stamp-c, #dc2626);
    background: var(--stamp-bg, transparent);
    /* 小尺寸下按 min(2px, 配置值)：配 0 仍是无框（保留 border_w=0 的语义），配 ≥2 统一 2px 免得太笨重 */
    border: min(2px, var(--stamp-bw, 2px)) solid var(--stamp-c, #dc2626);
    border-radius: 3px;
    transform: rotate(var(--stamp-rot, -12deg));
    opacity: .92;
    user-select: none;
    /* 徽章在 <a> 内部：穿透点击 → 点印章等同点标题（跳帖子） */
    pointer-events: none;
}

/* 圆章：小尺寸下退化为胶囊（正圆放不下 4 个字） */
.stamp-tag--circle {
    border-radius: 999px;
}

/* border_w = 0 → 无边框纯文字 */
.stamp-tag--noborder {
    border-width: 0;
}

/* ==================== ② 详情页大印章 ==================== */

/* .thread-body-shell 原本没有任何 position 定义（该类在核心 CSS 里不存在），
   由 script.js 加上本类后才成为印章定位上下文 */
.stamp-anchor {
    position: relative;
}

.stamp-layer {
    position: absolute;
    top: 8px;
    right: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    max-width: 45%;
    /* 纯视觉标记：不挡选择、不挡点击、不挡正文里的链接 */
    pointer-events: none;
    z-index: 1;
}

.stamp-mark {
    display: inline-block;
    padding: 5px 11px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 2px;
    white-space: nowrap;
    color: var(--stamp-c, #dc2626);
    background: var(--stamp-bg, transparent);
    border: var(--stamp-bw, 2px) solid var(--stamp-c, #dc2626);
    /* 双线边框的「内圈」用 outline 模拟，更接近真实印章 */
    outline: 1px solid var(--stamp-c, #dc2626);
    outline-offset: 2px;
    transform: rotate(var(--stamp-rot, -12deg));
    opacity: .88;
    user-select: none;
}

.stamp-mark--rect {
    border-radius: 3px;
}

.stamp-mark--circle {
    border-radius: 50%;
    padding: 9px 10px;
    min-width: 56px;
    text-align: center;
}

.stamp-mark--noborder {
    border-width: 0;
    outline: none;
}

/* ==================== ③ 盖章弹层（P3，仅管理员 + 仅帖子详情页） ==================== */
/* 空壳由 hook/layout_body_end.php 输出；列表内容由 script.js 从 #stamp-map 的 defs 动态渲染。
   z-index 取 90000：高于核心所有常规层级（最高 1000），低于全局浮层（99999/100000）。 */

html.stamp-no-scroll {
    overflow: hidden;
}

.stamp-picker {
    position: fixed;
    inset: 0;
    z-index: 90000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}
/* ⚠️ 必须显式压过 display:flex —— [hidden] 的 UA 样式特异性低于 .stamp-picker */
.stamp-picker[hidden] {
    display: none !important;
}

.stamp-picker-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
}

.stamp-picker-card {
    position: relative;
    width: min(92vw, 520px);
    max-height: 80vh;
    overflow: auto;
    padding: 16px 18px 14px;
    box-sizing: border-box;
    background: var(--mn-bg-card, #fff);
    color: var(--mn-text, #1f2937);
    border: 1px solid var(--mn-border, #e5e7eb);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
}

.stamp-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--mn-border-light, #e5e7eb);
}
.stamp-picker-title {
    font-size: 14px;
    font-weight: 600;
}
.stamp-picker-x {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    padding: 0;
    font-size: 18px;
    line-height: 1;
    color: var(--mn-text-muted, #6b7280);
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}
.stamp-picker-x:hover {
    color: var(--mn-text, #1f2937);
    background: var(--mn-bg-row-hover, #f3f4f6);
}

.stamp-picker-body {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    padding: 14px 0 6px;
}

.stamp-picker-empty {
    grid-column: 1 / -1;
    padding: 24px 8px;
    text-align: center;
    font-size: 13px;
    color: var(--mn-text-muted, #6b7280);
}

/* 单个印章选项 */
.stamp-opt {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 62px;
    padding: 8px 6px;
    background: transparent;
    border: 1px solid var(--mn-border-light, #e5e7eb);
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.stamp-opt:hover {
    background: var(--mn-bg-row-hover, #f3f4f6);
}
.stamp-opt:focus-visible {
    outline: 2px solid var(--mn-primary, #2563eb);
    outline-offset: 1px;
}
/* 已盖：高亮边框 + 右上角勾 */
.stamp-opt.is-on {
    border-color: var(--mn-primary, #2563eb);
    background: var(--mn-primary-light, #eff6ff);
}
.stamp-opt.is-busy {
    opacity: .45;
    pointer-events: none;
}
.stamp-opt-tick {
    position: absolute;
    top: 1px;
    right: 4px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: var(--mn-primary, #2563eb);
}

/* 弹层里的印章预览：格子小，压小字号（特异性 (0,2,0) 压过 .stamp-mark 的 (0,1,0)） */
.stamp-opt .stamp-mark {
    margin: 3px;
    padding: 4px 8px;
    font-size: 12px;
    letter-spacing: 1px;
    opacity: 1;
}
.stamp-opt .stamp-mark--circle {
    min-width: 44px;
    padding: 6px 7px;
}

.stamp-picker-foot {
    padding-top: 8px;
    border-top: 1px solid var(--mn-border-light, #e5e7eb);
    font-size: 12px;
    line-height: 1.5;
    color: var(--mn-text-muted, #6b7280);
}
.stamp-picker-foot.is-error {
    color: var(--mn-error, #dc2626);
    font-weight: 600;
}

/* ==================== 窄屏 ==================== */
@media (max-width: 640px) {
    .stamp-tag {
        margin-left: 4px;
        font-size: 10px;
        line-height: 14px;
        padding: 0 4px;
    }
    .stamp-layer {
        top: 6px;
        right: 6px;
        gap: 6px;
        max-width: 55%;
    }
    .stamp-mark {
        font-size: 12px;
        padding: 4px 8px;
        letter-spacing: 1px;
    }
    .stamp-mark--circle {
        min-width: 48px;
        padding: 7px 8px;
    }
    /* 弹层：手机上贴底显示更像原生 action sheet，比居中悬浮更好点 */
    .stamp-picker {
        align-items: flex-end;
        padding: 0;
    }
    .stamp-picker-card {
        width: 100%;
        max-height: 76vh;
        border-radius: 12px 12px 0 0;
        border-bottom: 0;
        padding: 14px 14px 12px;
    }
    .stamp-picker-body {
        grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
        gap: 8px;
    }
}