/* 史记命名实体样式表 v5.4 (融合v5.3.3 + v6.0方案B改进) */
/* 最后更新: 2026-03-19 13:45 */
/* 如果你在浏览器开发者工具中看到这行注释，说明CSS已加载 */
/*
 * v5.4 改进（基于v5.3.3）：
 * 1. 典籍：添加波浪线 (wavy 2px) + 偏移3px
 * 2. 神话：添加波浪线 (wavy 2px) + 偏移3px
 * 3. 朝代：下划线加粗到2px
 * 4. 思想：下划线加粗到2px + 改进颜色透明度
 * 5. 保持v5.3的text-decoration风格和整体配色
 */

/* 基础样式 */
body {
    font-family: "Noto Serif SC", "Source Han Serif SC", serif;
    line-height: 2;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fdfdf8;
    color: #2c2c2c;
}

/* 段落间距 */
p {
    margin: 2em 0;
}

/* 人名样式 */
.person {
    color: #8B4513;
    text-decoration: underline;
    text-decoration-color: #8B451380;
    text-underline-offset: 3px;  /* 增加下划线与文字的距离 */
    font-weight: 500;
    cursor: default;
}

/* 地名样式 */
.place {
    color: #B8860B;
    text-decoration: underline double;  /* 双线区分地名和人名 */
    text-decoration-color: #B8860B80;
    text-underline-offset: 3px;  /* 增加下划线与文字的距离 */
    cursor: default;
}

/* 官职样式 */
.official {
    color: #8B0000;
    font-weight: 500;
    cursor: default;
}

/* 时间/纪年样式 */
.time {
    color: #008B8B;
    font-style: italic;
    cursor: default;
}

/* 朝代/氏族/国号样式 */
.dynasty {
    color: #9370DB;
    text-decoration: underline solid #9370DB80;  /* v5.3.3: 改用text-decoration避免与背景重叠 */
    text-decoration-thickness: 2px;  /* v5.4: 加粗下划线 */
    text-underline-offset: 3px;  /* 增加下划线与文字的距离 */
    cursor: default;
}

/* 封国样式 */
.feudal-state {
    color: #B266B2;
    text-decoration: underline solid #B266B280;  /* v5.3: 改用text-decoration避免与背景重叠 */
    text-underline-offset: 3px;  /* 增加下划线与文字的距离 */
    cursor: default;
}

/* 制度/典章样式 */
.institution {
    color: #4682B4;
    font-weight: 500;
    cursor: default;
}

/* 族群/部落样式 */
.tribe {
    color: #2F4F4F;
    font-weight: 500;
    cursor: default;
}

/* 器物样式 */
.artifact {
    color: #CD853F;
    font-weight: 500;
    cursor: default;
}

/* 天文/历法样式 */
.astronomy {
    color: #483D8B;
    font-style: italic;
    cursor: default;
}

/* 传说生物/神话样式 */
.mythical {
    color: #8B008B;
    text-decoration: underline wavy #8B008B80;  /* v5.4: 添加波浪线 */
    text-decoration-thickness: 2px;  /* v5.4: 加粗波浪线 */
    text-underline-offset: 3px;  /* v5.4: 下移 */
    font-weight: 500;
    cursor: default;
}

/* 生物样式 */
.biology {
    color: #228B22;
    font-weight: 500;
    cursor: default;
}

/* 典籍样式 */
.book {
    color: #4B0082;
    text-decoration: underline wavy #4B008280;  /* v5.4: 添加波浪线 */
    text-decoration-thickness: 2px;  /* v5.4: 加粗波浪线 */
    text-underline-offset: 3px;  /* v5.4: 下移 */
    font-style: italic;
    cursor: default;
}

/* 礼仪样式 */
.ritual {
    color: #8B6914;
    font-weight: 500;
    cursor: default;
}

/* 刑法样式 */
.legal {
    color: #8B0000;
    background-color: rgba(139, 0, 0, 0.06);
    cursor: default;
}

/* 思想样式 */
.concept {
    color: #2F4F4F;
    text-decoration: underline dotted #2F4F4F80;  /* v5.4: 改进颜色透明度 */
    text-decoration-thickness: 2px;  /* v5.4: 加粗点线 */
    text-underline-offset: 3px;  /* 增加下划线与文字的距离 */
    cursor: default;
}

/* 数量样式 */
.quantity {
    color: #2E8B57;
    font-weight: 500;
    cursor: default;
}

/* 实体链接样式 - v5.3.2: 移除链接默认下划线，避免与实体自身的text-decoration重叠 */
a.entity-link {
    text-decoration: none;  /* 移除链接默认下划线 */
    color: inherit;         /* 继承实体颜色 */
}

a.entity-link:hover {
    opacity: 0.8;           /* 悬停时略微透明，提供视觉反馈 */
}

/* ======================================== 动词标注样式 v5.1 ======================================== */
/* v5.1: 改用半透明背景，深色文字 + 加粗，提升可读性 */

/* 军事动词 ⟦◈动词⟧ */
.verb-military {
    color: #DC143C;  /* 深红色文字 */
    background-color: rgba(220, 20, 60, 0.12);  /* 半透明红色背景 */
    font-weight: 600;
    padding: 0 3px;
    border-radius: 2px;
    cursor: default;
}

/* 刑罚动词 ⟦◉动词⟧ */
.verb-penalty {
    color: #0056b3;  /* 深蓝色文字 */
    background-color: rgba(0, 86, 179, 0.10);  /* 半透明蓝色背景 */
    font-weight: 600;
    padding: 0 3px;
    border-radius: 2px;
    cursor: default;
}

/* 政治动词 ⟦○动词⟧ */
.verb-political {
    color: #B8860B;  /* 金色文字 */
    background-color: rgba(184, 134, 11, 0.12);  /* 半透明金色背景 */
    font-weight: 600;
    padding: 0 3px;
    border-radius: 2px;
    cursor: default;
}

/* 经济动词 ⟦◇动词⟧ */
.verb-economic {
    color: #228B22;  /* 深绿色文字 */
    background-color: rgba(34, 139, 34, 0.15);  /* 半透明绿色背景 */
    font-weight: 600;
    padding: 0 3px;
    border-radius: 2px;
    cursor: default;
}

/* 身份标注 〖#身份〗 */
.identity {
    color: #4169E1;  /* 皇室蓝 */
    font-weight: 500;
    cursor: default;
}

/* 事件标注（事件名、事件链接等） */
.event {
    color: #8B4513;  /* 褐色 */
    font-weight: 500;
    cursor: default;
}

/* 引号内容样式（对话） */
/* 视觉设计：克制优雅的对话标记
 * - 斜体：区分对话与叙述
 * - 淡褐色背景：极淡的底色（透明度0.03），不干扰阅读
 * - 底部虚线：褐色虚线（透明度0.3），提供清晰但不突兀的视觉边界
 * - 适度内边距：左右各2px，保持文字呼吸感
 */
.quoted {
    font-style: italic;
    background-color: rgba(139, 69, 19, 0.03);
    border-bottom: 1px dashed rgba(139, 69, 19, 0.3);
    padding: 0 2px;
}

/* ======================================== 拼音注释样式（Ruby标注） ======================================== */

/* Ruby 标注基础样式 */
ruby {
    ruby-position: over;
    ruby-align: center;
    margin: 0 0.03em;  /* ruby元素之间的左右间距，适度减小 */
}

/* 拼音文本（rt元素）样式 */
rt.pinyin-rt {
    font-family: system-ui, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 0.5em;
    font-weight: 400;
    color: #7a6e62;
    letter-spacing: 0.03em;  /* 拼音字母间距适度减小 */
    line-height: 1.2;
    padding: 0 0.08em;  /* 拼音左右padding适度减小 */
}

/* 标题中的拼音 */
h1 rt.pinyin-rt,
h2 rt.pinyin-rt,
h3 rt.pinyin-rt {
    font-size: 0.55em;
    color: #6a5a4a;
    padding: 0 0.1em;  /* 标题中的拼音间距也适度减小 */
}

/* 专名和多音字的拼音（不再强调显示） */
rt.pinyin-rt.pinyin-emphasis {
    /* 移除红色和加粗，与普通拼音保持一致 */
}

/* 特殊读音标识（可选：添加下划线或其他标识） */
rt.pinyin-rt.pinyin-special {
    /* 特殊读音词，与普通拼音保持一致，通过title提示区分 */
    cursor: help;  /* 鼠标悬停显示帮助光标 */
}

/* 汉字部分保持原样式 */
ruby .hanzi {
    letter-spacing: 0.02em;  /* 汉字间距也相应减小 */
}

/* 拼音隐藏功能 - 当关闭拼音显示时隐藏所有 rt 元素 */
body.pinyin-off rt.pinyin-rt {
    display: none;
}

/* 调整行高以适应ruby标注 */
body:not(.pinyin-off) p,
body:not(.pinyin-off) li,
body:not(.pinyin-off) blockquote {
    line-height: 2.2;
}

body:not(.pinyin-off) h1,
body:not(.pinyin-off) h2,
body:not(.pinyin-off) h3 {
    line-height: 1.8;
}

/* 章节标题 */
h1 {
    color: #8B0000;
    border-bottom: 3px solid #8B0000;
    padding-bottom: 10px;
}

h2 {
    color: #8B4513;
    border-left: 5px solid #8B4513;
    padding-left: 15px;
    margin-top: 40px;
}

h3 {
    color: #B8860B;
    margin-top: 30px;
}

/* 分隔线 */
hr {
    border: none;
    border-top: 2px solid #ddd;
    margin: 40px 0;
}

/* 引用块（对话） - 缩进两个汉字 */
blockquote {
    border: none;
    margin: 0.5em 0;  /* 稍微增加上下边距，避免与段落贴太紧 */
    padding: 0;
    padding-left: 2em;
    background: none;
    font-style: italic;
}

/* 当段落以"曰："结尾且后接blockquote时，减小段落下边距 */
p:has(+ blockquote) {
    margin-bottom: 0.5em;  /* 减小"曰："后的空白 */
}

/* 长对话缩进 - 段内较长引号内容另起一行，缩进两个汉字 */
.dialogue {
    display: block;
    padding-left: 2em;
}

/* 列表样式 - 古籍风格，去除项目符号，仅缩进 */
ul, ol {
    line-height: 2;
    list-style: none;
    padding-left: 2em;
    margin: 1em 0;
}

ul li, ol li {
    margin: 0;
}

/* 段落编号 (PN - Purple Numbers) - 致敬 Doug Engelbart
 * Purple Numbers 是 Doug Engelbart 在 1960 年代提出的概念，
 * 用于为文档中的每个段落分配唯一的、可引用的编号。
 * 这一创新使得超文本链接和精确引用成为可能，
 * 是现代互联网和知识管理系统的重要基础。
 *
 * 参考 Eugene Eric Kim 的实现 (https://eekim.com/software/purple/purple.html)
 * 使用淡紫色，字体较小，显示在段落开头。
 * 点击 PN 可复制带锚点的完整 URL，便于分享和引用。
 */
.para-num {
    display: inline;
    color: #C8A8FF;  /* 淡紫色 - 参考 Purple 原始实现 */
    font-family: Helvetica, Arial, sans-serif;
    font-size: 0.75em;  /* x-small */
    font-weight: bold;
    font-style: normal;
    margin-right: 0.5em;  /* 开头位置，右边距 */
    text-decoration: none;
    vertical-align: baseline;
    font-variant-numeric: tabular-nums;
    cursor: pointer;  /* 显示为可点击 */
    transition: color 0.2s ease;
}

/* 段落编号悬停效果 */
.para-num:hover {
    color: #9370DB;  /* 深一点的紫色 */
    text-decoration: underline;
}

/* 当段落编号独立成段时（段落只包含编号），显示为块级元素 */
p:has(> .para-num:only-child) {
    margin: 0.5em 0;
}

p > .para-num:only-child {
    display: inline-block;
    margin-bottom: 0.3em;
}

/* 史记年表样式 - 突破 body max-width 限制，占满视口宽度 */
/* wrapper 同时限制高度并启用双向滚动，使 thead sticky 生效 */
.shiji-table-wrapper {
    overflow: auto;
    width: 100vw;
    max-height: 85vh;
    margin-left: calc(-50vw + 50%);
    margin-top: 2em;
    margin-bottom: 2em;
    border-top: 1px solid #d0c8a0;
    border-bottom: 1px solid #d0c8a0;
    box-shadow: 0 1px 4px rgba(90, 74, 42, 0.08);
}

.shiji-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.85em;
    line-height: 1.7;
    font-family: "Noto Serif SC", "Source Han Serif SC", serif;
}

.shiji-table th {
    background-color: #5a4a2a;
    color: #f5f0e0;
    font-weight: bold;
    padding: 8px 12px;
    border: 1px solid #4a3c1e;
    text-align: center;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 10;
    font-family: "Noto Sans SC", "Source Han Sans SC", sans-serif;
    font-size: 0.95em;
    letter-spacing: 0.05em;
}

.shiji-table td {
    padding: 6px 10px;
    border: 1px solid #e0dcc8;
    text-align: left;
    vertical-align: top;
    color: #2c2c2c;
}

.shiji-table tr.even td {
    background-color: #fdfdf8;
}

.shiji-table tr.odd td {
    background-color: #f5f0e0;
}

.shiji-table tbody tr:hover td {
    background-color: #ede8d4;
    transition: background-color 0.15s ease;
}

.shiji-table td:nth-child(2) {
    white-space: nowrap;
    font-weight: 600;
    color: #5a4a2a;
    background-color: rgba(90, 74, 42, 0.06);
    text-align: center;
    border-right: 2px solid #d0c8a0;
}

/* 表格行号列（Purple Number for table rows） */
.row-pn-col {
    width: 2em;
    min-width: 2em;
    text-align: right;
    padding-right: 6px !important;
    color: #C8A8FF;
    font-size: 0.75em;
    font-family: Helvetica, Arial, sans-serif;
    white-space: nowrap;
    border-right: 1px solid #e0d8c0;
    user-select: none;
    -webkit-user-select: none;
}

.row-pn-col .para-num {
    font-size: 1em;  /* 继承列字号，不再额外缩小 */
}

/* 语义标注块（::: fenced div） */
.note-box {
    background-color: #fffef0;
    border: 1px solid #e6e0c0;
    border-radius: 5px;
    padding: 15px 20px;
    margin: 20px 0;
}

.note-box h4 {
    color: #8B7500;
    margin-top: 0;
}

/* 太史公曰 */
.note-太史公曰 {
    border-left: 3px solid #8B7500;
}

/* 赞（韵文） */
.note-赞 {
    border-left: 3px solid #a0522d;
    background-color: #fefcf5;
    font-style: italic;
}
.note-赞 p {
    line-height: 2.0;
    white-space: pre-line;
}

/* 诗歌 */
.note-诗歌 {
    border-left: 3px solid #6b8e23;
    background-color: #fcfef5;
    font-style: italic;
}
.note-诗歌 p {
    line-height: 2.0;
    white-space: pre-line;
}

/* ======================================== 配置面板样式 ======================================== */

/* 浮动配置按钮 - 定位在导航栏右侧，无边框纯图标 */
#settings-toggle {
    position: fixed;
    top: 27px;
    right: calc(50% - 450px + 20px);  /* 相对于 body max-width(900px) 右侧 20px */
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 20px;
    z-index: 1000;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    padding: 0;
}

/* 在小屏幕上回退到右侧定位 */
@media (max-width: 960px) {
    #settings-toggle {
        right: 20px;
    }
    #settings-panel {
        right: 20px;
    }
}

#settings-toggle:hover {
    opacity: 1;
    transform: scale(1.15);
}

#settings-toggle:active {
    transform: scale(0.95);
}

/* 配置面板 */
#settings-panel {
    position: fixed;
    top: 70px;
    right: calc(50% - 450px + 20px);  /* 与按钮对齐 */
    width: 280px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    padding: 20px;
    z-index: 999;
    display: none;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

#settings-panel.active {
    display: block;
    animation: slideIn 0.2s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#settings-panel h3 {
    margin: 0 0 15px 0;
    font-size: 16px;
    font-weight: 600;
    color: #2c2c2c;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 10px;
    border-left: none;
    padding-left: 0;
}

.setting-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.setting-item {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.setting-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.setting-item span {
    font-size: 14px;
    color: #2c2c2c;
}

/* 关闭语法高亮时的样式 - 覆盖所有实体类型 */
body.syntax-highlight-off .person,
body.syntax-highlight-off .place,
body.syntax-highlight-off .official,
body.syntax-highlight-off .time,
body.syntax-highlight-off .dynasty,
body.syntax-highlight-off .feudal-state,
body.syntax-highlight-off .institution,
body.syntax-highlight-off .tribe,
body.syntax-highlight-off .artifact,
body.syntax-highlight-off .astronomy,
body.syntax-highlight-off .book,
body.syntax-highlight-off .mythical,
body.syntax-highlight-off .concept,
body.syntax-highlight-off .biology,
body.syntax-highlight-off .action,
body.syntax-highlight-off .identity,
body.syntax-highlight-off .ritual,
body.syntax-highlight-off .legal,
body.syntax-highlight-off .quantity,
body.syntax-highlight-off .verb-military,
body.syntax-highlight-off .verb-penalty,
body.syntax-highlight-off .verb-political,
body.syntax-highlight-off .verb-economic {
    color: inherit !important;
    background-color: transparent !important;
    text-decoration: none !important;
    font-weight: inherit !important;
    font-style: inherit !important;
    border-bottom: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}